Repository navigation
feat: add centerSlide to centre narrower slides with their neighbours peeking in - #31
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>
…ow' into fix/slide-width-support # Conflicts: # src/components/HeroCarousel/index.tsx
… peeking in Replaces the window-width margin and the visible overflow. With slideWidth narrower than the carousel, centerSlide offsets the moving row by half the free space, using the carousel's measured width, so the current slide is centred and its neighbours show on both sides inside the carousel's own bounds. The offset sits inside the gesture view, so swipes work on either peek. It's opt-in, so existing carousels don't move, and the pager clips again. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
petrkonecny2
changed the title
petrkonecny2
changed the base branch from
main
to
fix/reanimated-4-and-render-window
October 10, 2026 16:47
There was a problem hiding this comment.
🟡 Changes recommended
The window-based initial width can visibly misposition slides before the actual container measurement arrives.
1 open finding
What changed in this PR
Adds opt-in centering for slides narrower than their carousel container.
Changes:
- Adds and documents the
centerSlideprovider option. - Measures the carousel and offsets its animated slide row.
- Exports
HeroCarouselPropsexplicitly as a type.
| File | Description |
|---|---|
src/context/CarouselContext/index.tsx |
Adds centerSlide to provider context. |
src/components/AnimatedPagedView/index.tsx |
Measures and centers the slide row. |
src/components/index.ts |
Corrects the type-only export. |
README.md |
Documents centered-slide usage. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
petrkonecny2
changed the base branch from
fix/reanimated-4-and-render-window
to
main
October 10, 2026 17:07
# Conflicts: # README.md # src/context/CarouselContext/index.tsx
The offset came from the window's width until onLayout reported the carousel's own, so a carousel narrower than the window rendered shifted for its first frame. The row now starts at left: 50% less half a slide, which layout resolves against the carousel's real width from the first frame, with no state or measuring. 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
Adds
centerSlideto the provider. WhenslideWidthis narrower than the carousel, the current slide is centred and its neighbours peek in on both sides.This replaces the first take on this branch, which set the pager's
overflowtovisibleand wrapped the carousel inmarginLeft: (windowWidth - slideWidth) / 2. That had three problems:How it works now:
AnimatedPagedViewmeasures its own width withonLayout, starting from the window width so there's no jump on mount. It shifts the moving row by(width - slideWidth) / 2.overflow: 'hidden', so neighbours show inside the carousel's own bounds and nothing spills out.false, so existing carousels don't move.clampValueand the offset as dependencies. It had[]before, so a change in slide count or width didn't reach it.The branch also keeps the
type HeroCarouselPropsexport from the first take, and has #32 merged in, so it's based on #32.Testing:
type:check,lint,testand Prettier. On the iOS simulator in the Ascension app (Expo SDK 57, Reanimated 4.5.1), with two 337pt slides on a 402pt screen:Related Tickets/Issues
Based on #32 and to be merged after it. Used by the parishes carousel in the Ascension app.
🤖 Generated with Claude Code
📦 Published PR as canary version:
0.1.16--canary.31.67831fd.0✨ Test out this PR locally via:
npm install @strv/react-native-hero-carousel@0.1.16--canary.31.67831fd.0 # or yarn add @strv/react-native-hero-carousel@0.1.16--canary.31.67831fd.0