react-native-auto-carousel
Version:
A React Native package for displaying a carousel of images or custom views with an autoplay feature.
71 lines (60 loc) • 2.59 kB
Markdown
A React Native module that allows you to show a Carousel of photo/view with autoPlay or swipe.
---
Install
```
yarn add react-native-auto-carousel
```
or
```
npm install react-native-auto-carousel
```
```js
import {Carousel} from 'react-native-auto-carousel';
```
```js
import React from 'react';
import {Dimensions, Image} from 'react-native';
import {Carousel} from 'react-native-auto-carousel';
const DEVICE_WIDTH = Dimensions.get('window').width;
const IMAGES = ['../images/1.png', '../images/2.png', '../images/3.png']
const App = () => {
return (
<Carousel
data={Images}
dotStyle={{
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: '#FFFFFF'
}}
autoPlay={true}
autoPlayTime={500}
renderItem={item => (
<Image
key={item}
src={{uri: item}}
style={{
height: '100%',
width: DEVICE_WIDTH
}}
/>
)}
/>
)}
```
In the data prop you can pass any list which you want to show in the carousel
The renderItem function let you display a component of your choice
| Option | Description |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| data (required) | An array of data which you want to display maybe images, text, objects etc. |
| renderItem (required) | callback which give you access to the indivisual item of data and the component you want to show. |
| autoPlay (options) | Accepts a boolean to enable or disable auto play (true by default) |
| autoPlayTime | The time in milli seconds you want to change the image/view |
| dotStyle |The dots shown on the images which show the count and selected (by default they are white and round) |