Skip to content

loop={true} — Styles (backgroundColor, etc.) not applied to reverse-direction cloned items in parallax mode #899

Description

@bs-vinay-parmar

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.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions