/react-native-banner-carousel

a carousel component for React Native

Primary LanguageTypeScript

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>
    );
}