React-native-snap-carousel: Warning : Calling 'getNode()' on the ref an Animated Component is no longer necessary.

[dilinade]

Is this a bug report, a feature request, or a question?

Question

Have you followed the required steps before opening a bug report?

(Check the step you've followed - put an x character between the square brackets ([]).)

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn't a React Native bug?

It is a warning regarding deprecation of the method getNode().

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

(Write your answer here and specify the iOS/Android versions on which you've been able to reproduce the issue.)

Is the bug reproductible in a production environment (not a debug one)?

Yes.

Environment

React native: 0.62.0
react-native-snap-carousel: 3.8.4

Target Platform:
Android (9.0)
iOS (13.3)

Expected Behavior

No warning should be raised. Upgrade is needed.

Actual Behavior

Raise of a warning.

Reproducible Demo

(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

Steps to Reproduce

[ahsan-khan1999]

having same issue react-native v 0.61 occurs implementing nested navigation.

[lumberman]

Same problem. Came here from https://stackoverflow.com/questions/60910385/upgraded-to-react-native-0-62-0-getting-warning-sign-calling-getnode-on-t

[dilinade]

@lumberman Give #673 a try :)

[anthony-elhaddad]

same problem but im using the 'react-native-image-slider-box' which is using the carousel.

[binar1]

i fixed ,in this way,
go to nodeModule -> react-native-snap-carousel -> src -> Carousel.js
modify

const AnimatedFlatList = FlatList ? Animated.createAnimatedComponent(FlatList) : null;
const AnimatedScrollView = Animated.Animated.createAnimatedComponent(ScrollView);

to
const AnimatedFlatList = FlatList ? Animated.FlatList : null;
const AnimatedScrollView = Animated.ScrollView;

after find function _getWrappedRef
modify like this
_getWrappedRef () {
// https://github.com/facebook/react-native/issues/10635
// https://stackoverflow.com/a/48786374/8412141
return this._carouselRef
}

then save it .
I Hope This can Help you

[anisharya16]

i fixed ,in this way,
go to nodeModule -> react-native-snap-carousel -> src -> Carousel.js
modify

const AnimatedFlatList = FlatList ? Animated.createAnimatedComponent(FlatList) : null;
const AnimatedScrollView = Animated.Animated.createAnimatedComponent(ScrollView);

to
const AnimatedFlatList = FlatList ? Animated.FlatList : null;
const AnimatedScrollView = Animated.ScrollView;

after find function _getWrappedRef
modify like this
_getWrappedRef () {
// facebook/react-native#10635
// https://stackoverflow.com/a/48786374/8412141
return this._carouselRef
}

then save it .
I Hope This can Help you

Thankyou so much, It helped.

[akhan118]

Hi, any updates on when this will be release ?

[ltcaosj]

I am looking for the release too :)

[keiscool2468]

waiting for the release

[Yashah301]

waiting for release too

[fdelavra]

waiting for release too ;)

[heesienooi]

+1 waiting for the release

[cecodor]

waiting for release too!

[bpdarlyn]

waiting for release too!

[xAgustin93]

¿Cuando se arreglara ese problema en el repositorio?

[didikk]

I am looking for the release too

[tinchev]

+1

[tinmar33]

+1

[diegovfeder]

Would love to see this 'acclaimed' release

[AJV2018]

Waiting....

[harmandeepsingh]

Yes waiting...

[philipeneves]

Waiting

[loverdeveloper]

Yes waiting...

[renishg]

Waiting for this release too

[ghasemikasra39]

waiting

[riamon-v]

waiting too..

[gegham-khachatryan]

waiting

[chahinaghrim]

waiting ..

[hussainhspl]

waiting

[ovy9086]

I don't know how all you guys commenting "waiting" here think this will solve the problem. maybe stop polluting the thread with useless comments, and a 👍 should be enough.
I think it's clear enough until now that a lot of people are 'waiting' for this fix.

[pratyaksh123]

Why the PR is not merged yet? It is really annoying working with those warnings

[MrLoh]

Probably because it is really complicated to detect the RN package Version the right way.

[BhullarGagan]

i fixed ,in this way,
go to nodeModule -> react-native-snap-carousel -> src -> Carousel.js
modify

const AnimatedFlatList = FlatList ? Animated.createAnimatedComponent(FlatList) : null;
const AnimatedScrollView = Animated.Animated.createAnimatedComponent(ScrollView);

to
const AnimatedFlatList = FlatList ? Animated.FlatList : null;
const AnimatedScrollView = Animated.ScrollView;

after find function _getWrappedRef
modify like this
_getWrappedRef () {
// facebook/react-native#10635
// https://stackoverflow.com/a/48786374/8412141
return this._carouselRef
}

then save it .
I Hope This can Help you

Thanks, This is also working with react-native-image-slider-box.... Thanks for help

[MrLoh]

Chill out and wait a little guys. It’s been 10 days not 10 months since the PR was filed and theres an ongoing discussion about the implementation. Either contribute or be patient. Open source doesn’t work by stressing contributors out but by contributing and being grateful for the contributions of others.

[bd-arc]

Well, the main issue is that the suggested implementation is not backward compatible, meaning the plugin will break on every version of React Native but 0.62+.

This is a no-go for us, so unless someone comes up with a backward-compatible solution, we just can't merge this. (Take a look at #673 if you want to follow the discussion.)

Basically, what we need is a surefire way to identify whether getNode() needs to be called or not.

What we've tried so far:

1. Detecting RN's version by checking the project's package.json file

   • ✅ Solves the issue.
   • ❌ Breaks the plugin when used with Expo.
   • ❌ Seems hacky at best.

2. Checking for setNativeProps

   • ❌ Not reliable and breaks the plugin on everything but RN 0.62.

Running out of ideas here, so if you have a reliable solution, don't be shy and share it with us :-)

[bd-arc]

Ok, looks like this is going to be fixed pretty soon!

[bd-arc]

Fixed in versions 3.9.1 and 4.0.0-beta.4 with backward-compatible code.

[HarshitMadhav]

Hi! I reached out this thread when I faced this 'getNode()' warning and I was using v3.9.0 and when I upgraded to v3.9.1 it still shows the 'getNode()' warning.

    _getWrappedRef () {
        if (this._carouselRef && (
            (this._needsScrollView() && this._carouselRef.scrollTo) ||
            (!this._needsScrollView() && this._carouselRef.scrollToOffset)
        )) {
            return this._carouselRef;
        }
        // https://github.com/facebook/react-native/issues/10635
        // https://stackoverflow.com/a/48786374/8412141
        return this._carouselRef && this._carouselRef.getNode && this._carouselRef.getNode();
    }

I am running on react-native v 0.62.2

[HarshitMadhav]

In updated version I changed this

const AnimatedFlatList = FlatList ? Animated.createAnimatedComponent(FlatList) : null;
const AnimatedScrollView = Animated.Animated.createAnimatedComponent(ScrollView);

to this:

const AnimatedFlatList = FlatList ? Animated.FlatList : null;
const AnimatedScrollView = Animated.ScrollView;

as mentioned by @binar1 above

I think any how this change did not get pushed into the update.

[AleksandrChyzhkov]

In the 3.9.1 release, the error did not disappear, so I used the @HarshitMadhav advice and with the help of patch-package fixed the problem so as not to wait for a new release. Thanks @HarshitMadhav !

[mikebertiean]

I can confirm that this warning has not been resolved