react-native-interactable-swiper

Swiper for ReactNative apps

Install

react-native-interactable-swiper

Then link react-native-interactable.

Usage

import { Swiper, } from 'react-native-interactable-swiper';


export default class UserProfileSwiper extends PureComponent {

    render() {
        return (
            <Swiper
                style={styles.swiper}
                dotStyle={styles.dot}
                activeDotStyle={styles.activeDot}
                paginationStyle={styles.pagination}
                vertical={true}
                onIndexChanged={(index) => { console.log(index); }}
            >
                <View>...</View>
                <View>...</View>
                <View>...</View>
                <View>...</View>
            </Swiper>
        );
    }
}

Props

• onIndexChanged (function) - Called with the new index when the user swiped, or auto-swipe completed

    onIndexChanged={(index) => {}}

• autoplay (boolean) - Set to true enable auto play mode (default false)

    autoplay={true}

• vertical (boolean) - If true, the swiper children are arranged vertically in a column (default false - children are arranged horizontally in a row)

    vertical={true}

• style (StyleSheet object) - Container styles

    style={{...}}

• paginationStyle (StyleSheet object) - Pagination container styles

    paginationStyle={{...}}

• dotStyle (StyleSheet object) - Pagination dots styles

    dotStyle={{...}}

• activeDotStyle (StyleSheet object) - Pagination active dot styles

    activeDotStyle={{...}}

• renderPagination (function) - Complete control how to render pagination with two params (activeIndex, total)

    renderPagination={
        (activeIndex, total) => { 
            return <View>...</View>;
        }
    }

• hidePagination (boolean) - Set to true prevent padination rendering (default false)

    hidePagination={true}