Multitouch Joystick for React-native

Table Of Contents

• Install
• Usage
• Props
  • onValue
• Contributing

Install

npm install multitouchjoystick

npm install [email protected]

npm install [email protected]

Usage

Import it the way you want into your project :

// import module
import Joystick from "multitouchjoystick";

Single Stick

// render
<Joystick
  resetOnRelease={true}
  autoCenter={true}
  onValue={(x, y) => {
    // values are between -1 and 1
    console.log(x, y);
  }}
/>

Dual Stick

// 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>

Props

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)

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.