items don't render in carousel when `loop={false}`

[calebpanza]

Describe the bug When setting loop={false} on the Carousel component, carousel items stop rendering entirely. The carousel container is visible (confirmed via background color debugging) but the renderItem function appears to not be called or the rendered content is not displayed.

To Reproduce Steps to reproduce the behavior:

1. Create a Carousel with multiple items (4+ items recommended)
2. Set loop={false} on the Carousel component
3. Use renderItem to render React components
4. Run the app
5. Observe that carousel items do not appear

Code example:

<Carousel
  data={[
    { key: 'step1', component: StepOne },
    { key: 'step2', component: StepTwo },
    { key: 'step3', component: StepThree },
    { key: 'step4', component: StepFour },
  ]}
  renderItem={({ item }) => (
    <View style={{ flex: 1, width: '100%', padding: 32 }}>
      <item.component />
    </View>
  )}
  loop={false}
/>

Expected behavior The carousel should render items normally when loop={false}, just without looping behavior. Items should be visible and navigable via programmatic scrollTo calls.

Actual behavior

• Carousel container is visible (can confirm via background colors)
• No carousel items are rendered/visible
• Removing loop={false} makes items appear again
• Setting loop={true} works as expected

Screenshots N/A - items simply don't render

Versions (please complete the following information):

• react: v19.1.0
• react-native: v0.81.4
• react-native-reanimated: v4.1.1
• react-native-reanimated-carousel: v5.0.0-beta
• react-native-gesture-handler: v2.28.0

Smartphone (please complete the following information):

• Device: iOS Simulator
• OS: iOS (latest)

Additional context

• Using Expo SDK 54
• Carousel is used in a multi-step form context with programmatic navigation via ref.scrollTo()
• The issue occurs regardless of whether enabled prop is true or false
• Removing the loop prop entirely (defaulting to loop=true) makes items render correctly

[dosubot[bot]]

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

This issue is likely caused by a bug in how the carousel calculates which items to render when loop={false}. The rendering logic depends on index and range calculations in the layout and props processing code. If these calculations are incorrect—such as returning an empty range or invalid indices when looping is disabled—no items will be rendered, even though the container is visible. This matches your symptoms and is supported by related discussions and code analysis. There are no official workarounds documented yet, but you might try experimenting with your data length, windowSize, or layout props to see if rendering resumes. If you need a temporary workaround, using loop={true} or duplicating your data (as some users have done for small lists) may help until a fix is released. For more details, see related issue #350.

To reply, just mention @dosu.

---

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

[calebpanza]

Hey, thank you so much for the fast response. I really appreciate this.

For my specific use case I'm trying to do a multi step form that scrolls horizontally

Is this outside of the intended use case for this package? It's a killer package and I would love to use it, but I need something that's gonna be steady and consistent and if they fixed length variable height type experience is not something that you guys support then I'll look for an alternate solution.

[haleyngonadi]

Thanks for this, @calebpanza! I am also able to reproduce this issue!

[ggwpg2025]

Have a similar issue when loop property is determined by the data length Adding key as data.length solves the problem for me

      <Carousel
        key={data.length}
        loop={data.length > 1}
        data={data}
       ....
      />