Reanimated 3 (RC 2): Creating Animated Components with createAnimatedComponent throws error in Strict Mode

[dmahajan980]

Description

I created an Animated variant of the Circle component in React Native SVG. While the code seems to work, it throws the following error in my console when run in React's Strict Mode:

Steps to reproduce

1. Install react-native-svg using the command:

   yarn add react-native-svg

2. Create an Animated variant of any SVG component (Circle in our case). Refer the snippet below:

   // App.tsx
   
   import { StrictMode } from 'react';
   import Animated from 'react-native-reanimated';
   import Svg, { Circle } from 'react-native-svg';
   
   const AnimatedCircle = Animated.createAnimatedComponent(Circle);
   
   const App = () => {
     return (
       <StrictMode>
         <Svg fill="none" height={190} width={190}>
           <AnimatedCircle
             cx={95}
             cy={95}
             r={80.5}
             stroke="#000"
             strokeWidth={3}
           />
         </Svg>
       </StrictMode>
     )
   }

Snack or a link to a repository

https://snack.expo.dev/@dmahajan98/reanimated-3-rc-2

Reanimated version

3.0.0-rc.2

React Native version

0.70.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Pixel 3A XL

Acknowledgements

Yes

[dmahajan980]

This discussion also points to the usage of findNodeHandle which is causing the above error: https://github.com/software-mansion/react-native-reanimated/discussions/3557

[tomekzaw]

Hey @dmahajan980, thanks for submitting this issue.

Indeed, findNodeHandle_DEPRECATED is deprecated. However, AFAIK this is the only possible way of getting a native view reference from a React ref, which we need to do. We will investigate this further.

[dmahajan980]

Hi @tomekzaw, thanks for the response! While the team finds a solution to this, is there any way we can suppress this error message without bailing out of Strict mode?

[tomekzaw]

is there any way we can suppress this error message without bailing out of Strict mode?

Hey, unfortunately I don't know answer to this question 😢

Related to #2911

[Peeeep]

is there any way we can suppress this error message without bailing out of Strict mode?

Errors / Warnings in RN can simply be ignored by adding ignoreLog(["partialErrorMessage", "anotherOne"]); somewhere in the code (usually App.ts) – see https://reactnative.dev/docs/debugging#logbox:

import { LogBox } from "react-native";

LogBox.ignoreLogs([
  "findNodeHandle was passed an instance of AnimatedComponent",
]);

[dmahajan980]

is there any way we can suppress this error message without bailing out of Strict mode?

Errors / Warnings in RN can simply be ignored by adding ignoreLog(["partialErrorMessage", "anotherOne"]); somewhere in the code (usually App.ts) – see https://reactnative.dev/docs/debugging#logbox:

import { LogBox } from "react-native";

LogBox.ignoreLogs([
  "findNodeHandle was passed an instance of AnimatedComponent",
]);

Thanks @Peeeep for this! ~However, this only hides warnings/errors on the app and does not prevent those logging those messages to the console.~

I tried this and the console and LogBox messages have disappeared. Thank you very much @Peeeep! I've added a few other strings which hide other error logs from Reanimated:

LogBox.ignoreLogs([
  'findNodeHandle was passed an instance of AnimatedComponent',
  'findNodeHandle is deprecated in StrictMode',
  'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code',
  'Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code',
]);

[AdamTyler]

is there any way we can suppress this error message without bailing out of Strict mode?

Errors / Warnings in RN can simply be ignored by adding ignoreLog(["partialErrorMessage", "anotherOne"]); somewhere in the code (usually App.ts) – see https://reactnative.dev/docs/debugging#logbox:

import { LogBox } from "react-native";

LogBox.ignoreLogs([
  "findNodeHandle was passed an instance of AnimatedComponent",
]);

Thanks @Peeeep for this! ~However, this only hides warnings/errors on the app and does not prevent those logging those messages to the console.~

I tried this and the console and LogBox messages have disappeared. Thank you very much @Peeeep! I've added a few other strings which hide other error logs from Reanimated:

LogBox.ignoreLogs([
  'findNodeHandle was passed an instance of AnimatedComponent',
  'findNodeHandle is deprecated in StrictMode',
  'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code',
  'Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code',
]);

As of React Native 0.71 LogBox.ignoreLogs has been removed (see this comment) and now the errors are unavoidable in the console.

[wcastand]

is there any change on this or strict mode still prevent us to use createAnimatedComponent ?

tried to add strict mode on my app and getting error like Warning: findHostInstance_DEPRECATED is deprecated in StrictMode.