`findHostInstance_DEPRECATED is deprecated` and `findNodeHandle is deprecated` errors when using `Animated.View` inside `react-native-gesture-handler`'s `GestureDetector`

[winghouchan]

Description

When React's Strict Mode is enabled and an Animated.View is inside a GestureDetector the following errors are thrown:

ERROR  Warning: findHostInstance_DEPRECATED is deprecated in StrictMode. findHostInstance_DEPRECATED
       was passed an instance of AnimatedComponent(Wrap) which is inside StrictMode. Instead, add a
       ref directly to the element you want to reference. Learn more about using refs safely here:
       https://react.dev/link/strict-mode-find-node

ERROR  Warning: findNodeHandle is deprecated in StrictMode. findNodeHandle was passed an instance of
       Wrap which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
       Learn more about using refs safely here: https://react.dev/link/strict-mode-find-node

Steps to reproduce

Using the reproduction repository

1. Clone the reproduction repository.
2. Install dependencies (yarn install).
3. Run app (yarn ios).

The errors will be reported in the console and LogBox.

Self-reproduction

1. Enable React's Strict Mode.

2. Place an Animated.View inside a GestureDetector. For example:

   <GestureDetector gesture={gesture}>
     <Animated.View />
   </GestureDetector>
   

Snack or a link to a repository

https://github.com/winghouchan/react-native-reanimated-find-x-apis-deprecated-mcve

Reanimated version

3.16.7

React Native version

0.76.7

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo Go

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Steps to reproduce section.

[winghouchan]

The Steps to reproduce section is already complete.

[winghouchan]

#6754 reports a similar problem. The errors are the same but the root cause is different. It was likely resolved by #6736.

[winghouchan]

This might be a duplicate of #3573.

[LeandroRibeiroo]

Is there any solution for this warning? Same problem here.

[dominikwozniak]

Hey @winghouchan @LeandroRibeiroo , did you find a workaround? Looks like my app with @gorhom/bottom-sheet has stopped working properly

[MoeMamdouh]

Any updates in this error?

[MoeMamdouh]

[winghouchan]

@dominikwozniak: regarding the bottom sheet, see if the issue in their repo linked above has anything that helps. I don't believe this issue causes an issue in bottom sheet (they are separate issues).

[dominikwozniak]

@winghouchan thanks! I did a react-native downgrade to 0.76 as a workaround

[0rtbo]

same issue here on react native 77.2

[lookis]

+1 any plan for this issue?

[gabimoncha]

I think this issue comes from react-native-gesture-handler's GestureDetector

I'm getting this error on react-native primitives like Pressable or View too cc @j-piasecki

[patrycjakalinska]

hi, this is a duplicate indeed, I'll close the other issue as this is more recent. Feel free checkout out the duplicated issue for more context (#3573) - there's a good remark that as far we know this is the only possible way of getting native view reference from a React ref. So this happens not only because of gesture-handler. It is on our to-do list, and we'll look into that in the future.

[pawicao]

just FYI the same error seems to be happening in the example app from the Reanimated's repo (after choosing the Screen Transition example). I've run into it with the fabric-example