0

I'm attempting to use the PanGestureHandler component from the react-native-gesture-handler library.

The main reason behind this is to move the handling away from the JS Thread.

The app i am building is in Expo but after finding the export from Expo not particularly typescript friendly i've opted for using the library directly.

Thus far i cannot seem to get the events to fire. Essentially i am trying to use the pan gesture to invoke a change in navigation but wanted to understand the values i got back from each left or right swipe with this library to determine the correct route to take.

My starting point is very simply:

<PanGestureHandler
    onGestureEvent={event => console.log('onGestureEvent', { event })}
    onHandlerStateChange={event => console.log('onHandlerStateChange', { event })}
>
    <Animated.View style={{ flex: 1, backgroundColor: 'pink' }} />
</PanGestureHandler>

I was hoping the console would show up the standard event object but absolutely nothing happens when i input a swiping touch.

This is specifically relating to Android which this project is being built for and i get the same nothing response on both an emulator and an actual device.

Any pointers greatly appreciated.

Andy4Ward
  • 1
  • 5
  • I came here by google search, but now I realized I didn't link the package properly. may be it's your case too. see its docs for more info. – Ali Kazemkhanloo Jul 19 '19 at 15:18

1 Answers1

3

I have fixed it by using below steps

Do change in MainActivity

+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
Rajesh N
  • 6,198
  • 2
  • 47
  • 58
  • Is it possible to add some sort of checks in the onGestureFunciton? Or can we only use the event directly? See this please https://stackoverflow.com/questions/64330969/stop-dragging-after-a-limit-has-reached –  Oct 13 '20 at 08:55
  • we can use the event directly. above code is mandatory, for custom swipe you can use https://github.com/glepur/react-native-swipe-gestures#readme – Rajesh N Oct 13 '20 at 11:34
  • @RajeshNasit Where is that file? can you answer please, I've been searching for an answer for days but expo with react native gesture handler isnt firing any event! – kariryzh Feb 01 '22 at 17:36
  • android=>app=>src=>java=>MainActiivty – Rajesh N Feb 01 '22 at 17:51