2

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.

Hemendra Khatik
  • 371
  • 4
  • 22

1 Answers1

2

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");
           }
    }
  };
Satheesh
  • 10,998
  • 6
  • 50
  • 93
  • 1
    I didn't get it. Now I just know that I have to use PinchGestureHandler but I don't know how to display whether user zoomed in or zoomed out?? If you can provide the code which display zoomed in or zoomed out according to touches that will be really really helpful – Hemendra Khatik May 24 '21 at 05:47
  • Check the edits. If you can go through the documentation you can do it yourself. – Satheesh May 24 '21 at 05:59
  • 1
    State.ACTIVE here I'm getting state is undefined and also documentation is very poor it doesn't help anywhere. – Hemendra Khatik May 24 '21 at 06:10
  • import { State } from 'react-native-gesture-handler'; The docs are fine, please go through them at least once. – Satheesh May 24 '21 at 06:13