react-native-x-carousel

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

Preview

View Live Demo

react-native-x-carousel 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
4. 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 'react-native-x-carousel';

const DATA = [
  { text: '#1' },
  { text: '#2' },
  { text: '#3' },
];

const App = () => {
  const renderItem = data => (
    <View key={data.text} style={styles.item}>
      <Text>{data.text}</Text>
    </View>
  );
  return (
    <View style={styles.container}>
      <Carousel
        pagination={Pagination}
        renderItem={renderItem}
        data={DATA}
      />
    </View>
  );
};

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	{     prev: number,     current: number }	called when page number changes

Pagination

Default

2 pagination components are provided as default

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

1. Start Expo

   $ npm install
   
   $ npm start

2. Run on simulator

   • type the following command in the Terminal after the project is booted up
   • w for web developement
   • a for android simulator
   • i for iOS simulator

3. Run on device

   • require the installation of corresponding iOS client or android client on the device

   • scan the QR code from Terminal using the device

4. More on Expo Guide

Related

• scaffolded by react-native-component-cli

License

MIT