React native game pad (ios + android)
A React Native game pad using nipplejs for an on-screen joystick.
Install
npm i react-native-game-pad -S
Usage
The recent move of WebView to an external package has caused a breaking change. The new webview now needs to be linked. To make this package work the react-native-webview
package is now a peerDependency.
Please install react-native-webview and follow the install instructions.
Import it into your project. If you want a dual joystick game pad set dualJoystick={true}
(defaults to single joystick gamepad).
The methods for dual joystick events are different. Please refer to the list of props below.
import RNGamePad from 'react-native-game-pad';
Options
Prop
Events
The following events section has been lifted from the nipplejs repo and altered for this library as they return the same data.
onStart
A joystick is activated. (the user pressed on the active zone)
Will pass the instance alongside the event.
onEnd
A joystick is de-activated. (the user released the active zone)
Will pass the instance alongside the event.
onMove
A joystick is moved.
Comes with data :
onDir
When a direction is reached after the threshold.
Direction are split with a 45° angle.
You can also listen to specific direction like :
onDirUp
onDirDown
onDirLeft
onDirRight
In this configuration only one direction is triggered at a time.
onPlane
When a plain direction is reached after the threshold.
Plain directions are split with a 90° angle.
You can also listen to specific plain direction like :
onPlaneUp
onPlaneDown
onPlaneLeft
onPlaneRight
TODO:
- [x] allow different pad layouts
- [ ] Allow different types of joystick. Currently on
static
is supported - [ ] Break example in to multiple screens
- [ ] Add test suite
- [x] Add X and Y locks