Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dmahajan980 opened this issue Sep 15, 2022 · 8 comments
Labels
Needs review Issue is ready to be reviewed by a maintainer Platform: Android This issue is specific to Android Repro provided A reproduction with a snippet of code, snack or repo is provided

Comments

@dmahajan980
Copy link

dmahajan980 commented Sep 15, 2022

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:

Screenshot 2022-09-16 at 3 03 05 AM

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 dmahajan980 added the Needs review Issue is ready to be reviewed by a maintainer label Sep 15, 2022
@github-actions github-actions bot added Repro provided A reproduction with a snippet of code, snack or repo is provided Platform: Android This issue is specific to Android labels Sep 15, 2022
@dmahajan980 dmahajan980 changed the title Creating Animated Components with createAnimatedComponent throws error in Strict Mode Reanimated 3 (RC 2): Creating Animated Components with createAnimatedComponent throws error in Strict Mode Sep 15, 2022
@dmahajan980
Copy link
Author

This discussion also points to the usage of findNodeHandle which is causing the above error: #3557

@tomekzaw
Copy link
Member

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
Copy link
Author

dmahajan980 commented Sep 16, 2022

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
Copy link
Member

tomekzaw commented Sep 16, 2022

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
Copy link

Peeeep commented Jan 18, 2023

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
Copy link
Author

dmahajan980 commented Jan 18, 2023

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
Copy link

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs review Issue is ready to be reviewed by a maintainer Platform: Android This issue is specific to Android Repro provided A reproduction with a snippet of code, snack or repo is provided
Projects
None yet
Development

No branches or pull requests

5 participants