Axis Pad for React Native
A virtual joystick for touch capable mobile devices.
Table Of Contents
Install
npm install react-native-axis-pad --save
Preview
Usage
Import it the way you want into your project :
// import module;
Single Stick
// render<AxisPad resetOnRelease=true autoCenter=true onValue= { // values are between -1 and 1 console; }> <Text>Optional Component</Text></AxisPad>
Dual Stick
Note: Multi-touch for Android is not supported yet!
// render<View style=flexDirection:'row'justifyContent: 'space-around' alignItems: 'center'> <AxisPad resetOnRelease=true autoCenter=true onValue= { // values are between -1 and 1 console; } /> <AxisPad resetOnRelease=true autoCenter=true onValue= { // values are between -1 and 1 console; } /></View>
Props
You can configure your axis pad in react-native props : (All options are optional)
size: Integer // Wrapper circle size. Default: 300 handlerSize : Intager // Handler circle size. Default: 150 wrapperStyle : Object // Wrapper circle styles. handlerStyle : Object // Handler circle styles. step: Float // Step size for values. Default: 0 lockX: Boolean // Block to X axis movement. Default: false lockY: Boolean // Block to Y axis movement. Default: false autoCenter: Boolean // Move wrapper to center of your touch area. Default: false resetOnRelease: Boolean // Set (0,0) position on touch end. Default: false onValue: Function // callback: returned values { x:Float, y:Float }
step
Step size for all axis changes. Example: 1/3 is 3 step down, 0 and 3 step up. Total 7 values: [ -1, -0.66 , -0.33 , 0 , 0.33 , 0.66 , 1]
onValue
Returned the position values.
Is triggered when axis changed. "x" and "y" values are between -1 and 1.
Contributing
If you want to contribute to a project and make it better, your help is very welcome. Contributing is also a great way to learn more about social coding on Github, new technologies and and their ecosystems and how to make constructive, helpful bug reports, feature requests and the noblest of all contributions: a good, clean pull request.