ios typescript react-native react-navigation react-native-gesture-handler

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

I'm creating a project to learn React Native. I'm using typescript on this project. I added react-navigation : To make react-navigation working, I had to do :

yarn add @react-navigation/native
yarn add @react-navigation/stack
yarn add react-native-screens react-native-safe-area-context
yarn add react-native-reanimated react-native-gesture-handler

Unfortunately, I have this warning on my yarn start :

 WARN  RCTBridge required dispatch_sync to load RNGestureHandlerModule. This may lead to deadlocks
 LOG  Running "TddReactNative" with {"rootTag":11,"initialProps":{}}
 WARN  [react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system! 
PanGestureHandler@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:137194:38
PanGestureHandler@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:136501:34
RCTView
View
AnimatedComponent@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:68816:38
AnimatedComponentWrapper
RCTView
View
Card@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:135767:36
CardContainer@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:135324:34
RNSScreen
AnimatedComponent@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:68816:38
AnimatedComponentWrapper
MaybeFreeze@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:161553:23
Screen@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:161620:36
MaybeScreen@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:161373:24
RNSScreenContainer
ScreenContainer@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:161753:31
MaybeScreenContainer@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:161344:23
RCTView
View
Background@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:123808:21
CardStack@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:133002:36
RNCSafeAreaProvider
SafeAreaProvider@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:131859:24
SafeAreaProviderCompat@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:132694:24
RCTView
View
GestureHandlerRootView
StackView@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:122717:36
StackNavigator@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:122563:32
EnsureSingleNavigator@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:124954:24
BaseNavigationContainer@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:124463:28
ThemeProvider@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:130618:21
NavigationContainerInner@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:130478:26
AppNavigator
RCTView
View
RCTView
View
AppContainer@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:76309:36
TddReactNative(RootComponent)@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:83059:28

I tried to remove pods and reinstall them with :

cd ios
rm -rf Pods/
pod install

After that, I relaunched the yarn start and the app with XCode.

Here is my versions of react-navigations and other dependencies :

"dependencies": {
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "@types/styled-components": "^5.1.20",
    "moment": "^2.29.1",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-gesture-handler": "^2.2.0",
    "react-native-get-location": "^2.2.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^2.3.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.2",
    "styled-components": "^5.3.3"
  },

I'm testing the app on an Iphone 13. It's only a warning, but does someone know why this warning appears and how to remove it ?

Solution

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!",
]);

GitHub thread about this topic

UPDATE

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