[New Version] 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.

[UnderTheMoonspell]

The warning "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." is still happening in 4.0.2

Expected behavior Should not be happening (supposedly fixed in 4.0.0)

Screenshots

Versions

• react: v18.3.1
• react-native: v0.77.2
• react-native-reanimated: v3.16.6
• react-native-reanimated-carousel: v4.0.2
• react-native-gesture-handler: v2.25.0

Smartphone

• Device: 16 Pro (simulator)
• OS: iOS 18.5

[dosubot[bot]]

This warning is a known issue in react-native-reanimated-carousel, especially when using modes like "parallax" or "stack". It happens when shared values (e.g., .value or get) are accessed directly during React render, which is discouraged by react-native-reanimated and can cause crashes or unexpected behavior, particularly with the new architecture. The warning is still present in v4.0.2 and has been discussed in several issues, with fixes and workarounds only partially effective in some cases [1] [2] [3].

The recommended pattern is to always use hooks like useDerivedValue or useAnimatedStyle to read shared values, never directly in render or style props. Some users have tried wrapping calculations (like zIndex) with Math.round() to avoid precision errors, but this doesn't always resolve the warning or related crashes [4] [5].

If you rely on the "mode" prop or custom layouts, this warning may be unavoidable until the library updates its internals to fully comply with reanimated's requirements. Disabling the new architecture can sometimes help if you encounter crashes, but it's not always practical. Double-check that your setup for react-native-reanimated is correct (babel plugin, cache reset), but be aware that the root cause is likely in how the carousel accesses shared values during render [6].

If you need to work around this, try to avoid using the "mode" prop or custom layouts that trigger the warning, or consider using a different carousel implementation until this is resolved upstream.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[zhuscat]

Same issue here

[dosubot[bot]]

Hi, @UnderTheMoonspell. I'm Dosu, and I'm helping the react-native-reanimated-carousel team manage their backlog and am marking this issue as stale.

Issue Summary:

• You reported the persistent warning "Reading from value during component render" in v4.0.2 despite it being fixed in v4.0.0.
• The warning is linked to accessing shared values directly during render, especially with "parallax" or "stack" modes.
• The maintainer explained this is a known limitation due to internal library usage and recommended using hooks like useDerivedValue or useAnimatedStyle.
• Other users have confirmed experiencing the same issue, with workarounds including avoiding certain modes or disabling the new architecture.
• A full fix depends on updates from upstream libraries and remains unresolved.

Next Steps:

• Please let me know if this issue is still relevant with the latest version of react-native-reanimated-carousel by commenting here.
• If I don’t hear back within 7 days, I will automatically close this issue to keep the backlog manageable.

Thanks for your understanding and contribution!

[hanna-becker]

This is still an issue in the latest react-native-reanimated-carousel version.