Skip to content
a carousel component for React Native
TypeScript
Branch: master
Clone or download
Latest commit 149d591 Mar 8, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples update example Aug 1, 2017
images first commit Aug 1, 2017
src fix #4 Mar 8, 2018
.gitignore first commit Aug 1, 2017
.npmignore first commit Aug 1, 2017
README.md Fix readme default value for `autoplay` Jan 14, 2018
package.json fix #4 Mar 8, 2018
tsconfig.json first commit Aug 1, 2017

README.md

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>
    );
}
You can’t perform that action at this time.