Package Exports

react-native-reanimated-carousel
react-native-reanimated-carousel/lib/commonjs/index.js
react-native-reanimated-carousel/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-reanimated-carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

English | 简体中文

react-native-reanimated-carousel

Click on the image to see the demo. 🍺

ReactNative community's best use of the carousel component! 🎉🎉🎉

It completely solves this problem for react-native-snap-carousel! More styles and apis in development... Try it
Simple、Infinitely scrolling very smooth、Fully implemented using Reanimated 2!

Reason

The common RN infinite scroll component. It get stuck on a fast slide. Wait for the next element to appear. This component will not have similar problems.Because using a completely different approach so the best performance is achieved.That's why this library was created.

Use react-native-snap-carousel for quick swiping,you can see caton clearly when you reach the junction.(gif 4.6mb)

Compared with react-native-reanimated-carousel,The actual test was ten slides per second, but it didn't show up very well in gif.

Installation

Open a Terminal in the project root and run:

yarn add react-native-reanimated-carousel

Or if you use npm:

npm install react-native-reanimated-carousel

Now we need to install react-native-gesture-handler and react-native-reanimated(>=2.0.0).

EXPO

If use EXPO managed workflow please ensure that the version is greater than 41.Because the old version not support Reanimated(v2)

Usage

import Carousel from 'react-native-reanimated-carousel';

<Carousel<{ color: string }>
    width={width}
    data={[{ color: 'red' }, { color: 'purple' }, { color: 'yellow' }]}
    renderItem={({ color }) => {
        return <View style={{ backgroundColor: color, flex: 1 }} />;
    }}
/>;

Tips

Optimizing
- When rendering a large number of elements, you can use the 'windowSize' property to control how many items of the current element are rendered. The default is full rendering. After testing without this property, frames will drop when rendering 200 empty views. After setting this property, rendering 1000 empty views is still smooth. (The specific number depends on the phone model tested)
RTL
- Support to RTL mode with no more configuration needed. But in RTL mode, need to manually set the autoPlayReverse props for autoplay to control scrolling direction.

Props

name	required	default	types	description
data	✅		T[]	Carousel items data set
renderItem	✅		(data: T, index: number) => React.ReactNode	Render carousel item
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
style	❌	{}	ViewStyle	Carousel container style
defaultIndex	❌	0	number	Default index
autoPlay	❌	false	boolean	Auto play
autoPlayReverse	❌	false	boolean	Auto play reverse playback
autoPlayInterval	❌	1000	autoPlayInterval	Auto play playback interval
mode	❌	defalut	'default'\|'stack'\|'parallax'	Carousel Animated transitions
loop	❌	true	boolean	Carousel loop playback
parallaxScrollingOffset	❌	100	number	When use 'parallax' Layout props,this prop can be control prev/next item offset
parallaxScrollingScale	❌	0.8	number	When use 'parallax' Layout props,this prop can be control prev/next item scale
onSnapToItem	❌		(index: number) => void	Callback fired when navigating to an item
onScrollBegin	❌		() => void	Callback fired when scroll begin
onScrollEnd	❌		(previous: number, current: number) => void	Callback fired when scroll end
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 ...)
animationConfig	❌	{ 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
enableSnap	❌	true	boolean	If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false

Ref

name	types	description
prev	()=>void	Play the last one
loop	()=>void	Play the next one
goToIndex	(index: number, animated?: boolean) => void	Go to index
getCurrentIndex	()=>number	Get current item index

Example

yarn example -- ios
yarn example -- android

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT