search

dohooo / react-native-reanimated-carousel

🎠 React Native swiper/carousel component, fully implemented using reanimated v2, support to iOS/Android/Web. (Swiper/Carousel)
https://react-native-reanimated-carousel.vercel.app
MIT License
2.85k stars 329 forks source link

Warning when using Reanimated version 3.16 #706

Open joaofelippe911 opened 1 month ago

joaofelippe911 commented 1 month ago

[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.

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.

dosubot[bot] commented 1 month ago

Hey @joaofelippe911! I'm here to help you with any bugs, questions, or contributions. Let's tackle this together!

The warning you're encountering is due to accessing shared values during component rendering, which is not recommended in Reanimated version 3.16. To suppress this warning, you can disable strict mode in the logger configuration. This can be done by setting strict: false using the configureReanimatedLogger function. Make sure to call this function before any animations are created, typically in your root file. For more detailed guidance, you can refer to the Reanimated logger configuration documentation.

To continue talking to Dosu, mention @dosu.

AlbertVilaCalvo commented 1 month ago

See this page: https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/

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.

I was able to fix a similar warning, but with a write instead of a read ("Writing to value during component render."), by moving the code to a useEffect: https://github.com/AlbertVilaCalvo/React-Native-Memory-Game/commit/42925a544364a03a582f4e748ed0f1fe5e73dba0

calinvasileandrei commented 1 month ago

Same issue here, definitely disabling logs isn't the best approach!

shuo-hiwintech commented 1 month ago

+1

shuo-hiwintech commented 1 month ago

I ran into this problem with react-native-gesture-handler/ReanimatedSwipeable

"react-native-reanimated": "3.16.1", "react-native": "0.75.1",

superflav commented 1 month ago

+1

smontlouis commented 1 month ago

I’m fine with the warning as long as I can debug it. How can I find out where the issue is, given that I only have the warning and no additional details?

AlbertVilaCalvo commented 1 month ago

@smontlouis the exact line number where the warning happens appears at the LogBox screen.

Anyone with the warning, please paste the error message here.

smontlouis commented 1 month ago

@AlbertVilaCalvo my goodness I had some logs ignored ! Thank you for the insight

Bebrevski commented 1 month ago

Same here

[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.

Until now i was flooded with this warning but since I haven't had any problems so far and coudn't find the issue, I suppressed it. Yesterday I decided to update all of my packages with the new ones (last time i made it was 1-2 months ago) and noticed that the only thing that stopped working is the Gorhom bottom sheet, due to the same issues with Reanimated. I guess is time to take care and fix it. The problem is that i don't understand what I have to change. Acc to the docs I use bottom sheet correctly.

Old package.json

"dependencies": {
    "@gorhom/bottom-sheet": "^4.6.4",
    "@notifee/react-native": "^9.0.2",
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-community/geolocation": "^3.4.0",
    "@react-native-community/slider": "^4.5.3",
    "@react-native-firebase/app": "^20.3.0",
    "@react-native-firebase/messaging": "^20.3.0",
    "@react-native/gradle-plugin": "^0.75.3",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "@reduxjs/toolkit": "^2.2.7",
    "@shopify/react-native-skia": "^1.3.13",
    "@turf/turf": "^7.1.0",
    "@wuba/react-native-echarts": "^1.3.1",
    "axios": "^1.7.7",
    "dayjs": "^1.11.13",
    "echarts": "^5.5.1",
    "i18next": "^23.15.1",
    "lodash": "^4.17.21",
    "react": "18.3.1",
    "react-i18next": "^15.0.2",
    "react-native": "0.75.3",
    "react-native-calendars": "^1.1307.0",
    "react-native-date-picker": "^5.0.7",
    "react-native-device-info": "^13.0.0",
    "react-native-dotenv": "^3.4.11",
    "react-native-geocoding": "^0.5.0",
    "react-native-gesture-handler": "^2.19.0",
    "react-native-get-random-values": "^1.11.0",
    "react-native-google-places-autocomplete": "^2.5.7",
    "react-native-keychain": "^8.2.0",
    "react-native-maps": "^1.18.2",
    "react-native-mask-text": "^0.14.2",
    "react-native-paper": "^5.12.5",
    "react-native-push-notification-popup": "^1.7.0",
    "react-native-reanimated": "^3.15.3",
    "react-native-safe-area-context": "^4.11.0",
    "react-native-screens": "^3.34.0",
    "react-native-svg": "^15.7.1",
    "react-native-svg-transformer": "^1.5.0",
    "react-native-vector-icons": "^10.2.0",
    "react-redux": "^9.1.2",
    "socket.io-client": "^4.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.4",
    "@babel/runtime": "^7.25.4",
    "@react-native/babel-preset": "0.75.3",
    "@react-native/eslint-config": "0.75.3",
    "@react-native/metro-config": "0.75.3",
    "@react-native/typescript-config": "0.75.3",
    "@types/jest": "^29.5.13",
    "@types/lodash": "^4.17.9",
    "@types/node": "^22.6.1",
    "@types/react": "^18.3.8",
    "@types/react-native": "^0.73.0",
    "@types/react-native-dotenv": "^0.2.2",
    "@types/react-test-renderer": "^18.3.0",
    "babel-jest": "^29.7.0",
    "babel-plugin-optional-require": "^0.3.1",
    "detox": "^20.27.2",
    "eslint": "^8.19.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jest": "^29.7.0",
    "prettier": "3.3.3",
    "react-test-renderer": "18.3.1",
    "ts-jest": "^29.2.5",
    "typescript": "5.6.2"
  },

New one:

"dependencies": {
    "@gorhom/bottom-sheet": "^5.0.4",
    "@notifee/react-native": "^9.1.2",
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-community/geolocation": "^3.4.0",
    "@react-native-community/slider": "^4.5.4",
    "@react-native-firebase/app": "^21.2.0",
    "@react-native-firebase/messaging": "^21.2.0",
    "@react-native/gradle-plugin": "^0.75.3",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "@reduxjs/toolkit": "^2.3.0",
    "@shopify/react-native-skia": "^1.5.0",
    "@turf/turf": "^7.1.0",
    "@wuba/react-native-echarts": "^2.0.0",
    "axios": "^1.7.7",
    "dayjs": "^1.11.13",
    "echarts": "^5.5.1",
    "i18next": "^23.16.2",
    "lodash": "^4.17.21",
    "react": "18.3.1",
    "react-i18next": "^15.1.0",
    "react-native": "0.75.4",
    "react-native-calendars": "^1.1307.0",
    "react-native-date-picker": "^5.0.7",
    "react-native-device-info": "^13.1.0",
    "react-native-dotenv": "^3.4.11",
    "react-native-geocoding": "^0.5.0",
    "react-native-gesture-handler": "^2.20.0",
    "react-native-get-random-values": "^1.11.0",
    "react-native-google-places-autocomplete": "^2.5.7",
    "react-native-keychain": "^9.0.0",
    "react-native-maps": "^1.18.2",
    "react-native-mask-text": "^0.14.2",
    "react-native-paper": "^5.12.5",
    "react-native-push-notification-popup": "^1.7.0",
    "react-native-reanimated": "^3.16.1",
    "react-native-safe-area-context": "^4.11.1",
    "react-native-screens": "^3.34.0",
    "react-native-svg": "^15.8.0",
    "react-native-svg-transformer": "^1.5.0",
    "react-native-vector-icons": "^10.2.0",
    "react-redux": "^9.1.2",
    "socket.io-client": "^4.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.8",
    "@babel/preset-env": "^7.25.8",
    "@babel/runtime": "^7.25.7",
    "@react-native/babel-preset": "0.75.4",
    "@react-native/eslint-config": "0.75.4",
    "@react-native/metro-config": "0.75.4",
    "@react-native/typescript-config": "0.75.4",
    "@types/jest": "^29.5.13",
    "@types/lodash": "^4.17.12",
    "@types/node": "^22.7.8",
    "@types/react": "^18.3.11",
    "@types/react-native": "^0.73.0",
    "@types/react-native-dotenv": "^0.2.2",
    "@types/react-test-renderer": "^18.3.0",
    "babel-jest": "^29.7.0",
    "babel-plugin-optional-require": "^0.3.1",
    "detox": "^20.27.5",
    "eslint": "^9.13.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "jest": "^29.7.0",
    "prettier": "3.3.3",
    "react-test-renderer": "18.3.1",
    "ts-jest": "^29.2.5",
    "typescript": "5.6.3"
  },
AlbertVilaCalvo commented 1 month ago

In my case, the console logs didn't say which line number raised the warning (it just said "Writing to value during component render..."), but at the LogBox screen I had the exact line number. That's how I knew what I had to fix it.

nmassey commented 4 weeks ago

I've got a fix in the works for this. Stay tuned .....

Bebrevski commented 4 weeks ago

Same here

[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.

Until now i was flooded with this warning but since I haven't had any problems so far and coudn't find the issue, I suppressed it. Yesterday I decided to update all of my packages with the new ones (last time i made it was 1-2 months ago) and noticed that the only thing that stopped working is the Gorhom bottom sheet, due to the same issues with Reanimated. I guess is time to take care and fix it. The problem is that i don't understand what I have to change. Acc to the docs I use bottom sheet correctly.

Old package.json

"dependencies": {
    "@gorhom/bottom-sheet": "^4.6.4",
    "@notifee/react-native": "^9.0.2",
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-community/geolocation": "^3.4.0",
    "@react-native-community/slider": "^4.5.3",
    "@react-native-firebase/app": "^20.3.0",
    "@react-native-firebase/messaging": "^20.3.0",
    "@react-native/gradle-plugin": "^0.75.3",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "@reduxjs/toolkit": "^2.2.7",
    "@shopify/react-native-skia": "^1.3.13",
    "@turf/turf": "^7.1.0",
    "@wuba/react-native-echarts": "^1.3.1",
    "axios": "^1.7.7",
    "dayjs": "^1.11.13",
    "echarts": "^5.5.1",
    "i18next": "^23.15.1",
    "lodash": "^4.17.21",
    "react": "18.3.1",
    "react-i18next": "^15.0.2",
    "react-native": "0.75.3",
    "react-native-calendars": "^1.1307.0",
    "react-native-date-picker": "^5.0.7",
    "react-native-device-info": "^13.0.0",
    "react-native-dotenv": "^3.4.11",
    "react-native-geocoding": "^0.5.0",
    "react-native-gesture-handler": "^2.19.0",
    "react-native-get-random-values": "^1.11.0",
    "react-native-google-places-autocomplete": "^2.5.7",
    "react-native-keychain": "^8.2.0",
    "react-native-maps": "^1.18.2",
    "react-native-mask-text": "^0.14.2",
    "react-native-paper": "^5.12.5",
    "react-native-push-notification-popup": "^1.7.0",
    "react-native-reanimated": "^3.15.3",
    "react-native-safe-area-context": "^4.11.0",
    "react-native-screens": "^3.34.0",
    "react-native-svg": "^15.7.1",
    "react-native-svg-transformer": "^1.5.0",
    "react-native-vector-icons": "^10.2.0",
    "react-redux": "^9.1.2",
    "socket.io-client": "^4.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.4",
    "@babel/runtime": "^7.25.4",
    "@react-native/babel-preset": "0.75.3",
    "@react-native/eslint-config": "0.75.3",
    "@react-native/metro-config": "0.75.3",
    "@react-native/typescript-config": "0.75.3",
    "@types/jest": "^29.5.13",
    "@types/lodash": "^4.17.9",
    "@types/node": "^22.6.1",
    "@types/react": "^18.3.8",
    "@types/react-native": "^0.73.0",
    "@types/react-native-dotenv": "^0.2.2",
    "@types/react-test-renderer": "^18.3.0",
    "babel-jest": "^29.7.0",
    "babel-plugin-optional-require": "^0.3.1",
    "detox": "^20.27.2",
    "eslint": "^8.19.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jest": "^29.7.0",
    "prettier": "3.3.3",
    "react-test-renderer": "18.3.1",
    "ts-jest": "^29.2.5",
    "typescript": "5.6.2"
  },

New one:

"dependencies": {
    "@gorhom/bottom-sheet": "^5.0.4",
    "@notifee/react-native": "^9.1.2",
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-community/geolocation": "^3.4.0",
    "@react-native-community/slider": "^4.5.4",
    "@react-native-firebase/app": "^21.2.0",
    "@react-native-firebase/messaging": "^21.2.0",
    "@react-native/gradle-plugin": "^0.75.3",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "@reduxjs/toolkit": "^2.3.0",
    "@shopify/react-native-skia": "^1.5.0",
    "@turf/turf": "^7.1.0",
    "@wuba/react-native-echarts": "^2.0.0",
    "axios": "^1.7.7",
    "dayjs": "^1.11.13",
    "echarts": "^5.5.1",
    "i18next": "^23.16.2",
    "lodash": "^4.17.21",
    "react": "18.3.1",
    "react-i18next": "^15.1.0",
    "react-native": "0.75.4",
    "react-native-calendars": "^1.1307.0",
    "react-native-date-picker": "^5.0.7",
    "react-native-device-info": "^13.1.0",
    "react-native-dotenv": "^3.4.11",
    "react-native-geocoding": "^0.5.0",
    "react-native-gesture-handler": "^2.20.0",
    "react-native-get-random-values": "^1.11.0",
    "react-native-google-places-autocomplete": "^2.5.7",
    "react-native-keychain": "^9.0.0",
    "react-native-maps": "^1.18.2",
    "react-native-mask-text": "^0.14.2",
    "react-native-paper": "^5.12.5",
    "react-native-push-notification-popup": "^1.7.0",
    "react-native-reanimated": "^3.16.1",
    "react-native-safe-area-context": "^4.11.1",
    "react-native-screens": "^3.34.0",
    "react-native-svg": "^15.8.0",
    "react-native-svg-transformer": "^1.5.0",
    "react-native-vector-icons": "^10.2.0",
    "react-redux": "^9.1.2",
    "socket.io-client": "^4.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.8",
    "@babel/preset-env": "^7.25.8",
    "@babel/runtime": "^7.25.7",
    "@react-native/babel-preset": "0.75.4",
    "@react-native/eslint-config": "0.75.4",
    "@react-native/metro-config": "0.75.4",
    "@react-native/typescript-config": "0.75.4",
    "@types/jest": "^29.5.13",
    "@types/lodash": "^4.17.12",
    "@types/node": "^22.7.8",
    "@types/react": "^18.3.11",
    "@types/react-native": "^0.73.0",
    "@types/react-native-dotenv": "^0.2.2",
    "@types/react-test-renderer": "^18.3.0",
    "babel-jest": "^29.7.0",
    "babel-plugin-optional-require": "^0.3.1",
    "detox": "^20.27.5",
    "eslint": "^9.13.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "jest": "^29.7.0",
    "prettier": "3.3.3",
    "react-test-renderer": "18.3.1",
    "ts-jest": "^29.2.5",
    "typescript": "5.6.3"
  },

Just in case someone has the same problem, I found what was causing the problem with the bottom sheet not opening. I was using it like this 

<BottomSheetModal
      keyboardBehavior="interactive"
      keyboardBlurBehavior="restore"
      android_keyboardInputMode="adjustResize"
      enableHandlePanningGesture={true}
      ref={ref}
      snapPoints={snapPoints}
      index={isModalActive ? 0 : -1}
      backgroundStyle={[
        {
          backgroundColor: COLORS.background.white,
          borderRadius: 32,
          overflow: 'hidden',
        },
      ]}
      style={[
        { backgroundColor: COLORS.background.white, borderRadius: 25 },
        STYLES.elevation,
      ]}
      onDismiss={handleDismiss}
      onChange={index => handleChange(index)}
      handleComponent={renderHandleComponent}
      handleIndicatorStyle={[{ backgroundColor: COLORS.icons.darkGray }]}
      enablePanDownToClose={enablePanDownToClose}
      backdropComponent={applyBackdrop ? renderBackdrop : undefined}
      activeOffsetY={[-1, 1]}
      failOffsetX={[-5, 5]}>
        {element}
    </BottomSheetModal>

Looks like Reanimated don't like that the "{element}" component does not goes through reanimated hooks and this way I am trying to "modify" it by using shared values. I wrapped with BottomSheetView like this and everything started to work normally again.

<BottomSheetModal
      ...props
      ref={ref}
>
      <BottomSheetView style={{ flex: 1 }}> --> Added this tag
        {element}
      </BottomSheetView>
    </BottomSheetModal>

Still at some situations I get the warnings but they are far less. For now i think to suppress it.

nmassey commented 4 weeks ago

@Bebrevski - if I'm understanding correctly, the BottomSheetModal issue you're talking about is unrelated to the carousel plugin react-native-reanimated-carousel, right?

kayda69 commented 4 weeks ago

@Bebrevski - if I'm understanding correctly, the BottomSheetModal issue you're talking about is unrelated to the carousel plugin react-native-reanimated-carousel, right?

I have the same problem with both Reanimated Swipeable and react-native-reanimated-carousel Edited: for anyone seeing the reanimated warning, be aware that the app will crash when building and running release mode

Raiden-16F7 commented 4 weeks ago

Also facing same issue with @gorhom/bottom-sheet

nmassey commented 3 weeks ago

Yes, @kayda69 - I'm optimistic 🙏 that the warning will disappear with the fix in:

MatkoMilic commented 3 weeks ago

I still get these warnings on newest version?

vuzzer commented 6 days ago

To solve this issue, I replaced the View component with the Animated.View component to handle the animation.

Instead of doing this : 

<View  style={[isExpanded ? {height:350} : {height:100}]}>
        <Text>Content</Text>
</View>

Here’s what I did:

const isExpanded = useSharedValue<boolean>(false);
const containerStyle = useAnimatedStyle(() => {
      return {
        height: withSpring(isExpanded.value ? 350 : 100),
      };
 });
<Animated.View style={containerStyle}>
        <Text>Content</Text>
</Animated.View>

I believe this is related to the Expo version. Personally, I am using version 52.

rareAnshh commented 3 days ago

Just add import {configureReanimatedLogger} from 'react-native-reanimated';

// Inside the functional component configureReanimatedLogger({ strict: false, }); at the top layer of the Project (Where we call the ).

In my project the top layer is App.tsx file.