react-native-banner-carousel

Swiper component for React Native. Compatible with Android & iOS. Pull requests are very welcome!

Show Case

explore in expo

Install

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

Usage

import React from 'react';
import Carousel from 'react-native-banner-carousel';
import { StyleSheet, Image, View, Dimensions } from 'react-native';

const BannerWidth = Dimensions.get('window').width;
const BannerHeight = 260;

const images = [
    "http://xxx.com/1.png",
    "http://xxx.com/2.png",
    "http://xxx.com/3.png"
];

export default class App extends React.Component {
    renderPage(image, index) {
        return (
            <View key={index}>
                <Image style={{ width: BannerWidth, height: BannerHeight }} source={{ uri: image }} />
            </View>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <Carousel
                    autoplay
                    autoplayTimeout={5000}
                    loop
                    index={0}
                    pageSize={BannerWidth}
                >
                    {images.map((image, index) => this.renderPage(image, index))}
                </Carousel>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        justifyContent: 'center'
    },
});

Properties

Base

| Prop | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | pageSize | windowWidth | number | the size of carousel page, must be the same for all of them. Required with horizontal carousel. | | loop | true | bool | Set to false to disable continuous loop mode. | | index | 0 | number | Index number of initial slide. | | autoplay | true | bool | Set to true enable auto play mode. | | autoplayTimeout | 5000 | number | Delay between auto play transitions (in Millisecond). | | animation | - | func | function that returns a React Native Animated configuration. (animate: Animated.Value, toValue: number) => Animated.CompositeAnimation; | | onPageChanged | - | func | page change callback. (index: number) => void; |

Pagination

| Prop | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | showsPageIndicator | true | bool | Set to true make pagination indicator visible. | | pageIndicatorContainerStyle | - | style | Custom styles will merge with the default styles. | | pageIndicatorStyle | - | style | Custom styles will merge with the default styles. | | activePageIndicatorStyle | - | style | Custom styles will merge with the default styles. | | pageIndicatorOffset | 16 | number | The active page indicator offset when change page. | | renderPageIndicator | - | func | Complete control how to render pagination. (config: PageIndicatorConfig) => JSX.Element;. |

PageIndicatorConfig

interface PageIndicatorConfig {
    pageNum: number;
    childrenNum: number;
    loop: boolean;
    scrollValue: Animated.Value;
}

Custom Pagination Indicator

Here is an example for custom pagination indicator:

renderIndicator(config: PageIndicatorConfig) {
    const { childrenNum, pageNum, loop, scrollValue } = config;
    if (pageNum === 0) {
        return null;
    }

    const indicators: JSX.Element[] = [];
    for (let i = 0; i < pageNum; i++) {
        indicators.push(<View key={i} style={[styles.pageIndicatorStyle, this.props.pageIndicatorStyle]} />);
    }

    let left: Animated.AnimatedInterpolation;

    if (pageNum === 1) {
        left = this.state.scrollValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 0]
        });
    } else if (!loop) {
        left = this.state.scrollValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 16]
        });
    } else {
        left = this.state.scrollValue.interpolate({
            inputRange: [0, 1, 2, childrenNum - 2, childrenNum - 1],
            outputRange: [0, 0, 16, 16 * (childrenNum - 3), 16 * (childrenNum - 3)]
        });
    }

    return (
        <View style={{ position: 'absolute', alignSelf: 'center', flexDirection: 'row', bottom: 10 }}>
            {indicators}
            <Animated.View
                style={[
                    this.props.pageIndicatorStyle, this.props.activePageIndicatorStyle,
                    { left: left }
                ]}
            />
        </View>
    );
}