PaginationItem reads SharedValue.value during render (Reanimated strict mode warning)

[evanwinter]

Hey! First off, thanks for this awesome library - it's been great to work with.

Issue

I noticed that the Pagination.Custom component triggers Reanimated's strict mode warning when rendering:

WARN [Reanimated] Reading from `value` during component render. Please ensure that you don't access the `value` property nor use `get` method of a shared value while React is rendering a component.

Where it happens

In src/components/Pagination/Custom/PaginationItem.tsx (lines 111-112), animValue.value is read directly in the JSX for accessibility props:

<Pressable
  // ...
  accessibilityHint={animValue.value === index ? "" : `Go to ${accessibilityLabel}`}
  accessibilityState={{ selected: animValue.value === index }}
>

Possible fix

One approach could be to sync the selected state to regular React state:

const [isSelected, setIsSelected] = useState(false);

useDerivedValue(() => {
  runOnJS(setIsSelected)(animValue.value === index);
});

// Then in JSX
accessibilityHint={isSelected ? "" : `Go to ${accessibilityLabel}`}
accessibilityState={{ selected: isSelected }}

Happy to submit a PR if that would help!

Environment

• react-native-reanimated-carousel: 4.0.3
• react-native-reanimated: ~3.17.4
• Platforms: iOS & Android

[dosubot]

Hi @evanwinter! I'm Dosu and I’m helping the react-native-reanimated-carousel team.

You're right—reading a Reanimated SharedValue's .value directly during render (like in accessibility props) triggers strict mode warnings and can cause unpredictable behavior. The recommended fix is to sync the selected state to React state using a Reanimated hook (like useAnimatedReaction or useDerivedValue with runOnJS), then use that state in your accessibility props. This avoids reading the shared value during render and keeps accessibility support intact.

The current implementation of PaginationItem already follows this pattern: it uses a React state (isSelected) that's updated via useAnimatedReaction and scheduleOnRN, so the accessibility props only read React state, not the shared value directly. This resolves the warning and is the best practice for bridging Reanimated values with React state for accessibility purposes. Your proposed approach is correct and matches what's now in the codebase. More details and examples are discussed in this issue and the implementation here.

There are no significant drawbacks to this approach for accessibility props, as React state updates are fast and reliable for this use case. Just make sure to avoid reading .value directly in render anywhere else in your code to prevent similar warnings.

To reply, just mention @dosu.

---

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

   

[evanwinter]

@dosu Gotcha. So it's fixed in the next version? Or is it released now in a stable release?

[dosubot]

The fix for the Reanimated strict mode warning (reading SharedValue.value during render in PaginationItem) is not yet in a stable release. It’s available in canary and beta versions—specifically, starting from 4.0.0-canary.18 and all 5.0.0-beta.x releases (source, source). The main branch is currently in pre-release mode, so you’ll need to use a beta or canary version to get the fix until a stable release is published.

To reply, just mention @dosu.

---

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