data |
✅ |
|
T[] |
Carousel items data set |
renderItem |
✅ |
|
(info: { item: T, index: number, animationValue: SharedValue<number> }) => React.ReactElement |
Render carousel item |
defaultScrollOffsetValue |
❌ |
useSharedValue(0) |
boolean |
The default animated value of the carousel. |
autoFillData |
❌ |
true |
boolean |
Auto fill data array to allow loop playback when the loop props is true.([1] => [1, 1, 1];[1, 2] => [1, 2, 1, 2]) |
vertical |
❌ |
false |
boolean |
Layout items vertically instead of horizontally |
width |
vertical ❌ horizontal ✅ |
'100%' |
number | undefined |
Specified carousel item width |
height |
vertical ✅ horizontal ❌ |
'100%' |
number | undefined |
Specified carousel item height |
mode |
❌ |
default |
'horizontal-stack'|'vertical-stack'|'parallax' |
Carousel Animated transitions |
modeConfig |
❌ |
|
|
Different modes correspond to different configurations. For details, see below[modeConfig](#modeConfig Props) |
style |
❌ |
{} |
ViewStyle |
Carousel container style |
defaultIndex |
❌ |
0 |
number |
Default index |
autoPlay |
❌ |
false |
boolean |
Auto play |
autoPlayReverse |
❌ |
false |
boolean |
Auto play reverse playback |
autoPlayInterval |
❌ |
1000 |
number |
Auto play playback interval |
scrollAnimationDuration |
❌ |
500 |
number |
Time a scroll animation takes to finish |
loop |
❌ |
true |
boolean |
Carousel loop playback |
testID |
❌ |
|
string |
Used to locate this view in end-to-end tests |
onSnapToItem |
❌ |
|
(index: number) => void |
Callback fired when navigating to an item |
onScrollBegin |
❌ |
|
() => void |
Callback fired when scroll begin |
onScrollEnd |
❌ |
|
(index: number) => void |
Callback fired when scroll end |
withAnimation |
❌ |
|
{type: 'spring';config: WithSpringConfig;} | {type: 'timing';config: WithTimingConfig;} |
Specifies the scrolling animation effect |
panGestureHandlerProps |
❌ |
{} |
Omit<Partial<PanGestureHandlerProps>,'onHandlerStateChange'> |
PanGestureHandler props |
windowSize |
❌ |
0 |
number |
The maximum number of items that can respond to pan gesture events, 0 means all items will respond to pan gesture events |
onProgressChange |
❌ |
|
onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void |
On progress change. offsetProgress :Total of offset distance (0 390 780 ...); absoluteProgress :Convert to index (0 1 2 ...) |
modeConfig |
❌ |
{ snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} |
{moveSize?: number;stackInterval?: number;scaleInterval?: number;rotateZDeg?: number;snapDirection?: 'left' | 'right';} |
Stack layout animation style |
pagingEnabled |
❌ |
true |
boolean |
When true, the scroll view stops on multiples of the scroll view's size when scrolling |
overscrollEnabled |
❌ |
true |
boolean |
If enabled, the item will scroll to the first placement when scrolling past the edge rather than closing to the last. (previous conditions: loop=false) |
snapEnabled |
❌ |
true |
boolean |
If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false |
enabled |
❌ |
true |
boolean |
when false, Carousel will not respond to any gestures |
customConfig |
❌ |
|
() => {type?: 'negative' | 'positive';viewCount?: number;} |
Custom carousel config |
customAnimation |
❌ |
|
(value: number) => Animated.AnimatedStyleProp |
Custom animations. For details, see belowcustom animation |
maxScrollDistancePerSwipe |
❌ |
|
number |
Maximum offset value for one scroll. If props.vertical = true , this will be maxScrollDistancePerSwipeY . If props.vertical = false , this will be maxScrollDistancePerSwipeX . |