search

software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
5.85k stars 954 forks source link

V2.2.0 New Warning: [react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system! #1831

Closed erez-unitronics closed 2 years ago

erez-unitronics commented 2 years ago

Hello,

I've been upgraded the library to the new version: 2.2.0 And now I've got this warning: "[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!"

Should I do something? Thanks!

andybui090 commented 2 years ago

The same

OtayNacef commented 2 years ago

The same

parmarravi commented 2 years ago

Same !! any fix

Kesmek commented 2 years ago

This was mentioned in #1817 when it was added. If you are certain that you are no longer using the old API, then it likely due to one of the libraries you use that is giving you this warning. If that's the case there is nothing for you to do but let the library maintainers know and wait for them to update their libraries. #1817 also gives a work around to ignore the warning, I'll paste it here for convenience.

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!",
]);
GuillermoSM5 commented 2 years ago

The same warning

michaelypes commented 2 years ago

For me it was the react navigation library. I upgraded from 5 to 6 but hadn't got round to updating the stacks. If you upgrade to the new stack library it should remove the warning. Tested this on Android and worked for me.

@react-navigation/stack => @react-navigation/native-stack

Also the native stack is supposedly more performant.

https://reactnavigation.org/docs/native-stack-navigator

jensonjohn001 commented 2 years ago

facing the same issue, any fix?

Shamia-Medcon commented 2 years ago

The same warning for me too, any fix?

Die-goG commented 2 years ago

I have the same warning .. any fix .?

Die-goG commented 2 years ago

I fixed the problem; I installed the version 1.10.3 instead of 2.2.0.

GustavoGomesRibeiro commented 2 years ago

@erez-unitronics Try update to lastest version: yarn add react-native-gesture-handler@2.1.1

I fixed the problem with update.

Sepudev commented 2 years ago

@erez-unitronics Try update to lastest version: yarn add react-native-gesture-handler@2.1.1

I fixed the problem with update.

This solution worked perfectly for me, and fixes the warning, thank you!

cmoztas commented 2 years ago

For me it was the react navigation library. I upgraded from 5 to 6 but hadn't got round to updating the stacks. If you upgrade to the new stack library it should remove the warning. Tested this on Android and worked for me.

@react-navigation/stack => @react-navigation/native-stack

Also the native stack is supposedly more performant.

https://reactnavigation.org/docs/native-stack-navigator

@michaelypes Thanks. I got the same issue and it's fixed after install native-stack package.

hirbod commented 2 years ago

Guys, this is not a bug that has to be fixed. Its a simple warning/ notification https://github.com/software-mansion/react-native-gesture-handler/pull/1817

You can easily suppress it. RNGH is still backwards compatible

erez-unitronics commented 2 years ago

@erez-unitronics Try update to lastest version: yarn add react-native-gesture-handler@2.1.1

I fixed the problem with update.

@GustavoGomesRibeiro Thanks, but I started to get this warning after I updated react-native-gesture-handler from 2.1.1 to 2.2.0. I guess its just a simple warning like @Hirbod said

iskanderAB commented 2 years ago

just use this version : 2.1.1 ( yarn add react-native-gesture-handler@2.1.1 )

michaelypes commented 2 years ago

If you are trying to upgrade all the libraries in your app the warning is actually helpful in working out what components have been updated to use the new gesture handler.

dezudas commented 2 years ago

@GustavoGomesRibeiro Thanks, but I started to get this warning after I updated react-native-gesture-handler from 2.1.1 to 2.2.0. I guess its just a simple warning like @Hirbod said

I am getting to the warning too

armata007 commented 2 years ago

It shows for me when using Swipeable component (if I remove it the warning does not show). Is there any new api for Swipeable component we can use?

cristianoccazinsp commented 2 years ago

For me it comes from react-native-screens (or navigation) using PanGestureHandler.

cm-nutrien commented 2 years ago

We use an internal testing package that my team doesn't control. It will fail our tests if there are usages of console.warn or console.error and since I can't change the version of this library that we use I'm left with failing tests without a way to intercept the message to block it.

The PR where this was implemented said it was supposed to be a console.info but it was implemented as a console.warn. Was that deliberate? Can it be changed to console.info? Better yet, can it be removed entirely?

cristianoccazinsp commented 2 years ago

I agree, remove the log completely and make a deprecation notice somewhere.

Jamal-Nazzal commented 2 years ago

What I would like to know is how to use the new Gestures system, if I'm using the old API I want to know it. I'm using the panGestureHandler component which is triggering the warning. Is panGestureHandler deprecated or something?

Kesmek commented 2 years ago

What I would like to know is how to use the new Gestures system, if I'm using the old API I want to know it. I'm using the panGestureHandler component which is triggering the warning. Is panGestureHandler deprecated or something?

As far as I know, it's not deprecated (yet), but it is suggested to use the new API as I assume that is the one that will receive the most development time. From what I understand the log was meant to improve discoverability of the new API since people may not know it exists but I think having a log is a somewhat crude way of accomplishing that, especially since it's currently out of many people's hands due to other libraries using the old API right now. Perhaps having a short section in the README with links to the documentation could accomplish the same goal?

@cm-nutrien You raise a good point: it was supposed to be a console.info and not a warning. I suggest you make a pull request or a new issue to bring it up to the RNGH team.

In case anyone missed it, I explained how to suppress the issue above.

caglartufan commented 2 years ago

As mentioned in the official Stack Navigator documents, you should also install the react-native-gesture-handler module. To install this module:

  1. If you are using Expo development tool, use this command: expo install react-native-gesture-handler
  2. If you are using bare React Native then use this command: npm install react-native-gesture-handler

Hope this helps.

pilotpirxie commented 2 years ago

I've got the same warning. Tried 2.1.0, 2.1.1 and 2.2.0 with reinstalling all deps, Pods and Podfile.lock. Nothing helped.

Every day in React Native ecosystem is like an adventure. You never know what will happen tomorrow. Deprecation warning without info on how to fix the issue? You got it. Facebook (creators of RN) removing official SDK for login to Facebook? Why not. Auto-linking feature in most of the libs, where you still need to manually dig into native swift/java files to make it run? Of course.

billnbell commented 2 years ago

As mentioned in the official Stack Navigator documents, you should also install the react-native-gesture-handler module. To install this module:

  1. If you are using Expo development tool, use this command: expo install react-native-gesture-handler
  2. If you are using bare React Native then use this command: npm install react-native-gesture-handler

Hope this helps.

It does not help. I have no dependencies, and v2.2.0 says this stupid message.

michaelypes commented 2 years ago

I don't think stack navigator uses the new api. I have a lot of modules in my app that use the stack navigator and i get the error every time it renders a module using the normal stack - "@react-navigation/native-stack": "^6.2.5".

If i change to the native-stack navigator then the error goes away. I am assuming that is because it is using the new gesture handler. Unfortunately i can't use that navigator as I need to wrap my navigators in the context api. So i have 2 questions:

1) Is the normal stack navigator (."@react-navigation/native-stack": "^6.2.5" ) using the new gesture handler and if not anyone know when. 2) Is there a way to wrap context around multiple native navigators. I use a custom navigator using the old stack navigator with a StackView but i dont think this is available in the native-stack.

Raman-3r commented 2 years ago

i also face this issue when i use "@react-navigation/native": "^5.9.8", "@react-navigation/stack": "^5.14.9", "react": "17.0.2", "react-native": "0.66.4", "react-native-gesture-handler": "^2.2.0",

when i try to downgrade gesture-handler it also show an error please anyone tell me how to fix it ?

lucaspedronet commented 2 years ago

@GustavoGomesRibeiro atualizei a lib para versão menciona, funcionou perfeitamente. Obrigado!

naishe commented 2 years ago 
    "@gorhom/bottom-sheet": "^4.1.5",
    "react": "17.0.2",
    "react-native": "0.66.3",
    "react-native-gesture-handler": "^2.2.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^2.3.1",

I am facing this issue, even though I have updated all the libraries that indirectly depend on reanimated.

Kesmek commented 2 years ago 
    "@gorhom/bottom-sheet": "^4.1.5",
    "react": "17.0.2",
    "react-native": "0.66.3",
    "react-native-gesture-handler": "^2.2.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^2.3.1",

I am facing this issue, even though I have updated all the libraries that indirectly depend on reanimated.

@gorhom/bottom-sheet Still uses the old API, make sure to notify the library maintainer of the new API.

Also just in case you weren't aware, this warning originates from react-native-gesture-handler so you should check for libraries that depend on that and not necessarily react-native-reanimated even though they are often used together.

kodeandoec commented 2 years ago

The problem specific is with @react-navigation/stack, install and use @react-navigation/native-stack and solve the issue...!

billnbell commented 2 years ago

The problem specific is with @react-navigation/stack, install and use @react-navigation/native-stack and solve the issue...!

Not sure that is a real solution. We need a fix for @react-navigation/stack

giladgray commented 2 years ago

this error message is a poor developer experience because it's not useful and rarely actionable by the person who sees it. ideally, if you must warn about this at all, there would be a link in the message to docs for how to migrate to the new API, like React's warnings with stable links to docs. also, ideally i could turn off such warnings without having to LogBox-ignore it (which only works until the text is changed).

the simplest solution would be to remove this unhelpful warning entirely: avoid inflicting any headaches on your community. instead, eventually, when you decide to remove support for this old API, you can add a stronger message to encourage migration (along with links to docs and a major version bump).

michaelypes commented 2 years ago

So it is definitely the original stack navigator which is causing the issue. Updating to the native stack is not an option as it does not support everything that the original stack does. I am assuming that this might be why it cannot or is not updated.

See quote from react navigation: https://reactnavigation.org/docs/native-stack-navigator/

"One thing to keep in mind is that while @react-navigation/native-stack offers native performance and exposes native features such as large title on iOS etc., it may not be as customizable as @react-navigation/stack depending on your needs. So if you need more customization than what's possible in this navigator, consider using @react-navigation/stack instead - which is a more customizable JavaScript based implementation."

BadrBelhiti commented 2 years ago

I had this problem, because my IDE was auto-importing FlatList and TextInput from react-native-gesture-handler as opposed to react-native.

UVStudio commented 2 years ago

For me it was the react navigation library. I upgraded from 5 to 6 but hadn't got round to updating the stacks. If you upgrade to the new stack library it should remove the warning. Tested this on Android and worked for me.

@react-navigation/stack => @react-navigation/native-stack

Also the native stack is supposedly more performant.

https://reactnavigation.org/docs/native-stack-navigator

You might've just fixed a bug that I have been working on for the last 3 full days straight. Thank you sir!

billnbell commented 2 years ago

For me it was the react navigation library. I upgraded from 5 to 6 but hadn't got round to updating the stacks. If you upgrade to the new stack library it should remove the warning. Tested this on Android and worked for me. @react-navigation/stack => @react-navigation/native-stack Also the native stack is supposedly more performant. https://reactnavigation.org/docs/native-stack-navigator

You might've just fixed a bug that I have been working on for the last 3 full days straight. Thank you sir!

The native stack is "not an upgrade" it is different.

So I guess we narrowed it down to @react-navigation/stack

kodeandoec commented 2 years ago

Just install react-native-gesture-handler": "2.1.1, use this version and solve issue

billnbell commented 2 years ago

Can someone apply what works on 2.1.1 to 2.2.1?

mostafijur-rahman299 commented 2 years ago

@erez-unitronics Try update to lastest version: yarn add react-native-gesture-handler@2.1.1

I fixed the problem with update.

This solution worked perfectly

Omelyan commented 2 years ago

This warning is showing me when I use TouchableOpacity imported from 'react-native-gesture-handler'.

featlast commented 2 years ago

Hola. Saludos.. solucione con esto npm i react-native-gesture-handler@2.1.1

alpha0010 commented 2 years ago

This warning is showing me when I use TouchableOpacity imported from 'react-native-gesture-handler'.

Looks like this may be the case for all components provided by RNGH. I am getting it from BorderlessButton, Swipeable, ScrollView, and others.

Not sure if they have an intended alternative.

billnbell commented 2 years ago

Yes same here.

Srh07 commented 2 years ago

I'm getting this warning for using @react-navigation/stack (latest). I don't use any components provided by RNGH. Any ideas on how to solve this?

anwarhamr commented 2 years ago

For me it was the react navigation library. I upgraded from 5 to 6 but hadn't got round to updating the stacks. If you upgrade to the new stack library it should remove the warning. Tested this on Android and worked for me.

@react-navigation/stack => @react-navigation/native-stack

Also the native stack is supposedly more performant.

https://reactnavigation.org/docs/native-stack-navigator

I'm getting the above message. We are using stack-navigator and it is the current version specified in this 'fix' so it does not work for us. Anyone else figure it out? We don't want to turn off any notification using LogBox.
Here is out usage

  <TouchableOpacity
                    style={{alignItems: 'center'}}
                    onPress={() => setShowDiagnostics(!showDiagnostics)}>
                    <Typography style={{color: colors.white}} fontSize={35}>
                        {p.isActive ? 'SESSION IS ACTIVE AND RECORDING' : 'Verify Session'}
                    </Typography>

                    {p.isActive && (
                        <Typography style={{color: colors.white}} fontSize={25}>
                            CONTACT NEUROLOGY TO REVIEW EEG
                        </Typography>
                    )}
                </TouchableOpacity>

Here is my error message

 * [react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!
NativeViewGestureHandler@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.epitel.remi_tablet&modulesOnly=false&runModule=true:110803:38
ComponentWrapper@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.epitel.remi_tablet&modulesOnly=false&runModule=true:110612:44
BaseButton@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.epitel.remi_tablet&modulesOnly=false&runModule=true:110389:36
GenericTouchable@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.epitel.remi_tablet&modulesOnly=false&runModule=true:114769:36
TouchableOpacity@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.epitel.remi_tablet&modulesOnly=false&runModule=true:115081:36
RCTView
michelazzam commented 2 years ago

@erez-unitronics Try update to lastest version: yarn add react-native-gesture-handler@2.1.1

I fixed the problem with update.

To anyone who tried this version and didn't solve the warning, try removing '^' before 2.1.1 in package.json and reinstall your packages

konyilwin commented 2 years ago

For me, I try expo install react-native-gesture-handler instead of yarn, npm. The warning is gone.