Migrate react-native-gesture handler to version ^2

[gax97]

Feature Request

There is a new version of react-native-gesture-handler with new API.

Why it is needed

There are warnings in the console:

 WARN  [react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system! 

Possible implementation

Add react-native-gesture-handler version ^2 and replace old API with new API

Code sample

/

[tradebulls]

Even we are facing the same issues in our project. We are currently using "react-native-gesture-handler": "2.4.1" and it requires a piece of code to be commented in MainActivity. When removed, the backdrop press doesn't work in Android Bottom Sheet, works fine in IOS. Any help? @gorhom

[npjoge]

We are also facing same issue, works fine in iOS but issue with Android. Any help?

[arish-panjwani]

I am also facing the same issue...Any solutions yet?

[gorhom]

it is a warning not an issue. I got no plan to upgrade to GH2 for now.

[tradebulls]

Agreed its a warning, however as per RNGesture Handler Version 2, they have deprecated RNGestureHandlerEnabledRootView.
Source Link - https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot/

Also, if you remove the piece of code from MainActivity, the backdrop of bottom sheet in Android is not clickable and the swipe gestures doesn't work as well.

[hirbod]

Just wrap you App with GestureHandlerRootView. I don't have any issues with the background.

[arish-panjwani]

@gorhom I am also facing the exact same issue as @tradebulls. I have tried @hirbod's solution but that didn't work.

[Gfr1992]

After adding @gorhom/bottom-sheet and migrating to react-native-gesture 2.4.2 I have this error in android. DO you have any idea?

e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (5, 22): Unresolved reference: reanimated
e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (8, 35): Unresolved reference: ReanimatedModule
e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (12, 56): Not enough information to infer type variable T
e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (12, 72): Unresolved reference: ReanimatedModule
e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt: (14, 22): Unresolved reference: common
e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt: (25, 47): Unresolved reference: GestureHandlerStateManager
e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt: (410, 3): 'setGestureHandlerState' overrides nothing

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-gesture-handler:compileDebugKotlin'.

[tradebulls]

@hirbod Can you share some code snippet to help me?

[Gfr1992]

After adding @gorhom/bottom-sheet and migrating to react-native-gesture 2.4.2 I have this error in android. DO you have any idea?

e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (5, 22): Unresolved reference: reanimated e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (8, 35): Unresolved reference: ReanimatedModule e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (12, 56): Not enough information to infer type variable T e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (12, 72): Unresolved reference: ReanimatedModule e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt: (14, 22): Unresolved reference: common e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt: (25, 47): Unresolved reference: GestureHandlerStateManager e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt: (410, 3): 'setGestureHandlerState' overrides nothing

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-gesture-handler:compileDebugKotlin'.

Solved. I noticed in package.json that the devDependency for react-native-gesture-handler is 1.10.3, so I downgrade to that version.

[jspizziri]

@gorhom react-native-gesture-handler@v1.x hasn't been maintained for over a year. Moreover with newer versions of react-native I'm not 100% sure it's going to work. I haven't tested this, but I think the modifications to the MainActivity.java are incompatible with the newest RN version, and I think it's actually the reason for the migration off of RNGestureHandlerEnabledRootView . that was mentioned earlier.

I did some investigation and it looks like the breaking changes between 1.10.3 and the latest version only occurred in 2 releases:

• v2.0.0
• v2.3.2

Are you open to a contribution for v2 support?

[jspizziri]

@tradebulls this might be helpful for you, it's what @hirbod was getting at. Take a look at how react-navigation does it.

[hpelitebook745G2]

@Gfr1992 Did you mean you downgraded from react-native-gesture-handler: 2.4.2 to react-native-gesture-handler: 1.10.3 to fix that error?

[tradebulls]

Managed to fix the issue with @hirbod @jspizziri solution. I was wrapping GestureHandlerRootView in App.js. Tried adding it in index.js and it worked. Thanks guys for your help :)

[Gfr1992]

@Gfr1992 Did you mean you downgraded from react-native-gesture-handler: 2.4.2 to react-native-gesture-handler: 1.10.3 to fix that error?

Yes

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[harveyconnor]

Is there a solution for this? We are getting crashes in production and it appears to be because we have multiple libraries that depend on different versions of gesture-handler.

Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: TypeError: this.InnerNativeModule.configureProps is not a function. (In 'this.InnerNativeModule.configureProps(n,t)', 'this.InnerNativeModule.configureProps' is undefined)', reason: 'Unhandled JS Exception: TypeError: this.InnerNativeModule.configureProps is not a function. (In 'this.InnerNativeModule.configureProps(n,t)', 'this.InnerNativeModule.configure..., stack:

[matthiasthomas]

Thank you @hirbod ! Your fix worked for me as well.

@tradebulls - Here's an excerpt from our app/index

const App = () => {
  const isLoadingComplete = useAppReadyToStart();

  if (!isLoadingComplete) return null;

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ErrorBoundary>
        <QueryClientProvider client={queryClient}>
          <Provider store={store}>
            <ReduxNetworkProvider
              pingInterval={30000}
              pingServerUrl={`${config.API_HOST}/health/ping`}
            >
              <PersistGate loading={null} persistor={persistor}>
                <Main />
              </PersistGate>
            </ReduxNetworkProvider>
          </Provider>
        </QueryClientProvider>
      </ErrorBoundary>
    </GestureHandlerRootView>
  );
};

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[gorhom]

hi everyone, would you mind testing #1126, and report your findings :)

yarn add ssh://git@github.com:gorhom/react-native-bottom-sheet#feature/rewrite-gesture-handler-2

[eithe]

Not sure if I should put this comment here or in #1125, but for other reasons we had to upgrade to gesture handler 2.x, and have been testing this on Android and iOS since December with much success.

We only have a somewhat simple BottomSheet, but it's used many places throughout the app, and it has scrolling views, left/right swipes for more content, dynamic snap points, and everything just works as expected.

With the positive test results we are going to production this week with your v5 branch.

If there is one wish I would have liked if you released an alpha version to npm of v5 so we could use that in our package.json instead of the github url, but no big deal :) Keep it up!

[edritech93]

add kotlinVersion = '1.7.21' to gradle

After adding @gorhom/bottom-sheet and migrating to react-native-gesture 2.4.2 I have this error in android. DO you have any idea?

e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (5, 22): Unresolved reference: reanimated e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (8, 35): Unresolved reference: ReanimatedModule e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (12, 56): Not enough information to infer type variable T e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (12, 72): Unresolved reference: ReanimatedModule e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt: (14, 22): Unresolved reference: common e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt: (25, 47): Unresolved reference: GestureHandlerStateManager e: /Users/user_name/Projects/project_name/frontend/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt: (410, 3): 'setGestureHandlerState' overrides nothing

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-gesture-handler:compileDebugKotlin'.

[hungnd6282]

same me