5

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.

JaRoMaster
  • 428
  • 1
  • 3
  • 26
  • First, delete your `yarn.lock` file, then try `yarn add react-native-gesture-handler@latest`. See what that gets you. – Mike S. Jan 18 '22 at 15:32
  • @MikeS. I thought deleting my yarn.lock will break my project? – JaRoMaster Jan 18 '22 at 16:19
  • I think thats going to make impossible to run yarn install to install the dependencies, right? – JaRoMaster Jan 18 '22 at 16:31
  • The yarn.lock should be regenerated after reinstalling all your packages. – Aleksandar Zoric Jan 18 '22 at 17:44
  • @AleksandarZoric Do I have to reinstall all the packages manually? – JaRoMaster Jan 18 '22 at 18:21
  • Run yarn install, or just yarn. Or NPM install or just NPM i, this will install all packages for you. Yarn.lock is a generated file that yarn uses to know what versions of each dependency are installed so it can get those exact versions again when you run yarn install on a new machine. The lock file is updated in its entirety on any change to dependencies, i.e. when you run a yarn command. – Aleksandar Zoric Jan 18 '22 at 18:27
  • When starting, my metro gives me the error: Error: ENOENT: no such file or directory, watch 'E:\Dokumente\GitHub\Project\node_modules\react-native-gesture-handler\android\build\kotlin\compileDebugKotlin\caches-jvm' In the terminal, where I ran yarn android, the react-native-gesture-handler: compile-debug-kotlin task tells me that some runtime jar-files haven't got the same version and a lot of constructors or other code is deprecated in Java – JaRoMaster Jan 18 '22 at 18:50
  • I'm also getting the "Deprecated in Java"-Warning on Task :react-native-screens:compileDebugKotlin and at the end of the build, I get the Warning "Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0. Use '--warning-mode all' to show the individual deprecation warnings. See https://docs.gradle.org/6.9/userguide/command_line_interface.html#sec:command_line_warnings" – JaRoMaster Jan 18 '22 at 18:56
  • `yarn.lock` is auto-generated after running `yarn`. It tells yarn which version of libraries listed in the `package.json` to install on subsequent installs. – Mike S. Jan 18 '22 at 19:04

7 Answers7

15

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

UPDATE

This is now fix since : react-native-gesture-handler": "2.1.1"

Anroche
  • 618
  • 1
  • 8
  • 19
  • Thanks for the awnser, but where should I add that code? – JaRoMaster Jan 19 '22 at 20:14
  • Put it in your app.js: ` import React from "react" import { GestureHandlerRootView } from "react-native-gesture-handler"; const App: () => Node = () => { LogBox.ignoreLogs([ "[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!", ]); return ( ); }; ` – Anroche Jan 20 '22 at 08:22
  • What do I need the GestureHandlerRootView for? – JaRoMaster Jan 20 '22 at 15:06
  • It's maybe, one of the package in your node modules need it. – Anroche Jan 20 '22 at 15:20
  • 1
    That's not a solution, it is only to hide the issue. With the same success it is possible to hide all warnings, that at some point can result in errors. – Max Apr 04 '22 at 10:26
  • i had set ignoreAllLog but still error – famfamfam Jun 10 '22 at 17:02
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",

doesntmatter
  • 21
  • 1
1

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

Ahmed Mesawer
  • 23
  • 4
1

This way worked for me. Install

npm i react-native-gesture-handler@2.1.1

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
sophin
  • 583
  • 5
  • 11
0

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!",
]);```
The Future
  • 3
  • 5
0

React native CLI

just use this version

npm i react-native-gesture-handler@2.1.1

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",
Deepak Singh
  • 749
  • 4
  • 16
0

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 react-native-gesture-handler@2.1.1
Raskul
  • 1,674
  • 10
  • 26