react-native-touch-gestures
Native gestures in React Native
Getting started
$ npm install react-native-touch-gestures --save
Mostly automatic installation
$ react-native link react-native-touch-gestures
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜ Add Files to [your project's name]
- Go to
node_modules
➜ react-native-touch-gestures
and add RNGGestures.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNGGestures.a
to your project's Build Phases
➜ Link Binary With Libraries
- Run your project (
Cmd+R
)<
Usage
import Gestures from 'react-native-touch-gestures';
class Example extends Component {
render() {
return (
<View>
<Gestures.Pinch // Wrap the view with the Gestures.Pinch view that recognizes pinch
onStart={this.onPinchStart}
onChange={this.onPinchChange}
onFinish={this.onPinchFinish}
>
<Text>hello world</Text>
</Gestures.Pinch>
</View>
);
}
onPinchStart(event) {
console.log(
'gestureId: ', event.nativeEvent.gestureId,
'action: ', event.nativeEvent.action,
'scale: ', event.nativeEvent.scale
);
}
onPinchChange(event) {
console.log(
'gestureId: ', event.nativeEvent.gestureId,
'action: ', event.nativeEvent.action,
'scale: ', event.nativeEvent.scale
);
}
onPinchFinish(event) {
console.log(
'gestureId: ', event.nativeEvent.gestureId,
'action: ', event.nativeEvent.action,
'scale: ', event.nativeEvent.scale
);
}
}
Roadmap
- Add support for Android
- Add support for more gestures