props.md

Common Props

name	required	default	types	description
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
showLength	❌	data.length - 1	number	The maximum number of items will show in stack
pagingEnabled	❌	true	boolean	When true, the scroll view stops on multiples of the scroll view's size when scrolling
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

modeConfig Props

Parallax

name	required	default	types	description
parallaxScrollingOffset	❌	100	number	control prev/next item offset
parallaxScrollingScale	❌	0.8	number	control prev/current/next item scale
parallaxAdjacentItemScale	❌	parallaxAdjacentItemScale || Math.pow(parallaxScrollingScale, 2)	number	control prev/next item scale

Stack

name	required	default	types	description
showLength	❌	data.length-1	number	Display number
moveSize	❌	screen.width	number	Item translate size
stackInterval	❌	18	number	The spacing of each item
scaleInterval	❌	0.04	number	The scale of each item
opacityInterval	❌	0.1	number	The opacity of each item
rotateZDeg	❌	30	number	The item rotation Angle
snapDirection	❌	'left'	'left'|'right'	Slide direction

Ref

name	types	description
prev	({ count: number, animated: boolean, onFinished?: () => void }) => void	Scroll to previous item, it takes one optional argument (count), which allows you to specify how many items to cross
next	({ count: number, animated: boolean, onFinished?: () => void }) => void	Scroll to next item, it takes one optional argument (count), which allows you to specify how many items to cross
scrollTo	({ index: number, count: number, animated: boolean, onFinished?: () => void }) => void	Use count to scroll to a position where relative to the current position, scrollTo({count:-2}) is equivalent to prev(2), scrollTo({count:2}) is equivalent to next(2). And also can jump to specific position, e.g. scrollTo({index:2,animated:false})
getCurrentIndex	()=>number	Get current item index