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.

[zack-rose]

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

This is happening over and over. Is it a problem with the library itself? I don't think I'm doing anything weird in my code:

import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel';

  <Carousel
    ref={ref as MutableRefObject<ICarouselInstance | null>}
    data={data || []}
    renderItem={({ item }) => (
      <View style={styles.featuredSlide}>
       
        <Image
          style={[styles.featuredImage, { width: imageWidth, height: imageHeight }]} 
          source={{ uri: item.photos?.[0] || 'https://via.placeholder.com/350x480' }}
        />

        {
          showOverlaidText && (
            <>
              <Text style={styles.a}>{item.a}</Text>
              <Text style={styles.b}>{item.b}</Text>
            </>
          )
        }
      </View>
    )}
    width={width}
    height={height}
    scrollAnimationDuration={scrollAnimationDuration}
    autoPlay={autoPlay}
    loop={loop}
    panGestureHandlerProps={{
      activeOffsetX: [-10, 10],
    }}
  />

I tried the code above. It renders fine. But Im getting thousands of these errors : [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.

I did try updating to the latest version. The component is wrapped in a ScrollView. I had to add the panGestureHandlerProps as I was unable to continue to scroll down the page without it when on the carousel

[dosubot]

Hey @zack-rose! I'm here to help you with any bugs, questions, or contributions you have. Let's tackle this issue together!

The error message "[Reanimated] Reading from value during component render" is likely related to an issue with the react-native-reanimated-carousel library itself. A patch was made to the library to address this specific warning by removing shared value access during component rendering. Updating to the latest version of the library where this patch is applied should resolve the warning. The patch is included in version 4.0.0-canary.18 of react-native-reanimated-carousel ^[1][2].

If you have already updated to this version and are still experiencing the issue, ensure that all dependencies are correctly updated and that there are no conflicting versions of react-native-reanimated in your project.

To continue talking to Dosu, mention @dosu.

---

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

[shuo-hiwintech]

+1

"react-native": "0.76.2",
"react-native-reanimated": "^3.16.2",
"react-native-gesture-handler": "^2.21.2",
"react-native-reanimated-carousel": "^3.5.1",

[shuo-hiwintech]

Using npm i [email protected], everything looks fine, no error messages

[zack-rose]

Thanks I'll have a look. canary.18 made the slideshow buggy

[nmassey]

hi @zack-rose - yes, it looks like this issue might be a dupe of issue #706 which should be fixed with PR #710.

If there's a new bug in canary.18 (or higher), please do report that separately. 🙏