Multiple warning show in react native 0.76.5 (New Arch)

[sanju280696]

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

[dosubot]

Hey there, @sanju280696! 👋 I'm here to help you with any bugs, questions, or contributions you have in mind. I'm Dosu, a bot designed to assist you while waiting for a human maintainer. Let's tackle this together!

To resolve the warning in React Native 0.76.5 regarding reading from value during component render in Reanimated, you can update the react-native-reanimated-carousel package to the latest version that includes the patch for removing the shared value access warning. The fix for this issue is included in version 4.0.0-canary.18 of the package ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[sanju280696]

Even after resolving warnings, several issues persist in version 4.0.0-canary.18. One notable problem occurs with the ScrollView: when performing a vertical scroll, the carousel unexpectedly changes its active item.

[CaptainJeff]

@sanju280696 i'm noticing the same issue. Did you find any resolution for this?

[Joels-code]

@sanju280696 @CaptainJeff There is a fix mentioned here #739 (comment) that worked for me.

Basically, add this to your Carousel props:

onConfigurePanGesture={panGesture => { panGesture.activeOffsetX([-10, 10]); }}

It tells the gesture handler to not scroll unless the user swiped horizontally a certain amount.

[CaptainJeff]

thanks @Joels-code !!

I actually stumbled upon that a few days ago confirmed it worked. I also had to remove my usage of react-native-keyboard-controller that was causing issues with react-native-reanimated and thought it was related to the carousel but was the keyboard