React Native: react-native-gesture-handler: seems like using an old api after yarn

Question

I reinstalled all my node_modules in my react-native project using yarn (Delete node_modules and run yarn). After it finished I've started my app and there heappens to pop up this warning:

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

And then it lists a lot of react-native elements (I think) like this:

PanGestureHandler@http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:133321:38
PanGestureHandler@http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:132628:34
RCTView
View
AnimatedComponent@http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:68721:38
AnimatedComponentWrapper
RCTView
View
Card@http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:131894:36
CardContainer@http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:131451:34
RNSScreen

And so on....

I tried reinstalling react-native-gesture-handler (yarn romove react-native-gesture-handler and yarn add react-native-gesture-handler), but that didn't change anything.

Answer 1

The new version, of react-native-gesture-handler send warning if you use an old API version, but also if one of your package/library use it.

To disable the warning, you can ignore logs.

in your app.js / app.tsx

import { LogBox } from 'react-native';

LogBox.ignoreLogs([
  "[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
]);

Here you have the explanation

Answer 2

This error is ridiculous :D force the 2.1.1 version. and you won't see that annoying error again:

"react-native-gesture-handler": "2.1.1",

Answer 3

it may causes by react-navigation package if so use @react-navigation/native-stack instead of @react-navigation/stack from this link

Answer 4

This way worked for me. Install

npm i [email protected]

or install the version based on what expo has mentioned when starting the server (for eg : expected version is 2.1.1)

then close the server and open again by resetting cache

expo r -c

Answer 5

I also have the same problem. I kept getting this warning!. The solution provided below helps ignore the warning, but is not a root solution. and it may make your app bigger in size. Any other solutions

import { LogBox } from 'react-native;
   LogBox.ignoreLogs([
  "[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
]);```

Answer 6

Solution 1:

Actually, the warning is shows if you updated the react-native-gesture-handler to the latest version. You can ignore the warning by adding the following code.

import { LogBox } from 'react-native';

LogBox.ignoreLogs([
  "[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
]);

Solution 2:

You can downgrade the react-native-gesture-handler to the old version using the following command. It will fix the error.

yarn add [email protected]

Answer 7

React native CLI

just use this version

npm i [email protected]

package.json

"react-native": "0.66.1",

"react-native-reanimated": "^2.4.1",

"@react-navigation/native": "^6.0.6",

"@react-navigation/native-stack": "^6.2.5",