react-native-x-carousel v1.0.1
react-native-x-carousel
a cross-platform (
iOS
,Android
,Web
) react native carousel component
Preview
react-native-x-carousel
is a React Native component for building a cross-platform carousel.
Highlighted Features:
- Cross Platform - uniform behaviors among
iOS
,Android
andWeb
- Loop Cycle - support head-to-tail / tail-to-head loop cycle
- Auto Play - auto play with smooth transition
- Fully Customizable - customizable carousel content & pagination
Install
$ npm install react-native-x-carousel --save
Usage
a minimally-configured carousel
import React from 'react'; import { StyleSheet, View, Text } from 'react-native'; import Carousel, { Pagination } from '../src';
const DATA = { text: '#1' }, { text: '#2' }, { text: '#3' }, ;
const App = () => { const renderItem = data => ( {data.text} ); return ( ); };
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, item: { width: 200, height: 200, alignItems: 'center', justifyContent: 'center', backgroundColor: '#dbf3fa', }, });
export default App;
## Props
#### Basic Props
| Prop | Type | Default | Description |
|--|--|--| -- |
| `data` | any[] | `[]` | the item data |
| `renderItem` | (data: any[], index: number) => void | () => {} | function for rendering each item |
| `loop` | boolean | `false` | determine whether the loop mode is enabled or not |
| `autoplay` | boolean | `false` | determine whether the auto play mode is enabled or not |
| `autoplayInterval` | number | `2000` | delay between item transitions in `milliseconds` |
| `pagination` | () => JSX.Element | { render: () => JSX.Element } | `null` | the pagination component |
#### Callback Props
| Prop | Callback Params | Description |
|--|--| -- |
| `onPage` | {<br> prev: number,<br> current: number<br>} | called when page number changes |
## Pagination
#### Default
> 2 pagination components are provided as default
```js
import Carousel, {
Pagination, // dark-colored pagination component
PaginationLight // light-colored pagination component
} from 'react-native-x-carousel';
// ...
const App = () => (
<Carousel
// ...
pagination={PaginationLight}
/>
);
Customize
Your customized pagination component will have access to the following props
Prop | Type | Default | Description |
---|---|---|---|
total | number | 0 | the total number of pages |
currentPage | number | 1 | the current page number |
Dev
The
demo
folder contains a standalone Expo project, which can be used for dev purpose.react-native - 0.61 react-native-web - 0.11.7 react - 16.9
Start Expo
$ npm install $ npm start
Run on
simulator
- type the following command in the
Terminal
after the project is booted up w
forweb
developementa
forandroid
simulatori
foriOS
simulator
- type the following command in the
Run on
device
require the installation of corresponding
iOS client
orandroid client
on the devicescan the QR code from
Terminal
using the device
More on
Expo Guide
Related
- scaffolded by react-native-component-cli
License
MIT