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

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 ([]).)

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. image

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

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 53
  • Comments: 45 (3 by maintainers)

Commits related to this issue

Most upvoted comments

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

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.

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

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.

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

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.

I can confirm that this warning has not been resolved

Hi, any updates on when this will be release ?

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.

Well now its been more than 10 months and problem still exists…

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.

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.
  1. 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 😃

I am looking for the release too 😃

still happening. 0.63.3 and react-native-snap-carousel 3.9.1

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 !

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

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

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

+1