react-native-reanimated-carousel v3.5.1

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

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 }} />;
    }}
/>;

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)

Props

Ref

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