software-mansion/react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.

Declarative API exposing platform native touch and gesture system to React Native.

React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.

With this library gestures are no longer controlled by the JS responder system, but instead are recognized and tracked in the UI thread. It makes touch interactions and gesture tracking not only smooth, but also dependable and deterministic.

Installation

Check getting started section of our docs for the detailed installation instructions.

Fabric

To learn how to use react-native-gesture-handler with Fabric architecture, head over to Fabric README. Instructions on how to run Fabric Example within this repo can be found in the FabricExample README.

Documentation

Check out our dedicated documentation page for info about this library, API reference and more: https://docs.swmansion.com/react-native-gesture-handler/docs/

Examples

If you want to play with the API but don't feel like trying it on a real app, you can run the example project. Clone the repo, go to the example folder and run:

yarn install

If you are running on ios, run pod install in the ios folder

Run yarn start to start the metro bundler

Run yarn android or yarn ios (depending on which platform you want to run the example app on).

You will need to have an Android or iOS device or emulator connected as well as react-native-cli package installed globally.

React Native Support

version	react-native version
2.16.0+	0.68.0+
2.14.0+	0.67.0+
2.10.0+	0.64.0+
2.0.0+	0.63.0+
1.4.0+	0.60.0+
1.1.0+	0.57.2+
<1.1.0	0.50.0+

It may be possible to use newer versions of react-native-gesture-handler on React Native with version <= 0.59 by reverse Jetifying. Read more on that here https://github.com/mikehardy/jetifier#to-reverse-jetify--convert-node_modules-dependencies-to-support-libraries

License

Gesture handler library is licensed under The MIT License.

Credits

This project has been build and is maintained thanks to the support from Shopify, Expo.io and Software Mansion

react-native-gesture-handler's Issues

Not able to run examples

I keep getting this error even after recloning and clearing all caches:

Loading dependency graph, done.
Bundling `index.ios.js`  [development, non-minified]  0.0% (0/1), failed.
error: bundling failed: ambiguous resolution: module `/Users/brunolemos/Projects/packages/react-native-gesture-handler/Example/index.ios.js` tries to require `react-native`, but there are several files providing this module. You can delete or fix them: 

  * `/Users/brunolemos/Projects/packages/react-native-gesture-handler/Example/node_modules/react-native-gesture-handler/Example/node_modules/react-native/package.json`
  * `/Users/brunolemos/Projects/packages/react-native-gesture-handler/Example/node_modules/react-native/package.json`

Use PureComponent instead of Component

I'm using https://github.com/maicki/why-did-you-update to avoid unnecessary rerenders and it's complaining about Swipeable:

Max / Min scale for pinch

A prop for max/min scale relative to initial scale would be awesome!

iOS draggable doesn't "keep up" with finger

The gist of this problem is that on iOS, when you drag a draggable element very quickly and the user's finger goes outside the bounds of the draggable element, the drag movement abruptly stops. Just run the code at https://github.com/kmagiera/react-native-gesture-handler/blob/master/Example/draggable/index.js on iOS and move your finger very quickly to see what I mean.

On one level, this does make sense, since the user's finger is no longer on the draggable element. But from a usability perspective, it seems as though this is not the right interaction. And on Android, no matter how fast you move your finger, the draggable element is never lost, which is more in line with the interaction we would expect to see.

iOS in-progress branch?

I'd be interested in an ios branch, even if it's still in-progress. 😄

Support disabled prop for buttons

I'm trying out to swap a generic Touchable component I use in an app to use this library instead of react-native TouchableX and one simple feature I noticed was missing is a way to disable the buttons, RN touchables have a disabled prop.

From what I understand this feature could be implemented in JS land by just not showing feedback and preventing the call to onPress.

Swipeable: renderLeftActions "The data couldn't be read because it isn't in the correct format"

Hey,

Awesome module! I'm here to ask about the Swipeable component. When adding renderLeftActions or renderRightActions I get a red box:

The data couldn't be read because it isn't in the correct format

I've narrowed it down to the { translateX: this._leftActionTranslate } located here:
https://github.com/kmagiera/react-native-gesture-handler/blob/master/Swipeable.js#L226

If I set translateX to this._transX, it works correctly (it doesn't bounce back all the way but hopefully I'll figure it out soon)

I'm going to keep hunting down the problem and will try to put together a PR. Any hints would be appreciated.

Thanks again for the library!!!!

How to open DrawerLayout component from button?

I can't find any function etc in DrawerLayout that I could open it with. For example if I wan't to have hamburger menu button which opens the drawer for me. Tell me if more info is needed :) Dragging works fine but having button for opening would be nice too

onMoveShouldSetPanResponder for PanGestureHandler?

I'm running into a situation PanGestureHandler is being set too soon. E.g. the PanHandler start event fires AFTER the touch has been handled by a long press.

With a vanilla PanHandler, I would just leave onStartShouldSetPanResponder undefined and instead set onMoveShouldSetPanResponder: () => true. But there doesn't appear to be any way to do the equivalent with PanGestureHandler. Any insight?

Button type for text only buttons

For this button, we want it to fade when we tap on it. With both BorderlessButton or RectButton, the effect takes up the full width of the container (in this case, it goes all the way to the right side of the screen)

[ios] Xcode reports nullability warnings

Xcode asks for some nullability annotations:

deleteme

deleteme

PanGestureHandler does not cancel when outside.

Hey there, love what this project is trying to accomplish and I was hoping that it could assist with an use case in our app. What we have is a scroll view with a nested view that responds to both tap and pan gestures. Once activated with tap or pan we want the view to cancel the gesture and make the ScrollView the responder.

I've found that shouldCancelWhenOutside doesn't work with PanGestureHandler. I have an example project here that shows the issue. Is this expected? Related gif below as well.

Thanks for your help and appreciate the work you're doing. 👍🏻

Edit: Jumped into the source code and did a bit of debugging and I think I could handle the PR for this if that's alright. 😄

Unreliable Dragging & Pressing [android]

I demo'd this lib via the included example app (1.0.0-alpha.17) on a physical Pixel XL ([email protected]):

Issue: Dragging and Pressing draggable-objects (aka pink boxes) is not reliable.

Behavior: The pink draggable boxes in the example app do not consistently respond to being single-tapped or dragged. Attempting to tap or drag a box requires multiple attempts (which often fail to be recognized) and is an overall frustrating experience. The non-native javascript PanResponder behaves significantly better (see Note below).

Steps to Reproduce:

1. Load the example app onto a physical device
2. Navigate to one of the following screens: Draggable or Combo with RN's ScrollView
3. Attempt to drag or single-press a pink draggable box
4. Notice that attempts to drag or tap these boxes fail more often than they succeed.

Expected Behavior: Dragging and tapping draggable-objects should be a fluid/seamless experience.

Note: If you navigate to the example app's PanResponder screen, you can see that the non-native javascript PanResponder is (for some unknown reason) more reliable/smooth than this libs native implementation.

Long press doesn't work as expected on iOS

Expected: once min duration is met, it should become active.
Actual iOS: only becomes active after min duration is met and touch is released
Actual Android: same as expected

Support for native PanGestureHandler

Hey,
first off: a big thanks to you for this awesome project.

I've got a question though: for when is native PanGestureHandler support planned? This would really help me out a lot, as there currently is no other way of smooth panning animations despite writing your own native components.

Thanks in advance!

DragonRaider5

onHandlerStateChange not firing sometimes on iOS

Expected behavior

On Android, the events fire as expected.

15:39:42.515: { id: 'scroll',
15:39:42.515:   oldStateName: 'UNDETERMINED',
15:39:42.515:   newStateName: 'BEGAN' }
15:39:42.519: { id: 'drawer',
15:39:42.519:   oldStateName: 'UNDETERMINED',
15:39:42.519:   newStateName: 'BEGAN' }
15:39:42.521: { id: 'masterdrawer',
15:39:42.521:   oldStateName: 'UNDETERMINED',
15:39:42.521:   newStateName: 'BEGAN' }
15:39:42.570: { id: 'drawer', oldStateName: 'BEGAN', newStateName: 'ACTIVE' }
15:39:44.797: { id: 'scroll', oldStateName: 'BEGAN', newStateName: 'ACTIVE' }
15:39:44.800: { id: 'masterdrawer',
15:39:44.800:   oldStateName: 'BEGAN',
15:39:44.800:   newStateName: 'FAILED' }
15:39:49.217: { id: 'drawer', oldStateName: 'ACTIVE', newStateName: 'END' }
15:39:49.217: 'END OFFSET', -425.2704223632812
15:39:49.235: { id: 'scroll', oldStateName: 'ACTIVE', newStateName: 'END' }
15:39:50.779: { id: 'scroll',
15:39:50.779:   oldStateName: 'UNDETERMINED',
15:39:50.779:   newStateName: 'BEGAN' }
15:39:50.781: { id: 'drawer',
15:39:50.781:   oldStateName: 'UNDETERMINED',
15:39:50.781:   newStateName: 'BEGAN' }
15:39:50.782: { id: 'masterdrawer',
15:39:50.782:   oldStateName: 'UNDETERMINED',
15:39:50.782:   newStateName: 'BEGAN' }
15:39:50.878: { id: 'drawer', oldStateName: 'BEGAN', newStateName: 'ACTIVE' }
15:39:51.589: { id: 'scroll', oldStateName: 'BEGAN', newStateName: 'END' }
15:39:51.590: { id: 'drawer', oldStateName: 'ACTIVE', newStateName: 'END' }
15:39:51.597: { id: 'masterdrawer',
15:39:51.597:   oldStateName: 'BEGAN',
15:39:51.597:   newStateName: 'FAILED' }

Actual behavior

On iOS, only the inner pan is firing (@kmagiera you will know what I mean by this).

15:44:04: { id: 'drawer', oldStateName: 'UNDETERMINED', newStateName: 'BEGAN' }
15:44:04: { id: 'drawer', oldStateName: 'BEGAN', newStateName: 'ACTIVE' }
15:44:09: { id: 'drawer', oldStateName: 'ACTIVE', newStateName: 'END' }
15:44:09: 'END OFFSET', -436.5

borderRadius on RectButton on Android

Setting borderRadius on RectButton does not actually round the corners. Current workaround is to wrap a RectButton with a View that has a borderRadius set.

Pinch gesture recognizer stops after 1-2 seconds on Android, hard to use on Android

See on Android it stops updating values in the middle of the gesture: https://www.youtube.com/watch?v=nIuLV8kPK8Q
See on iOS it works as expected, doesn't stop updating values: https://www.youtube.com/watch?v=CQZUJgWMphk

This is also easy to see inside of the example project -- on Android it's a lot harder to pinch to zoom than it is to rotate / pan, but on iOS it works as expected.

See on Android that pinch is tough to use: https://www.youtube.com/watch?v=gm7xXbNGTfk
See on iOS it is beautiful (with the exception of an error at the end, which of course just randomly happened while I was recording this): https://www.youtube.com/watch?v=g-LLvP5x6vk

error: RNGestureHandlerPackage is not abstract and does not override abstract method createJSModules() in ReactPackage

I followed all instructions in README.md including altering MainActivity.java and linking.

Still following error happens. Is this package not compatible with Android + RN 0.46?

C:\Users\zerocho\WebstormProjects\puzzle\node_modules\react-native-gesture-handler\android\src\main\java\com\swmansion\gesturehandler\react\RNGestureHandlerPackage.java:24: error: RNGestureHandlerPackage is not abstract and does not override abstract method createJSModules() in ReactPackage
public class RNGestureHandlerPackage implements ReactPackage {
       ^
Note: C:\Users\zerocho\WebstormProjects\puzzle\node_modules\react-native-gesture-handler\android\src\main\java\com\swmansion\gesturehandler\react\RNGestureHandlerButtonViewManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
1 error
 FAILED

BUILD FAILED

Total time: 15.779 secs

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-gesture-handler:compileReleaseJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

Swipeable, DrawerLayout not included in build

The last bunch of npm builds including 1.0.0-alpha.26 are missing the Swipeable.js and DrawerLayout.js files.

Is it possible to change the sensitivity of the rotation events?

I was wondering if it was possible to change the sensitivity of the rotation (how much is rotate for a given rotation gesture event)?

PanGestureHandler w/o child Animated?

I have a use case where I need to know about drag events but don't actually want to animate the direct child of the PanGestureHandler.

For example, the following code for a "Draggable" component does not work:

      <View>
        {/* Note how the Animated.View is outside PanGestureHandler */}
        <Animated.View
          style={[
            {
              transform: [
                { translateX: this._translateX },
                { translateY: this._translateY },
              ],
            },
          ]}
        >
          {/* Clone on drag */}
          {this.state.active && this.props.children}
        </Animated.View>
        
        {/* Listen for drag events */}
        <PanGestureHandler
          onGestureEvent={this._onGestureEvent}
          onHandlerStateChange={this._onHandlerStateChange}>
            {this.props.children}
        </PanGestureHandler>
      </View>

Is this simply not possible?

"i" is read-only

in https://github.com/kmagiera/react-native-gesture-handler/blob/de3ae768a715f408cc3e361bcf46e6bd98402885/GestureHandler.js#L361

there is a for (const i = ...) which throws an error: "i" is read-only. This should be a let declaration.

Edit: I don't know why i get this error all of sudden. I don't have it in another project. But this line is clearly wrong

Example not working with TypeScript

Hello again :-) ,

I just tried importing the example code for rotate+scale into my TypeScript+Expo app for experimentation, but I met a strange problem. On my app, I can only do either rotate or scale when gesturing with two touches, but not both at the same time. However, if I try the code in a snack, it works fine doing both at the same time.

https://gyazo.com/87fa89acea002c3528b900adf3ea50a7 (Expo snack)
https://gyazo.com/4cd9be3ad18ca454b0630d1fa2accee0 (TypeScript + Expo on own simulator)

The only things I changed from the example code was

• Remove unused imports, change import of react to "import * as React from 'react'"
• Declare the instance variables created in the constructor, rename them to not start with _ to satisfy my TSLint

none of which, to my knowledge, should make any difference. Do you have any idea what's going wrong?

Also, bonus question: There's a PanResponder that supposedly should do "tilting", but I'm not sure if that's working on either example? What should it do, and how? I can't seem to do anything but rotate or scale, with neither two or one touch.

Thank you :-)

Simulator: iPhone 7, iOS 11.2
TypeScript: 2.6.1
Expo SDK: 21

Full TS code here:

import * as React from 'react';
import { Animated, StyleSheet, View } from 'react-native';

import {
  PanGestureHandler,
  PinchGestureHandler,
  RotationGestureHandler,
  ScrollView,
  State,
} from 'react-native-gesture-handler';

const USE_NATIVE_DRIVER = false; // https://github.com/kmagiera/react-native-gesture-handler/issues/71

export class Sticker extends React.Component {
  onTiltGestureEvent: (...args: any[]) => void;
  lastTilt: number;
  tiltStr: Animated.AnimatedInterpolation;
  tilt: Animated.Value;
  onRotateGestureEvent: (...args: any[]) => void;
  lastRotate: number;
  rotateStr: Animated.AnimatedInterpolation;
  rotate: Animated.Value;
  onPinchGestureEvent: (...args: any[]) => void;
  lastScale: number;
  scale: Animated.AnimatedMultiplication;
  pinchScale: Animated.Value;
  baseScale: Animated.Value;
  constructor(props) {
    super(props);

    /* Pinching */
    this.baseScale = new Animated.Value(1);
    this.pinchScale = new Animated.Value(1);
    this.scale = Animated.multiply(this.baseScale, this.pinchScale);
    this.lastScale = 1;
    this.onPinchGestureEvent = Animated.event(
      [{ nativeEvent: { scale: this.pinchScale } }],
      { useNativeDriver: USE_NATIVE_DRIVER }
    );

    /* Rotation */
    this.rotate = new Animated.Value(0);
    this.rotateStr = this.rotate.interpolate({
      inputRange: [-100, 100],
      outputRange: ['-100rad', '100rad'],
    });
    this.lastRotate = 0;
    this.onRotateGestureEvent = Animated.event(
      [{ nativeEvent: { rotation: this.rotate } }],
      { useNativeDriver: USE_NATIVE_DRIVER }
    );

    /* Tilt */
    this.tilt = new Animated.Value(0);
    this.tiltStr = this.tilt.interpolate({
      inputRange: [-501, -500, 0, 1],
      outputRange: ['1rad', '1rad', '0rad', '0rad'],
    });
    this.lastTilt = 0;
    this.onTiltGestureEvent = Animated.event(
      [{ nativeEvent: { translationY: this.tilt } }],
      { useNativeDriver: USE_NATIVE_DRIVER }
    );
  }

  onRotateHandlerStateChange = event => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      this.lastRotate += event.nativeEvent.rotation;
      this.rotate.setOffset(this.lastRotate);
      this.rotate.setValue(0);
    }
  };

  onPinchHandlerStateChange = event => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      this.lastScale *= event.nativeEvent.scale;
      this.baseScale.setValue(this.lastScale);
      this.pinchScale.setValue(1);
    }
  };

  onTiltGestureStateChange = event => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      this.lastTilt += event.nativeEvent.translationY;
      this.tilt.setOffset(this.lastTilt);
      this.tilt.setValue(0);
    }
  };

  render() {
    return (
      <PanGestureHandler
        id="image_tilt"
        onGestureEvent={this.onTiltGestureEvent}
        onHandlerStateChange={this.onTiltGestureStateChange}
        minDist={10}
        minPointers={2}
        maxPointers={2}
        avgTouches={true}
      >
        <RotationGestureHandler
          id="image_rotation"
          simultaneousHandlers="image_pinch"
          onGestureEvent={this.onRotateGestureEvent}
          onHandlerStateChange={this.onRotateHandlerStateChange}
        >
          <PinchGestureHandler
            id="image_pinch"
            simultaneousHandlers="image_rotation"
            onGestureEvent={this.onPinchGestureEvent}
            onHandlerStateChange={this.onPinchHandlerStateChange}
          >
            <View style={styles.container} collapsable={false}>
              <Animated.Image
                style={[
                  styles.pinchableImage,
                  {
                    transform: [
                      { perspective: 200 },
                      { scale: this.scale },
                      { rotate: this.rotateStr },
                      { rotateX: this.tiltStr },
                    ],
                  },
                ]}
                source={{
                  uri: 'https://avatars1.githubusercontent.com/u/6952717',
                }}
              />
            </View>
          </PinchGestureHandler>
        </RotationGestureHandler>
      </PanGestureHandler>
    );
  }
}

export default Sticker;

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'black',
    overflow: 'hidden',
    alignItems: 'center',
    justifyContent: 'center',
  },
  pinchableImage: {
    width: 250,
    height: 250,
  },
});

[Swipeable] Not working on older iOS versions

Tried the Swipeable component on iOS 8.1 and it throws this exception:

Swipeable.js:195:40 undefined is not a function (evaluating 'Math.sign(toValue)')
Fix: #82

On iOS 9.0 the swipe gesture works but it doesn't show the buttons.

Clarify differences from official PanResponder

I haven't used any but it would help to know the differences in the readme. Thanks.

Not an issue - this library is amazing

I just wanted to say thank you for creating this library. It's amazing. It just immediately solved this draggable performance problem I had been banging my head against for weeks, producing silky smooth draggable animations on old devices.

Thank you.

gestureHandlerRootHOC not available in 1.0.0-beta32

Hey there, tried to install 1.0.0-beta32 but found that it's missing the gestureHandlerRootHOC on the install.

Reverting to beta30 resolved, just wanted to give a heads up.

Is this a use case?

Hey there, thanks for the great work :). I'm trying to wrap my head around when, exactly, I can use this library to solve issues in my app. Is this question a potential use case?: https://stackoverflow.com/questions/46749179/animating-during-momentum-scroll-in-react-native

Appreciate any clarificaiton while you guys work on the docs. Thanks!

Is there a "onMoveShouldSetPanResponder" ?

Hi! Is it possible to conditionally set handler like in PanResponder's onMoveShouldSetPanResponder method? I need it to catch swipe down, but not catch swipe up

Any ETA for support of nested touch handlers with native driver?

Hey,

Thanks for a great lib, it's got a lot of potential to be the de facto library for gesture handling, especially for Expo projects!

One question. I tried running one of the examples (rotate+pinch) with native driver set to true, but get the following error:

Nesting touch handlers with native animated driver is not supported yet
...

Any ETA on when this is supported? That would make this library near perfect :-) But until then, there's no big difference between just implementing it using the core handlers and using this.

Android: Scale when pinching cannot go under 1

Hello,

Testing the code from the example, scaleAndRotate, the image is not scalable below 1 on Android, but it works fine on iOS - why is that? And is there any way to change this behavior?

Customize color of ripple on Android

For RectButton I believe this is done with underlayColor, but there doesn't seem to be an option for this on BorderlessButton

Typescript definitions

Currently this is the only package in my dependencies that doesn't have type definitions.
EDIT: Now this and react-native-navigation

Tried to use https://github.com/Microsoft/dts-gen but it doesn't support es6 modules (microsoft/dts-gen#42) which this repo uses.

I'm new to Typescript so I'll not jump into a PR right away.

Crashing on android with an illegalArgumentException

Howdy,

cross posting from this issue:

https://forums.expo.io/t/debugging-android-native-error/4792/13

Example request

Hello,

Thanks again for a cool library.

I'm trying to figure out how to customize the "scaleAndRotate" example to also allow for panning/dragging the image simultaniously while doing the other two gestures (or by itself, of course), but I can't quite figure it out. I think it'd be great with an example for that, as I'm trying to build the ubiquitous "sticker-on-photo" UX (a la Snapchat/Messenger or Instagram stories), and thought this library would be a great solution, and which I think many other developers will want to/have to implement :-)

If you give me a pointer or a code snippet, I could perhaps make a working example and a PR with it.

iOS crash perhaps caused divide by zero somewhere in gesture handler code

Ran into this error while recording the example from #26: https://www.youtube.com/watch?v=g-LLvP5x6vk

@terribleben opined that "nan/inf suggests divide by zero in gesturehandler math"

Deprecation on example

I am on combo page and them I press red button on top. Then I get this warning:

I think this is the culprit: https://github.com/kmagiera/react-native-gesture-handler/blob/master/Example/combo/index.js#L111

multi-touch handlers in android

By multi-touch views I mean something like:

<View
    onTouchStart={() => { console.log('pressing left button'); }}
    onTouchEnd={() => { console.log('releasing left button'); }}
>
    {...}
</View>
<View
    onTouchStart={() => { console.log('pressing right button'); }}
    onTouchEnd={() => { console.log('releasing right button'); }}
>
    {...}
</View>

The idea is the user has to hold both the left and right button for something to be triggered (the bit that waits for both to be pressed isn't in the example above, but I want to make clear that the two touchables are separate elements).

This works fine on iOS but not on Android: related to facebook/react-native#10068.

So, was hoping I could use this library to work around that issue. Doesn't seem to work however -- replacing the above with

<BaseButton
  onActiveStateChange={(isActive) => {
    if (isActive) {
      console.log('pressing left button');
    } else {
      console.log('releasing left button');
    }
  }}
>
  {...}
</BaseButton>
<BaseButton
  onActiveStateChange={(isActive) => {
    if (isActive) {
      console.log('pressing right button');
    } else {
      console.log('releasing right button');
    }
  }}
>
  {...}
</BaseButton>

But this results in the same issue as using View: once one button is held, pressing the other triggers the original button's handler (on Android).

Is there any way to use simultaneousHandlers here?

One finger Rotation?

Is it possible to change rotation to single finger touch?

Gesture Handlers stop responding when swapped.

I have a simple demo here:
https://snack.expo.io/Bkr5lme9W

Basically, you can use 1-finger panning to modify the pitch and yaw of the look-at matrix, and 2-finger panning in the y-axis to move the origin forward or backward in the direction of the "gaze".

I added a button to switch from 2-finger panning to pinch to move forward or backward, and when you hit this button, it seems to break the gesture handling.

Here's a video repro as well: https://youtu.be/xTC6Nh6j8NE

This seems to repro on either iOS or Android.

Swipeable not working right at device

Hi, first this component was really nice and helpful, thank you.

I have been running the Example at iOS simulator & iPhone 5C (10.3.3) device same time, the Swipeable.js from the component wasn't working right at device, in the Example:

Gesture handler based SwipeableRow, when I swipe it, it doesn't show action button at all...even the swiping gesture is working.

But in Table rows & buttons, that "Swipeable" component working well both in simulator & device.

I saw they are two different implementation, I am still looking for what's wrong with it.

Also feel obligated to report the issue here, and notice what happened.

[Android] How to install with react-native-navigation?

Everything else is clear in Android installation but editing the MainActivity.java. Since with react-native-navigation MainActivity.java is way different than normal. Here is installation for it https://wix.github.io/react-native-navigation/#/installation-android

As you can see MainActivity.java is pretty empty:

 import com.reactnativenavigation.controllers.SplashActivity;

 public class MainActivity extends SplashActivity {

 }

DrawerLayout component with absolute positioned children

Looks like that dark overlay that DrawerLayout is creating on top of the screen's content on drawert drag is not on top of absolutely positioned elements 🤔

Swipeable on Android throws exception if component is removed

I have a FlatList with Swipeable items. I have a handler onSwipeableLeftOpen that will remove the item from the list. Each item also has a checkbox that when clicked will remove the item from the list. If the only way you remove items is to swipe them away everything works great. If you click the checkbox the item is removed, but the next time you touch the list it will throw an exception.

I have only tested this on Android.

I tried to debug but I haven't had much luck tracking it down. I can say the exception is thrown in GestureHandlerOrchestrator.java line 318:

  throw new IllegalArgumentException("Parent is null? View is no longer in the tree");

I have a small example of this at
https://gist.github.com/tallenh/dfebf73859cca956bf8d6f31ccc4bf7c

app is crashing after RN update to 0.50.1

Hello. After I updated the RN version to 0.50.1, the app is crashing.
I was getting an error "Attempt to invoke virtual method java.lang.class". But after reinstaliing the gesture-handler, the app crashes without any errors.
When commenting the override method in the MainActivity.java the app starts though the library does not work.

[Question] Disable Ripple/Bubble Feedback on iOS

First off, thank you for sharing your work. This is by way of a question and not an issue. I was wondering if the ripple/bubble feedback on IOS was, somewhat, configurable? I would like to know how I can totally turn it off on my project please.

Thanks.

RCTGetUIManagerQueue has moved in RN 0.50

RNGestureHandlerModule.m calls RCTGetUIManagerQueue, but with RN 0.50 it doesn't compile because it needs to:

#import <React/RCTUIManagerUtils.h>

Warning: Module RNGestureHandlerModule requires main queue setup since it overrides `constantsToExport` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.

Module RNGestureHandlerModule requires main queue setup since it overrides constantsToExport but doesn't implement requiresMainQueueSetup. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.

---

"react-native": "^0.51.0",
"react-native-gesture-handler": "^1.0.0-alpha.35",