Swiper Slider for React Native and Web

react-native-web-swiper

Simple swiper / slider. Works both on React-Native and React-Native-Web.

Installation

$ npm i react-native-web-swiper --save

Basic Usage

import React from "react";
import {View,Text,StyleSheet} from "react-native";
import Swiper from "react-native-web-swiper";

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    slideContainer: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
    slide1: {
        backgroundColor: "rgba(20,20,200,0.3)"
    },
    slide2: {
        backgroundColor: "rgba(20,200,20,0.3)"
    },
    slide3: {
        backgroundColor: "rgba(200,20,20,0.3)"
    },
});

export default class Screen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Swiper>
                    <View style={[styles.slideContainer,styles.slide1]}>
                        <Text>Slide 1</Text>
                    </View>
                    <View style={[styles.slideContainer,styles.slide2]}>
                        <Text>Slide 2</Text>
                    </View>
                    <View style={[styles.slideContainer,styles.slide3]}>
                        <Text>Slide 3</Text>
                    </View>
                </Swiper>
            </View>
        )
    }
}

Loop? AutoPlay?

No. Just per-screen slider / swiper

Properties

Basic

Prop Default Type Description
direction "row" enum("row","column") Horizontal ("row") or vertical ("column") mode
index 0 number Index number of initial slide
onIndexChanged (newIndex) => null func Called when active slide changed
actionMinWidth 0.35 number Minimal part of screen that must be swiped for index change. Default value 0.35 means 35% of slide width (or height if direction="column")

Custom style

Swiper has the following structure

<View style={containerStyle}>
    <View style={swipeAreaStyle}>
        <View style={swipeWrapperStyle}>
            ...
        </View>
        <View style={controlsWrapperStyle}>
            {prevButtonElement || <Text style={prevButtonStyle}>{prevButtonText}</Text>}
            <View style={dotsWrapperStyle}>
                {dotElement || <View style={dotStyle}/>}
                //or
                {activeDotElement || <View style={activeDotStyle}/>}
            </View>
            {nextButtonElement || <Text style={nextButtonStyle}>{nextButtonText}</Text>}
        </View>    
    </View>
</View>

You can override any style

Prop Type
prevButtonElement element
prevButtonStyle Text.propTypes.style
prevButtonText string
nextButtonElement element
nextButtonStyle Text.propTypes.style
nextButtonText string
containerStyle ViewPropTypes.style
swipeAreaStyle ViewPropTypes.style
swipeWrapperStyle ViewPropTypes.style
controlsWrapperStyle ViewPropTypes.style
dotsWrapperStyle ViewPropTypes.style
dotStyle ViewPropTypes.style
activeDotStyle ViewPropTypes.style
dotElement element
activeDotElement element

GitHub