Describe the bug
When using loop={true} with mode="parallax", swiping in the reverse direction (backwards past index 0) causes items to render without their React component styles. Specifically, backgroundColor set on Views inside renderItem is not applied to items that appear via reverse looping, while the same items render correctly when reached by swiping forward.
This suggests the library's loop mechanism uses native view clones for reverse-direction items rather than proper React component instances, causing all React-driven styles, props, and state to be ignored.
To Reproduce
Create a Carousel with loop={true}, mode="parallax", and 30+ data items
Set backgroundColor: '#000' on a View inside renderItem
Place an absolutely-positioned colored gradient View behind the Carousel
Swipe forward through items — backgroundColor works, gradient is hidden behind cards ✅
Swipe backwards past index 0 (looping to the last items) — backgroundColor is missing, gradient bleeds through the card area ❌
Expected behavior
backgroundColor and all other React styles should be applied consistently to all carousel items regardless of swipe direction when loop={true}.
Attempted workarounds that did NOT work:
React.memo on the renderItem component
Inline styles style={[styles.x, { backgroundColor: '#000' }]}
State-driven backgroundColor passed as prop
windowSize={data.length} to force all items to render
style={{ backgroundColor: '#000' }} on the Carousel component itself
Separating backgroundColor from animated opacity (putting bg outside Animated.View)
Workaround that works: Bypassing loop={true} entirely by tripling the data array ([...data, ...data, ...data]), setting loop={false}, starting at the middle copy, and using onSnapToItem to reset to middle when reaching edges. This ensures all items are real React components.
Versions:
react: v19.1.0
react-native: v0.81.5
react-native-reanimated: ~4.1.1
react-native-reanimated-carousel: ^4.0.2
react-native-gesture-handler: ~2.28.0
Additional context
The issue appears to be in how the library handles the loop boundary. Forward-swiped items go through normal React rendering. Reverse-looped items seem to be native view clones that bypass React's rendering lifecycle entirely, meaning no styles, state, or props from renderItem are applied.
Describe the bug
When using
loop={true}withmode="parallax", swiping in the reverse direction (backwards past index 0) causes items to render without their React component styles. Specifically,backgroundColorset on Views insiderenderItemis not applied to items that appear via reverse looping, while the same items render correctly when reached by swiping forward.This suggests the library's loop mechanism uses native view clones for reverse-direction items rather than proper React component instances, causing all React-driven styles, props, and state to be ignored.
To Reproduce
Create a Carousel with
loop={true},mode="parallax", and 30+ data itemsSet
backgroundColor: '#000'on a View insiderenderItemPlace an absolutely-positioned colored gradient
Viewbehind the CarouselSwipe forward through items —
backgroundColorworks, gradient is hidden behind cards ✅Swipe backwards past index 0 (looping to the last items) —
backgroundColoris missing, gradient bleeds through the card area ❌Expected behavior
backgroundColorand all other React styles should be applied consistently to all carousel items regardless of swipe direction whenloop={true}.Attempted workarounds that did NOT work:
React.memoon the renderItem componentInline styles
style={[styles.x, { backgroundColor: '#000' }]}State-driven backgroundColor passed as prop
windowSize={data.length}to force all items to renderstyle={{ backgroundColor: '#000' }}on the Carousel component itselfSeparating backgroundColor from animated opacity (putting bg outside
Animated.View)Workaround that works: Bypassing
loop={true}entirely by tripling the data array([...data, ...data, ...data]), settingloop={false}, starting at the middle copy, and usingonSnapToItemto reset to middle when reaching edges. This ensures all items are real React components.Versions:
react: v19.1.0
react-native: v0.81.5
react-native-reanimated: ~4.1.1
react-native-reanimated-carousel: ^4.0.2
react-native-gesture-handler: ~2.28.0
Additional context
The issue appears to be in how the library handles the loop boundary. Forward-swiped items go through normal React rendering. Reverse-looped items seem to be native view clones that bypass React's rendering lifecycle entirely, meaning no styles, state, or props from
renderItemare applied.