react-native-banner-carousel-updated
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

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

    Install

    npm i react-native-banner-carousel-updated

    DownloadsWeekly Downloads

    46

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    20.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • alessio.cancian