Skip to content

yuanfux/react-native-x-carousel

Repository files navigation

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

About

a cross platform react native carousel component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published