React-native-gesture-handler: CRASH with Swipeable when setting state on componentDidMount

[henrikra]

Argument 1 (NSNumber) of RNGestureHandlerModule.attachGestureHandler must not be null

Gesture handler version: 1.0.1

I made a simple reproduction repo of the problem here: https://github.com/henrikra/gesture-handler-crash/blob/master/App.js

Steps to reproduce:

1. Use Swipeable somewhere in your component
2. Use setState in componentDidMount
3. See crash! 💥

Workaround: Add setTimeout with 0 delay and it will not crash. But this is very flake workaround and should not be used

I hope this gets fixed soon since this is very critical bug :/

[osdnk]

@henrikra
Great thanks for this issue and hope my solution will fix this problem as it will be merged

[osdnk]

@henrikra
Should be workable

[henrikra]

Please close the issue when the OP has confirmed that the fix works 👍

Because the fix fixes only iOS 🔴 On Android I am getting this error now with the same repo as above

So can you reopen the issue? :)

[henrikra]

Ping also @kmagiera

[kmagiera]

Thanks a ton @henrikra for reporting and providing an excellent repro scenario with a full project on Github. That was really helpful. I hope for this issue to be finally resolved. Just published hotfil release 1.0.4. that includes my fix from #202

[henrikra]

Feels like it is working now! I report if I find something else 🎉

[adrienthiery]

Hi there,

I encountered that error using a custom component as a child to PanGestureHandler that was using View but without passing the nativeProps down.

<PanGestureHandler
    {...this.props}
    onGestureEvent={this._onGestureEvent}
    onHandlerStateChange={this._onHandlerStateChange}
    id="dragbox"
>
    <MyComponent>...</MyComponent>
</PanGestureHandler>

Adding :

class MyComponent extends Component {
+    setNativeProps(props: Object) {
+        this.ref.setNativeProps(props);
+    }

+    getRef = (ref: View) => {
+        this.ref = ref;
+    };

    render() {
        return (
            <View
                {...this.props}
+                ref={this.getRef}
                style={[styles.view, this.props.style]}
            >
                ...
            </View>
        );
    }
}

to my component fixed it.

Hopefully it can help other devs looking at that issue to figure out what their problem is 🙂

[dominiczaq]

I've encountered the same problem when wrapping custom component with NativeViewGestureHandler. When using function components, just use React.forwardRef and pass the ref to native component. I.e:

Parent.jsx:

    <NativeViewGestureHandler ref={listRef} simultaneousHandlers={drawerRef}>
        <ProjectList />
    </NativeViewGestureHandler>

ProjectList.jsx

export const ProjectList = React.forwardRef((props, ref) => {
...

return (
        <FlatList
            ref={ref}
        />
    );
});

[waheedakhtar694]

Still getting the same error