Skip to content
a cross platform react native carousel component
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo feat: done Feb 8, 2020
src
test feat: done Feb 8, 2020
.eslintrc.js feat: done Feb 8, 2020
.gitignore
.travis.yml feat: done Feb 8, 2020
README.md
babel.config.js feat: done Feb 8, 2020
package-lock.json fix: import Feb 8, 2020
package.json fix: import Feb 8, 2020
rollup.config.js fix: import Feb 8, 2020
setup-tests.js feat: done Feb 8, 2020

README.md

react-native-x-carousel

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

npm GitHub issues NPM

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

License

MIT

You can’t perform that action at this time.