Upgraded to React Native 0.62.0 Getting Warning Sign - "Calling `getNode()` on the ref of Animated component is no longer necessary

Viewed 11976

I just upgrade my react native app to 0.62.0, and now my app keeps getting this warning sign

ReactNativeFiberHostComponent: Calling `getNode()` on the ref of an Animated component 
is no longer necessary. You can now directly use the ref instead. 
This method will be removed in a future release.

I'm not sure why this issue is showing up? Can someone please explain?

I also see Stack

ref.getNode |
createAnimatedComponent.js:129:20

SafeView#_updateMeasurements | index.js:192:14

SafeView#componentDidUpdate | index.js:154:9

Update

I believe this might be coming from SafeAreaView from react-navigation

7 Answers

I also came to this warning after upgraded ro RN 0.62.1, and I didn't use getNode() at all, turns out it came from a depedencies that I use, called react-native-snap-carousel because they build it with FlatList and possibly using the getNode() as well.

And now there's an open issue about this in their GitHub repo that we can follow, here's the link to the issue

Update

this also came from package react-native-safe-area-view, possibly your app is using this package and now they have released new version to fix getNode() deprecation, see this PR

so instead of fixing the file directly yourself, you just need to update the package, simply run: npm i react-native-safe-area-view

Hope that's help :)

To quick fix this go to node_modules/react-native-safe-area-view => index.js

at line 192 change

this.view.getNode().measureInWindow((winX, winY, winWidth, winHeight)

to

this.view.measureInWindow((winX, winY, winWidth, winHeight)

If you are using react-native-snap-carousel you can fix it by modifying your node module locally.

first go to

 ./node_modules/react-native-snap-carousel/src/Carousel.js

change

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

into

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

and finally, change your _getWrappedRef function to

_getWrappedRef () {
 return this._carouselRef
}

This will stop the warning until we have an update on that package.

As seen in the blog post announcing the release of RN62, getNode() is now deprecated. You can just use ref without calling getNode(). See this commit.

the issue will happen when you use createAnimatedComponent for components while its already exist in animated library for example if we use it to FlatList this warning will be showing for fix it just call componenty directly

for more detail enter link description here

change

return this._carouselRef && this._carouselRef.getNode && this._carouselRef.getNode();

to

return this._carouselRef;

*Removing getNode() will fix it.

i find that error in my project. Fix: copy "getNode()" and find all in your project, delete it. Delete warning getNode()

Related