react-native-x2-carousel

1.0.1 • Public • Published

react-native-x2-carousel

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

npm GitHub issues NPM

Install

$ npm install react-native-x2-carousel --save

Usage

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Carousel, { Pagination } from 'react-native-x2-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-x2-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

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-x2-carousel

Weekly Downloads

15

Version

1.0.1

License

MIT

Unpacked Size

21.5 kB

Total Files

12

Last publish

Collaborators

  • xqli