react-native-carousel-view

react-native carousel, work on both iOS and android, test on RN >= 0.45 (if this work on earlier version, please open an issue. And will add here)

Install

npm install react-native-carousel-view

NOTE: styling in iOS and Android is slightly different

Demo

Android	iOS

Props

type Props = {
  hideIndicators: boolean, // Set to true to hide the indicators
  indicatorColor: string, // Active indicator color
  indicatorSize: number, // Indicator bullet size
  inactiveIndicatorColor: string, // Inactive indicator color
  indicatorAtBottom: boolean, // Set to false to show the indicators at the top
  indicatorOffset: number, // Indicator relative position from top or bottom
  indicatorText: string, // Active indicator content ( You can customize to use any Unicode character )
  inactiveIndicatorText: string, // Inactive indicator content ( You can customize to use any Unicode character )
  width: ?number, // the width of the carousel
  height: number, // the height of the carousel
  initialPage: number, // initial start page
  indicatorSpace: number, // space between each indicator
  animate: boolean, // Enable carousel autoplay
  delay: number, // Set Animation delay between slides
  loop: boolean, // Allow infinite looped animation. Depends on Prop {...animate} set to true.
  contentContainerStyle?: {[attr: string]: any}, // content container style, in `Android` this will pass to ViewPagerAndroid style props, in `iOS` this will pass to ScrollView contentContainerStyle props.
  children: any,
  onPageChange?: (number) => void, // Called when the active page changes
  onScrollBegin?: () => void, // Called when scroll begin
  onScroll?: () => void, // Called while scrolling
}

default props:

static defaultProps = {
  hideIndicators: false,
  indicatorColor: '#000000',
  indicatorSize: 20,
  inactiveIndicatorColor: '#999999',
  indicatorAtBottom: true,
  indicatorOffset: 0,
  indicatorText: '•',
  inactiveIndicatorText: '•',
  width: null,
  height: 200,
  initialPage: 0,
  indicatorSpace: 10,
  animate: true,
  delay: 1000,
  loop: true,
}

Examples

Simple example (iOS and android is slightly different), see in Difference section.


import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  AppRegistry,
} from 'react-native';
import Carousel from 'react-native-carousel-view';

export default class example extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View style={styles.container}>
          <Carousel
            width={375}
            height={300}
            delay={2000}
            indicatorAtBottom={false}
            indicatorSize={20}
            indicatorText="✽"
            indicatorColor="red"
            >
            <View style={styles.contentContainer}>
              <Text>Page 1</Text>
            </View>
            <View style={styles.contentContainer}>
              <Text>Page 2</Text>
            </View>
            <View style={styles.contentContainer}>
              <Text>Page 3</Text>
            </View>
          </Carousel>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  contentContainer: {
    borderWidth: 2,
    borderColor: '#CCC',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

AppRegistry.registerComponent('example', () => example);

Android: Example
iOS: Example

Difference

In Android the carousel effect use ViewPagerAndroid, on the other hand, in iOS use ScrollView. Due to the mechanism difference between iOS and Android so the styles settings is slightly different.

The contentContainerStyle props should be set in different settings if you want to have the same appearance in iOS and Android.

In iOS contentContainerStyle means the container of the child. This is an example.

<Carousel
  width={375}
  height={300} // =====> the container will be height 300
  >
  <View style={{height: 200, width: 300}}> // ===> child height 200, width 300. if the children's height and width is not set width and height from Carousel component will set to children.
    <Text>Page 1</Text>
  </View>
  <View style={{height: 200, width: 300}}> // ===> child height 200, width 300
    <Text>Page 2</Text>
  </View>
  <View style={{height: 200, width: 300}}> // ===> child height 200, width 300
    <Text>Page 3</Text>
  </View>
</Carousel>

but in Android it means it is the children's view style. According to the react-native docs https://facebook.github.io/react-native/docs/viewpagerandroid.html

Container that allows to flip left and right between child views. Each child view of the ViewPagerAndroid will be treated as a separate page and will be stretched to fill the ViewPagerAndroid. It is important all children are s and not composite components. You can set style properties like padding or backgroundColor for each child.

<Carousel
  width={375}
  height={300} // =====> the container will be height 300
  >
  <View style={{height: 200}}> // ===> child height will still be 300, and width will automatically be 375 and can't be changed
    <Text>Page 1</Text>
  </View>
  <View style={{height: 200}}> // ===> child height will still be 300, and width will automatically be 375 and can't be changed
    <Text>Page 2</Text>
  </View>
  <View style={{height: 200}}> // ===> child height will still be 300, and width will automatically be 375 and can't be changed
    <Text>Page 3</Text>
  </View>
</Carousel>

Develop

go to example folder and enter yarn install and yarn run haul

select your platform:

➜  example git:(master) yarn run haul
yarn run v0.27.5
$ haul start
? Select platform to bundle for (Use arrow keys)
❯ ios - Serves iOS bundle
  android - Serves Android bundle
  all - Serves both platforms

and run react-native run-ios or react-native run-android to open simulators.

NOTE

this repo is original from https://github.com/nick/react-native-carousel with lots of improvements.

License

Apache 2.0

chilijung / react-native-carousel-view

readme