Releases: dohooo/react-native-reanimated-carousel
v5.0.0-beta.5
v5.0.0-beta.4
Patch Changes
-
#883
dd4e867Thanks @dohooo! - Fix four high-confidence issues with TDD-first coverage:- Issue #837: Fix non-loop +
overscrollEnabled={false}behavior so right overdrag is clamped instead of bouncing past bounds. - Issue #855: Harden visible range calculation for invalid runtime sizes (for example,
viewSizebecomingNaN) to avoid blank rendering in non-loop scenarios. - Issue #863: Improve Pagination accessibility defaults and add
paginationItemAccessibilityoverrides forPagination.BasicandPagination.Custom. - Issue #867: Guard
customAnimationoutput by sanitizing style values and normalizingzIndexto finite integers to reduce native crash risk.
Also adds focused regression tests for gesture translation clamping, visibility range fallbacks, pagination accessibility labels, and animation style sanitization.
- Issue #837: Fix non-loop +
v5.0.0-beta.3
Patch Changes
-
#878
79ae0e6Thanks @dohooo! - # Fix gesture blocking when using flex-based sizingBug Fixes
Gesture Blocking with
flex: 1Fixed an issue where gestures were blocked or delayed when using
style={{ flex: 1 }}instead of explicitwidth/heightprops.Root Cause: Race condition between
sizeReady(SharedValue, updates immediately on UI thread) andsize(React state, updates asynchronously). WhensizeReadybecametrue, the React statesizewas still0, causing gesture handlers to incorrectly block input.Solution: All worklet functions now use
resolvedSize.value(SharedValue) instead of React statesizeto ensure consistent synchronization on the UI thread.itemWidth/itemHeight Not Working
Fixed an issue where
itemWidth/itemHeightprops were being ignored - items rendered at container width instead of the specified item dimensions.Root Cause:
ItemLayout.tsxwas prioritizingstyle.widthoveritemWidthprop.Solution: Now correctly prioritizes explicit
itemWidth/itemHeightprops for item sizing.Affected Files
src/components/ScrollViewGesture.tsx- Fixed race condition in gesture handlerssrc/components/ItemLayout.tsx- Fixed itemWidth/itemHeight priority
-
#875
13861acThanks @dohooo! - Fix web documentation examples crash by upgrading react-native-worklets from 0.5.1 to 0.5.2. This resolves the "createSerializableObject should never be called in JSWorklets" error that occurred on web platform.
v5.0.0-beta.2
Minor Changes
-
#873
ffb59aaThanks @dohooo! - # Deprecate width/height props in favor of style-based sizingChanges
Deprecated Props
widthandheightprops are now deprecated. Usestyle={{ width: ..., height: ... }}insteaddefaultScrollOffsetValueis deprecated in favor ofscrollOffsetValue
New Behavior
- Carousel now prioritizes dimensions from
styleprop over legacywidth/heightprops - When both
styleand legacy props are provided,styletakes precedence
Migration
Before (v4 style):
<Carousel width={300} height={200} />
After (v5 style):
<Carousel style={{ width: 300, height: 200 }} />
Scroll offset:
// Before <Carousel defaultScrollOffsetValue={sharedValue} /> // After <Carousel scrollOffsetValue={sharedValue} />
Notes
- Legacy props remain functional for backwards compatibility
- Console warnings will guide migration in development mode
- Full removal planned for next major version
v5.0.0-beta.1
Minor Changes
-
#853
c595958Thanks @dohooo! - - additemWidth/itemHeightprops so horizontal and vertical carousels can define their snapping step explicitly (e.g. to show multiple cards per page)- default behaviour still falls back to the carousel container size or legacy
width/heightprops
- default behaviour still falls back to the carousel container size or legacy
-
#853
c595958Thanks @dohooo! - ## ✨ Style API refreshstylenow controls the outer carousel container (positioning, width/height, margins).- New
contentContainerStylereplacescontainerStylefor styling the scrollable content. widthandheightprops are deprecated; define size viastyleinstead.
Migration Example
// Before <Carousel width={300} height={200} containerStyle={{ paddingHorizontal: 16 }} /> // After <Carousel style={{ width: 300, height: 200 }} contentContainerStyle={{ paddingHorizontal: 16 }} />
- Any layout logic still works; simply move
width/heightintostyleand container tweaks intocontentContainerStyle. contentContainerStyleruns on the JS thread—avoid addingopacity/transformthere if you rely on built-in animations.
Patch Changes
-
#872
12c1a63Thanks @dohooo! - Clamp visible ranges for non-loop overdrag and add test to ensure the first item stays visible when dragging right on the first page. Credits to PR #869 reporter. -
#871
bc7daafThanks @dohooo! - Fix non-loop overscroll direction so tiny positive offsets at the first page no longer wrap to the last page when calling next()/scrollTo(), and add integration coverage for the scenario. Thanks to @hennessyevan for the original report and PR 839 inspiration. -
#866
566bf52Thanks @hennessyevan! - Fix pagination accessibility state by syncing selection with scheduleOnRN instead of reading reanimated values during render, and add coverage to avoid test warnings.
v5.0.0-beta.0
Major Changes
-
🎯 Support for Expo 54 & Dynamic Sizing
✨ Major Features
Dynamic Sizing Support
- Auto-sizing:
widthandheightprops are now optional. Carousel automatically measures container dimensions via layout
Expo 54 Compatibility
- Full support for Expo SDK 54
- Updated dependencies for latest React Native ecosystem
💥 Breaking Changes
Dependencies Update Required
- react-native-reanimated: Upgrade to
^4.1.0(was^3.0.0) - react-native-worklets: New peer dependency
^0.5.1required - react-native-gesture-handler: Minimum version
^2.9.0(no breaking changes)
Migration Steps
- Upgrade Reanimated:
npm install react-native-reanimated@^4.1.0 - Install Worklets:
npm install react-native-worklets@^0.5.1 - Follow Reanimated 4.0 migration guide for any breaking changes
🔧 Technical Improvements
- Replaced deprecated
runOnJSwithscheduleOnRNfrom react-native-worklets - Enhanced test coverage for dynamic sizing scenarios
- Improved overscroll protection logic
- Better error handling for edge cases
📚 Documentation
- Updated installation guide with new dependency requirements
- Added migration guide from v4 to v5
- Enhanced examples showcasing dynamic sizing capabilities
Fixes: #668 - Auto height calculation support
- Auto-sizing:
v4.0.3
Patch Changes
-
#834
1d2767bThanks @dohooo! - Add accessibility support to pagination components and replace deprecated TouchableWithoutFeedback with Pressable- Add comprehensive accessibility props (accessibilityLabel, accessibilityRole, accessibilityHint, accessibilityState) to both Basic and Custom pagination components
- Add carouselName prop to allow descriptive accessibility labels
- Replace TouchableWithoutFeedback with Pressable to remove deprecation warnings
- Improve screen reader support with proper labeling and state information
Co-authored-by: AlexJackson01 alex@example.com
-
#834
1d2767bThanks @dohooo! - Add comprehensive programmatic control documentation- Add new "Programmatic Control" documentation page with detailed examples
- Clarify that there's no React-style controlled component mode
- Update migration guide to use correct terminology and link to new docs
- Provide examples for common use cases: pagination, navigation buttons, dynamic content, auto-advance, and jump-to-item patterns
- Include warnings about race conditions and timing considerations
-
#834
1d2767bThanks @dohooo! - Replace deprecated TouchableWithoutFeedback with Pressable in pagination componentsFixes deprecation warnings by replacing TouchableWithoutFeedback with the recommended Pressable component in both Basic and Custom pagination items. This change maintains the same functionality while using the modern React Native API.
Closes #812
-
#834
1d2767bThanks @dohooo! - Update homepage in package.json
v4.0.2
v4.0.1
v4.0.0
Major Changes
-
#444
56e20c8Thanks @dohooo! - feat: use new RNGH apiUpdates
react-native-gesture-handlerto>=2.9.0and replaces usage ofuseAnimatedGestureHandlerwith the new gesture handler API which supports the new gesture handler web implementation.
Minor Changes
Patch Changes
-
#687
55c55ffThanks @dohooo! - feat: Add containerStyle prop to control the container styles. -
d5de105Thanks @dohooo! - Added missing dependencies for web to work -
#666
2982fcdThanks @dohooo! - fix: typescript error where MeasuredDimension can be null -
#677
00c948bThanks @nmassey! - fix Pagination.Basic and Pagination.Custom usage of TouchableWithoutFeedback.
This fixes press event handler not working correctly. (Thanks to @qwertychouskie for reporting!) -
#600
d9557b2Thanks @dohooo! - Fixed an issue where endWithSpring used outdated data from useSharedValue after onGestureEnd, causing incorrect carousel behavior on direction reversal. -
85f24e7Thanks @dohooo! - Type error property push does not exist on type -
#517
9f3a3d6Thanks @dohooo! - Reduce the amount of work done when rendering data. -
#496
fdeef6bThanks @dohooo! - re-calculate when window size changed in browser. -
#666
32c8c36Thanks @dohooo! - Add <Pagination.Custom/> dot animation. -
#498
096ac75Thanks @dohooo! - re-calculate when window size changed in browser. (re-bump for alpha.3) -
#577
17621caThanks @nmassey! - fix: make gesture onStart/onUpdate/onEnd (et al) callbacks run as worklets again -
#733
3040863Thanks @dohooo! - Add pointerEvents: ‘box-none’ to ItemLayout component to allow touches for children components outside item boundaries -
#494
6b849ecThanks @dohooo! - Removed the reset logic when user change the defaultIndex prop. (We couldn't update the handlerOffset value when user change the defaultIndex. Because the carousel component already be a non-controlled component. So the subsequent changes of defaultIndex will be ignored.) -
#735
848f458Thanks @dohooo! - This PR updates the customAnimation function signature to include an index parameter, allowing users to apply custom animations based on the item’s index. -
#648
0abdb2dThanks @nmassey! - fix app crash when using "onProgressChange" prop as function -
#721
2a8111eThanks @dohooo! - fix: parallax layout with new arch enabled -
#492
978b59fThanks @dohooo! - feat: change the way of PanGestureHandler modification from panGestureHandlerProps to onConfigurePanGesture.e.g.
<Carousel onConfigurePanGesture={(gestureChain) => { gestureChain.activeOffsetX([-10, 10]); }} />
-
#528
139d5e5Thanks @dohooo! - Exported TAnimationStyle types. -
#710
d98bb99Thanks @nmassey! - fix: remove shared value access warning from react-native-reanimated -
#510
b3cc591Thanks @dohooo! - Support to specific direction to auto play. -
#703
564d2f5Thanks @dohooo! - Update homepage in package.json -
#528
b654f43Thanks @dohooo! - Replaced 'onScrollBegin' with 'onScrollStart' to better match gesture callback. -
618d90dThanks @dohooo! - Loss of precision during arithmetic conversion -
#576
a99f069Thanks @nmassey! - fix: rework code to avoid possible flicker when starting pan (panOffset race condition) -
#724
33022e6Thanks @dohooo! - fix: next item function overscolling with overscro...