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]);

[sladik-maksym]

Я отправил потенциальное исправление v5.0.4, может ли кто-нибудь протестировать его и сообщить нам об этом здесь? Спасибо

Thank you! The warning is gone, everything works great.

[ludwighen]

I still get the warning on 5.0.4 (using BottomSheetModal) unfortunately

[Willham12]

Same issue here but it's depends on the provided child.

[virendrasingh-tech]

the warning is coming directly from reanimated 3.16, i don't have @gorhom packages still it is showing to me.

[akuul]

the warning is coming directly from reanimated 3.16, i don't have @gorhom packages still it is showing to me.

It's probably showing because of a difference package that has the same issue.

[virendrasingh-tech]

Yeah, After i have commented some of my code i found that it's coming from react-native-pager-view

the warning is coming directly from reanimated 3.16, i don't have @gorhom packages still it is showing to me.

It's probably showing because of a difference package that has the same issue.

[onmotion]

I guess it came from the BottomSheetView

[ludwighen]

it's true that a few libraries cause this warning, I got it as well from react-native-skia for example. However I think that in 5.0.4 still not all warnings have been removed from the BottomSheet. I get the warning even in an empty bottom sheet where I'm positive I don't use any shared values or other libraries.

I use a wrapper component but maybe some of the props / DOM helps:

 <BottomSheetModal
      ref={bottomSheetRef}
      enableDynamicSizing={enableDynamicSizing}
      onDismiss={onDismiss}
      onChange={onChange}
      maxDynamicContentSize={maxHeight || height * 0.85}
      animationConfigs={{ duration: 100 }}
      backdropComponent={disableBackdrop ? undefined : renderBackdrop}
      footerComponent={rightButton || customFooter ? renderFooter : undefined}
      handleIndicatorStyle={{
        backgroundColor: isDarkMode ? '#737373' : '#bbbbbb',
        width: 34,
      }}
      backgroundStyle={{
        backgroundColor: isDarkMode ? '#262626' : '#ffffff',
      }}
      snapPoints={snapPoints || undefined}
      keyboardBehavior={enableDynamicSizing ? 'interactive' : 'extend'}
    >
      {isBottomSheetScrollable ? (
        children
      ) : (
        <BottomSheetView
          enableFooterMarginAdjustment={!!(customFooter || rightButton)}
        >
          {title && (
            <Box
              borderBottomWidth={0.5}
              borderColor="$trueGray200"
              width="$full"
              height={43}
            >
              <Heading size="sm" textAlign="center" mb="$2.5" mt="$2">
                {title}
              </Heading>
            </Box>
          )}
          <View
            pb={hasBottomSafeArea ? bottom : 0}
            px={hasHorizontalPadding ? '$4' : 0}
            mb={title && isScrollable ? 43 : 0}
            flexShrink={1}
          >
            {children}
          </View>
        </BottomSheetView>
      )}
    </BottomSheetModal>
  );

[akuul]

@gorhom I have removed from BottomSheet the remaining .value dependencies from hooks and put the last if clause inside useEffect. The warning is gone, might be helpful.

if (__DEV__) {
      print({
        component: BottomSheet.name,
        method: 'render',
        params: {
          animatedSnapPoints: animatedSnapPoints.value,
          animatedCurrentIndex: animatedCurrentIndex.value,
          providedIndex: _providedIndex,
        },
      });
    }

[Noitham]

Seeing the error too on 5.0.4.

In my case, I use a BottomSheetModal with a BottomSheetView inside of it.

[onmotion]

Seeing the error too on 5.0.4.

In my case, I use a BottomSheetModal with a BottomSheetView inside of it.

same for me, if remove BottomSheetView the warnings are gone

[felpereira]

I am facing the same problem in the code

[rxeal]

You can disable strict mode in the logger configuration by setting strict: false using the configureReanimatedLogger function before creating any animations.

Alternatively, ensure that you read or write to shared values within relevant callbacks (like useAnimatedStyle or useEffect) rather than during the render phase.

If you are stuck, try using react-native-reanimated@3.15.4 as a workaround.

[Willham12]

here isa fix: #1983

[Raiden-16F7]

Im facing this issue on 5.0.4 with reanimated 3.16.1, when i press my TouchableOpacity i get the same log error

      <BottomSheet
        ref={bottomSheetRef}
        backgroundStyle={{ backgroundColor: theme.colors.background}}
        snapPoints={snapPoints}
        index={-1}
        >
        <BottomSheetScrollView contentContainerStyle={styles.sheetContent}>
          
          <Text style={styles.heading}>Select Consultation Type</Text>
          <View style={styles.consultationContainer}>
            {consultationTypes.map((type) => (
              <TouchableOpacity
                key={type}
                style={[
                  styles.consultationButton,
                  selectedConsultation === type && styles.selectedButton,
                ]}
                onPress={() => {
                  setSelectedConsultation(type);
                }}>
                <Text
                  style={[styles.buttonText, selectedConsultation === type && styles.selectedText]}>
                  {type}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
          </BottomSheetView>

[inthisar-hamza]

This Issue is still on version 5.0.4

If you don't want to see this message, you can disable the strictmode. Refer to: https://docs.swmansion.com/react-native-reanimated/docs/debugging/logger-configuration for more details. (NOBRIDGE) WARN [Reanimated] Reading fromvalueduring component render. Please ensure that you do not access thevalueproperty or useget method of a shared value while React is rendering a component.

[gorhom]

another attempt to fix the issue by @pinpong was released on v5.0.5

[vhakulinen]

I'm still getting warnings on which leads to this:

react-native-bottom-sheet/src/components/bottomSheet/BottomSheet.tsx

Lines 173 to 182 in 4f26c78

	if (__DEV__) {
	// biome-ignore lint/correctness/useHookAtTopLevel: used in development only.
	usePropsValidator({
	index: _providedIndex,
	snapPoints: _providedSnapPoints,
	enableDynamicSizing,
	topInset,
	bottomInset,
	});
	}

The props validator is accessing the value property of provided snap points. I noticed (in the past) that the snap points needed to be a derived value (i.e. useDerivedValue) instead of plain numbers on iOS, or otherwise it would get a crash.

[outaTiME]

another attempt to fix the issue by @pinpong was released on v5.0.5

After updating to version 5.0.5, the warnings disappeared for me 🎉

[vhakulinen]

Just to clearify my earlier comment: the snap points must be shared value for the warnings to appear. Using normal values as snap points does not produce any warnings.

[khushal87]

Seems to occur here as well.

[VimukthiShohan]

This Issue is still on version 5.0.6

(NOBRIDGE) WARN [Reanimated] Reading from valueduring component render. Please ensure that you do not access thevalueproperty or useget method of a shared value while React is rendering a component.

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.

[rochajulian]

Any update on this?

[VimukthiShohan]

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

@rochajulian I'm using this as a temporary solution for now until they fix this with an update.