react-native-reanimated-carousel
react-native-reanimated-carousel copied to clipboard
Warning when using Reanimated version 3.16
[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.
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.
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
valueproperty or callingget/setmethods 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. inuseAnimatedStyleoruseEffecthooks.
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
Same issue here, definitely disabling logs isn't the best approach!
+1
I ran into this problem with react-native-gesture-handler/ReanimatedSwipeable
"react-native-reanimated": "3.16.1", "react-native": "0.75.1",
+1
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 the exact line number where the warning happens appears at the LogBox screen.
Anyone with the warning, please paste the error message here.
@AlbertVilaCalvo my goodness I had some logs ignored ! Thank you for the insight
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"
},
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.
I've got a fix in the works for this. Stay tuned .....
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 - if I'm understanding correctly, the BottomSheetModal issue you're talking about is unrelated to the carousel plugin react-native-reanimated-carousel, right?
@Bebrevski - if I'm understanding correctly, the
BottomSheetModalissue you're talking about is unrelated to the carousel pluginreact-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
Also facing same issue with @gorhom/bottom-sheet
Yes, @kayda69 - I'm optimistic 🙏 that the warning will disappear with the fix in:
- #710
I still get these warnings on newest version?
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.
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.
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
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.
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 });
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.
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.
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
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}
/>
)}
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-carouselto at least version4.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 acanaryversion 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
still not working for me
@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