Fix performance issue with large card datasets through dynamic rendering

[Copilot]

The library rendered all cards in the dataset at mount, causing severe performance degradation with 50+ cards. Users reported extremely slow animations and app freezing.

Changes

Dynamic render window

• Added renderRange state tracking visible card indices (current - 1 to current + prerenderItems + 1)
• Hooked useAnimatedReaction to update range on activeIndex changes
• Limited slice to render window instead of entire dataset from initialIndex

Adaptive prerender calculation

• Moved adjustedPrerenderItems into reaction callback, calculated from current position
• Prevents stale values when data length or position changes

Impact

With 50 cards and prerenderItems=3:

• Rendered components: 50 → 5 (90% reduction)
• Complexity: O(n) → O(1)

Cards dynamically mount/unmount as user swipes, maintaining constant memory footprint.

// Before: renders all 50 cards
data.slice(clampedInitialIndex).map(...)

// After: renders only visible window
data.slice(renderRange.start, renderRange.end).map(...)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>serious performance issue</issue_title>
<issue_description>### Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

Have been using a 6years old abandoned package with good performance: react-native-card-stack-swiper

Switched to this lib and it has very serious perf issues, basically the app freezes with about 50 cards (or even less if messing with the list of cards with state without full reload)

The old lib had no problem at all. Tried multiple approches but the issue persists

prerenderItems={3} seems to not work at all or doesnt help against freezing (on freezing i mean the animation is extremely slow, depending on the sum of the cards from very slow to extremely slow to actually freezing). The same code is flawless on the old package with fast animations not depending on the count of cards

Library version

3.0.0

Environment info

"react-native": "0.81.5",
    "react-native-reanimated": "4.1.3",

Steps to reproduce

Add 50 cards to test with tinder-like user cards for example renderCard={(item, index) => ( <View style={styles.cardContainer}> <ImageBackground source={{ uri: item.picurl }} style={styles.image}> <LinearGradient colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.9)']} locations={[0, 1]} style={styles.cardBottomRow} > <TouchableOpacity onPress={() => openUser(item.id)}>...

Reproducible example repository

none</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes serious performance issue #74

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.