Address reanimated API misuse warnings that pop up starting with reanimated 3.16.0

[vestrelatlassian]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

Reanimated version 3.16.0 introduced a logger that by default shows warnings about API misuse.

We are currently using bottom sheet version 5.0.2 in our app and noticed warnings started to pop up whenever the bottom sheet is rendered/re-rendered.

Reproduction steps

1. Upgrade reanimated lib to version 3.16.0 or newer.
2. Render bottom sheet.

Reproduction sample

https://snack.expo.dev/IUep5KqJQjKmj-dPQdc3g

Relevant log output

If you don't want to see this message, you can disable the `strict` mode. Refer to:
https://docs.swmansion.com/react-native-reanimated/docs/debugging/logger-configuration for more details.

(NOBRIDGE) WARN  [Reanimated] Reading from `value` during component render. Please ensure that you do not access the `value` property or use `get` method of a shared value while React is rendering a component.

[asgarPeerbits]

I am also facing this issue

[FernandoAOborges]

same for me.

To resolve this for now, create a file named reanimatedConfig.js at the root of your project, then import it in App.tsx.

import {
  configureReanimatedLogger,
  ReanimatedLogLevel,
} from 'react-native-reanimated';

configureReanimatedLogger({
  level: ReanimatedLogLevel.warn, 
  strict: false,  // Disable strict mode
});

Import this file at the beginning of your App.tsx to apply the configuration:

import './reanimatedConfig';

// Rest of your code

[gorhom]

i tested the library on RN75 with REA 3.16.0, but im not getting these warnings ? any ideas

[kelechi-nwankpa]

@gorhom Thanks for the response.
I'm experiencing the same warning error as mentioned above. I'm currently using RN74 and REA 3.16.0.

Would you need any other information for further debugging?

i tested the library on RN75 with REA 3.16.0, but im not getting these warnings ? any ideas

[akuul]

I was having the very same issue. It's gone now out of nowhere and trying to understand why. Thinking if this could be related to cache in any way ?.. Also RN 75

[xhrebi04]

I'm experiencing same issue.

react-native: 0.75.4
react-native-reanimated: 3.16.0

I tried to unistall/install app, yarn start --reset-cache as well, but without success.

[gorhom]

i'll try to submit a new release today to remove all accessing animated values as hooks dependancies

[gorhom]

i pushed a potential fix on v5.0.4, could someone test it and update us here ? thanks

[kelechi-nwankpa]

@gorhom I updated the dependency from ^5.0.2 to ^5.0.4.

The warning seems to no longer be displaying. I think the ship worked :D . Great job

[outaTiME]

Hi @gorhom, thanks for the update. Unfortunately, the warnings persist on both platforms (Android / iOS) using react-native v0.74.5. Just to mention, the bottom sheet I’m using is in detached mode, though I’m not sure if this is related to the issue.

[efstathiosntonas]

edit: it seems that a slider I was using inside the bottom sheet was causing the error so I guess all good after upgrading to 5.0.4

Just updated to 5.0.4 too, still getting the error.

https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue#remarks

from docs:

Don't read or modify the value of a shared value during a component's render. Access to value property or calling get/set methods is a side-effect. Triggering side-effects during render violates the Rules of React. All reads from and writes to a shared value should happen in relevant callbacks which aren't executed during render, i.e. in useAnimatedStyle or useEffect hooks.

from my understanding (demo code):

bad:

  const reverseAnim = scaleEmoji.value === 2 ? [2, 1, 1] : [1, 1, 2];

  const emojiAnimatedScaled = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: interpolate(
            scaleEmoji.value,
            [0, 1, 2],
            scaled ? [1, -3, -5] : [1, 1, 1]
          )
        },
        {
          scaleY: interpolate(
            scaleEmoji.value,
            [0, 1, 2],
            scaled ? [0, 1, 1.5] : reverseAnim
          )
        },
        {
          scaleX: interpolate(
            scaleEmoji.value,
            [0, 1, 2],
            scaled ? [0, 1, 1.5] : reverseAnim
          )
        }
      ]
    };
  }, [emojiDuration, scaleDuration, scaleEmoji, scaled]);

good:

  const emojiAnimatedScaled = useAnimatedStyle(() => {
    const reverseAnim = scaleEmoji.value === 2 ? [2, 1, 1] : [1, 1, 2]; <----- moved inside reanimated hook
    return {
      transform: [
        {
          translateY: interpolate(
            scaleEmoji.value,
            [0, 1, 2],
            scaled ? [1, -3, -5] : [1, 1, 1]
          )
        },
        {
          scaleY: interpolate(
            scaleEmoji.value,
            [0, 1, 2],
            scaled ? [0, 1, 1.5] : reverseAnim
          )
        },
        {
          scaleX: interpolate(
            scaleEmoji.value,
            [0, 1, 2],
            scaled ? [0, 1, 1.5] : reverseAnim
          )
        }
      ]
    };
  }, [emojiDuration, scaleDuration, scaleEmoji, scaled]);