react-native-carousel-banner

a cross-platform (iOS, Android, Web) react native carousel component

react-native-carousel-banner is a React Native component for building a cross-platform carousel.

Highlighted Features:

1. Cross Platform - uniform behaviors among iOS, Android and Web
2. Loop Cycle - support head-to-tail / tail-to-head loop cycle
3. Auto Play - auto play with smooth transition

Install

yarn add react-native-carousel-banner

Usage

a minimally-configured carousel

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

const DATA = [
  '/images/0.jpg',
  '/images/1.jpg',
  '/images/2.jpg',
];


<Carousel data={DATA} roundedSize={5} />

Props

Basic Props

| Prop | Type | Default | Description | |--|--|--| -- | | data | string[] | [] | the item data | | height | number | 170 | height of image | | roundedSize | number | 0 | borderRadius of image | | autoplay | boolean | true | determine whether the auto play mode is enabled or not | | autoplayInterval | number | 5000 | delay between item transitions in milliseconds | | dotColor | string | #f97316 | index dot backgroundColor | | onChange | function | null | callback of index changed |

Props of onChange

| Prop | Type | Default | Description | |--|--|--| -- | | currentIndex | number | 0 | the current page number | | total | number | 0 | the total number of pages |

License

MIT