Input gestures on React Native
Gesture activated functionality should also be available without the use of gestures. Not everyone is able to make all gestures. For example, for users with limited mobility it might be difficult or impossible to make the 'pinch-to-zoom' gesture. You should provide buttons to zoom in and out as an alternative.
In React Native, the Gesture Responder System
is a common way to detect gestures.
A gesture should not be the only way to trigger actions. Make sure to provide a second way, such as a button, to trigger the same action.
import { PinchGestureHandler, State } from 'react-native-gesture-handler'
const PinchableView = () => {
scale = new Animated.Value(1)
onPinchEvent = Animated.event([{
nativeEvent: { scale: this.scale }
}], {
useNativeDriver: true
})
onPinchStateChange = event => {
if (event.nativeEvent.oldState === State.ACTIVE) {
// Provide alternative
Animated.spring(this.scale, {
toValue: 1,
useNativeDriver: true
}).start()
}
}
return (
<PinchGestureHandler
onGestureEvent={this.onPinchEvent}
onHandlerStateChange={this.onPinchStateChange}>
<View style={{
transform: [{ scale: this.scale }]
}} />
</PinchGestureHandler>
)
}