npm install multitouchjoysticknpm install react-native-reanimated@2.3.1npm install react-native-gesture-handler@2.2.0Import it the way you want into your project :
// import module
import Joystick from "multitouchjoystick";// render
<Joystick
resetOnRelease={true}
autoCenter={true}
onValue={(x, y) => {
// values are between -1 and 1
console.log(x, y);
}}
/>// render
<View
style={{
justifyContent: "space-around",
alignItems: "center",
}}
>
<Joystick
onValue={(x, y) => {
// values are between -1 and 1
console.log(x, y);
}}
/>
<Joystick
onValue={(x, y) => {
// values are between -1 and 1
console.log(x, y);
}}
/>
</View>You can configure your joystick in react-native props : (All options are optional)
backgroundColor: String, // Wrapper color. Default rgba(255, 255, 255, 1)
ballColor: String, // Handler circle color. Default rgba(0, 0, 256, 0.5)
ballRadius: Number, // Handler circle size. Default: 30
height: Number, // height wrapper. Default: 200
width: Number, // width wrapper. Default: 200
onValue: Function // callback: returned values (x:Float ,y: Float)Returned the position values.
Is triggered when axis changed. "x" and "y" values are between -1 and 1.
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.