react-native-reanimated-carousel icon indicating copy to clipboard operation
react-native-reanimated-carousel copied to clipboard

Warning when using Reanimated version 3.16

Open joaofelippe911 opened this issue 1 year ago • 1 comments

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

joaofelippe911 avatar Oct 18 '24 20:10 joaofelippe911

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.

dosubot[bot] avatar Oct 18 '24 20:10 dosubot[bot]

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

AlbertVilaCalvo avatar Oct 21 '24 10:10 AlbertVilaCalvo

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

calinvasileandrei avatar Oct 21 '24 14:10 calinvasileandrei

+1

shuo-hiwintech avatar Oct 22 '24 09:10 shuo-hiwintech

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

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

shuo-hiwintech avatar Oct 22 '24 09:10 shuo-hiwintech

+1

superflav avatar Oct 22 '24 15:10 superflav

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?

smontlouis avatar Oct 22 '24 19:10 smontlouis

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

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

AlbertVilaCalvo avatar Oct 22 '24 20:10 AlbertVilaCalvo

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

smontlouis avatar Oct 22 '24 22:10 smontlouis

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"
  },

Bebrevski avatar Oct 23 '24 10:10 Bebrevski

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.

AlbertVilaCalvo avatar Oct 23 '24 12:10 AlbertVilaCalvo

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

nmassey avatar Oct 23 '24 18:10 nmassey

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.

Bebrevski avatar Oct 24 '24 06:10 Bebrevski

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

nmassey avatar Oct 24 '24 16:10 nmassey

@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

hiepkay avatar Oct 25 '24 03:10 hiepkay

Also facing same issue with @gorhom/bottom-sheet

Raiden-16F7 avatar Oct 25 '24 05:10 Raiden-16F7

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

  • #710

nmassey avatar Oct 25 '24 16:10 nmassey

I still get these warnings on newest version?

MatkoMilic avatar Oct 31 '24 19:10 MatkoMilic

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.

vuzzer avatar Nov 16 '24 01:11 vuzzer

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 <Navigator />).

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

rareAnshh avatar Nov 18 '24 14:11 rareAnshh

Although the fix in #710 is merged it is not released, so I don't think this should be considered to be closed. The latest version available on npm is v3.5.1 and you need at least v4.0.0-canary.18 to get the fix

ChromeQ avatar Dec 03 '24 23:12 ChromeQ

same waring here. 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. 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.

wdcs-krunalsatapara avatar Dec 06 '24 07:12 wdcs-krunalsatapara

import { configureReanimatedLogger, ReanimatedLogLevel, } from 'react-native-reanimated'; fix file code show message auto end // This is the default configuration configureReanimatedLogger({ level: ReanimatedLogLevel.warn, strict: false, // Reanimated runs in strict mode by default });

manh20012000 avatar Dec 10 '24 23:12 manh20012000

Can people please stop posting the "solution" to turn off strict logging, that is not a fix, it just hides the problem from you, and furthermore the "solution" is clearly in the log text so you aren't providing anything meaningful or adding value.

ChromeQ avatar Dec 11 '24 00:12 ChromeQ

I recently upgraded from expo sdk 5.0.11 to 5.0.18 and upgraded all dependencies with it. I started getting this error, alongside with @gorhom bottom sheet not working in the cases below: (PS: I can't show my app running and don't have the time now to create an example showing what is happening)

  • I have a ScrollView with multiple "cards" on it, like a vertical list
  • Each card has a checkbox and a body.
  • If you click on the body, the bottomSheet opens with card's information

When the screen renders, all checkboxes and cards work as expected, but they all emit the reanimated warning mentioned above If I scroll down, all checkboxes and cards stop working (nothing happens on click).

I.E if there is any scroll offset, all clicks on card and on checkboxes stop working.

fecampossantos avatar Dec 11 '24 13:12 fecampossantos

I recently upgraded from expo sdk 5.0.11 to 5.0.18 and upgraded all dependencies with it. I started getting this error, alongside with @gorhom bottom sheet not working in the cases below: (PS: I can't show my app running and don't have the time now to create an example showing what is happening)

  • I have a ScrollView with multiple "cards" on it, like a vertical list
  • Each card has a checkbox and a body.
  • If you click on the body, the bottomSheet opens with card's information

When the screen renders, all checkboxes and cards work as expected, but they all emit the reanimated warning mentioned above If I scroll down, all checkboxes and cards stop working (nothing happens on click).

I.E if there is any scroll offset, all clicks on card and on checkboxes stop working.

@fecampossantos Can you update which version of expo sdk you are using as it is unclear whether you mean v50, 51 or 52.

Can you also please update react-native-reanimated-carousel to at least version 4.0.0-canary.18 (as per my comment here https://github.com/dohooo/react-native-reanimated-carousel/issues/706#issuecomment-2515822536) and check if the problem still persists? I know it isn't great to rely on a canary version as you won't get outdated package warnings, but it might help eliminate these warnings/errors from your stack to focus on potential problems in other repos and gives you a reason to watch the github project for updates knowing it is fixed in a (hopefully 🤞) soon to be released version.

I understand the frustration and confusion when mentioning gorhom bottom sheet, but bear in mind that this repo is react-native-reanimated-carousel so please try to isolate the packages to ensure the warnings you are seeing are coming from the specific package and raise issues in the appropriate repo. Updates here won't solve your bottom sheet issues

ChromeQ avatar Dec 11 '24 13:12 ChromeQ

facing same issue i am not using shared value just simple Carousel,

import Carousel from 'react-native-reanimated-carousel'
const renderItem = ({ item }) => {
    return (
         <ImageComponent source={{ uri: item }} style={{ height: '100%', width: '100%' }} resizeMode='cover' /> 
 
    )
}
const ImageHeaderDetail = () => {
return (
                      <Carousel
                        enabled
                        loop={true}
                        height={250}
                        width={deviceWidth}
                        style={{ width: "100%" }}
                        data={images}
                        renderItem={renderItem}
                    />
)}

zeeshan-shabbir avatar Dec 12 '24 19:12 zeeshan-shabbir

I recently upgraded from expo sdk 5.0.11 to 5.0.18 and upgraded all dependencies with it. I started getting this error, alongside with @gorhom bottom sheet not working in the cases below: (PS: I can't show my app running and don't have the time now to create an example showing what is happening)

  • I have a ScrollView with multiple "cards" on it, like a vertical list
  • Each card has a checkbox and a body.
  • If you click on the body, the bottomSheet opens with card's information

When the screen renders, all checkboxes and cards work as expected, but they all emit the reanimated warning mentioned above If I scroll down, all checkboxes and cards stop working (nothing happens on click). I.E if there is any scroll offset, all clicks on card and on checkboxes stop working.

@fecampossantos Can you update which version of expo sdk you are using as it is unclear whether you mean v50, 51 or 52.

Can you also please update react-native-reanimated-carousel to at least version 4.0.0-canary.18 (as per my comment here #706 (comment)) and check if the problem still persists? I know it isn't great to rely on a canary version as you won't get outdated package warnings, but it might help eliminate these warnings/errors from your stack to focus on potential problems in other repos and gives you a reason to watch the github project for updates knowing it is fixed in a (hopefully 🤞) soon to be released version.

I understand the frustration and confusion when mentioning gorhom bottom sheet, but bear in mind that this repo is react-native-reanimated-carousel so please try to isolate the packages to ensure the warnings you are seeing are coming from the specific package and raise issues in the appropriate repo. Updates here won't solve your bottom sheet issues

I can confirm updating react-native-reanimated-carousel to 4.0.0-canary.18 solve the warning

serpentarius-hollow avatar Dec 16 '24 08:12 serpentarius-hollow

still not working for me

samertime92 avatar Jan 14 '25 12:01 samertime92

@samertime92 @ChromeQ @joaofelippe911

Hello! I want to share my experience. I was taking a course by Fernando Herrera on Udemy, where I used this library. However, no matter how hard I tried, the horizontal scroll did not work, and I kept seeing the same error message.

Following @ChromeQ's advice, I modified the dependency in my package.json like this:

"react-native-reanimated-carousel": "4.0.0-canary.22"

After that, I deleted the node_modules folder, cleaned everything, and did a cold boot of the emulator. Magically, it worked! The message disappeared, and everything functioned as expected.
All in the expo framework

Almada2021 avatar Jan 19 '25 22:01 Almada2021