How to detect whether user zoomed in or zoomed out in react native

Question

I'm working on an react native app and I want to detect whether user zoomed in or zoomed out.

I just want to print user zoomed in if user zoomed in and zoomed out if user zoomed out

something like below pseudo code

   const detectZoom = (event)=>{

   if(event.gesture === "zoomed in"){
      console.log("Zoomed in");
   }
  
  if(event.gesture === "zoomed out"){
     console.log("Zoomed out");
  }
}


//This is how I want to call it
<TouchableHighlight onPress={this.detectZoom}>

</TouchableHighlight>

Please do let me know the better way of doing this.

Answer 1

You should use react-native-gesture-handler and specifically use the Pinch gesture In your View/Container.

yarn add react-native-gesture-handler

https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/pinch-gh

<PinchGestureHandler
        onGestureEvent={this._onPinchGestureEvent}
        onHandlerStateChange={this._onPinchHandlerStateChange}>
  <View style={styles.container} collapsable={false}>
  </View>
</PinchGestureHandler>

Your handler:

 let previousScale = 1;
_onPinchHandlerStateChange = (event) => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      //Handle Zoom here based on the values..
          let newScale = previousScale * event.nativeEvent.scale;
           if(newScale > previousZoom){
            console.log("zoomed in");
           }else{
            console.log("zoomed out");
           }
    }
  };