Repository navigation
fix: support reanimated 4 and add renderWindow for long carousels - #32
Merged
Merged
Conversation
The pan gesture, the scroll reaction and the infinite-scroll reaction read from props and the children array inside worklets. Reanimated 4 copies everything a worklet captures to the UI thread and throws on React elements in development (Cannot copy value of type FiberNode), so the carousel crashed on mount. They now capture only the callbacks and the slide count. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Every slide stayed mounted, so a long carousel paid for all of them on mount and ran every slide's animated styles on each frame. With renderWindow, slides further away render as empty slots of the same width. It's opt-in, since unmounting drops slide state such as video playback. With infinite scroll the window wraps around, so the slide a clone jumps to is already mounted. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Two changes, one commit each.
fix: stop worklets capturing React elements. On Reanimated 4 the carousel crashes on mount in development with
[Worklets] Cannot copy value of type FiberNode. Reanimated 4 copies everything a worklet captures to the UI thread, and three worklets captured React elements:AnimatedPagedView: the pan gesture readprops.onScrollBeginDragand the scroll reaction readprops.onScroll, which captures all ofprops, includingchildren.clampValuereadchildrenArray.length, which captures the array.useInfiniteScroll: the reaction readpaddedChildrenArray.length. It runs even with infinite scroll disabled.They now capture only the two callbacks and the slide count. Behaviour is unchanged.
perf: add
renderWindowto the provider. Every slide stays mounted, so a long carousel pays for all of them on mount and runs every slide's animated styles (useInterpolateInsideCarousel,ItemAnimatedView) on each frame of a swipe. WithrenderWindow={2}, only the current slide and two on each side render their content. The others are empty slots of the same width, so positions, snapping andgoToPagedon't change.useAnimatedReaction, not on every frame.HeroCarouselSlideis memoized, so only slides entering or leaving the window re-render.utils/isInRenderWindow.tswith unit tests.Documented in the README provider table.
Testing
type:check,lint,test(28 passing, 5 new) and Prettier.renderWindowis covered by the unit tests only. I haven't run it in an app with a long carousel yet, so the example app's carousels are worth a quick run withrenderWindowset, especially with infinite scroll.Related Tickets/Issues
Found while trying the library for the parishes carousel in the Ascension app.
🤖 Generated with Claude Code
📦 Published PR as canary version:
0.1.15--canary.32.a9779c8.0✨ Test out this PR locally via:
npm install @strv/react-native-hero-carousel@0.1.15--canary.32.a9779c8.0 # or yarn add @strv/react-native-hero-carousel@0.1.15--canary.32.a9779c8.0