Skip to main content
Logo Appt Light

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>
  )
}

Feedback?

Let us know!