React-native-sooji-slider NPM

react-native-sooji-slider

This project includes some sliders using PanResponder functions, Animated and Easing.

Demo :

alt tag

Slider with lots of customize props

Install :

npm i react-native-sooji-slider --save

You can import Slider and set your own customize props to slider like below :

import Slider from 'react-native-sooji-slider';

<Slider
    minNeededMove={45} //User couldn't change current slider by this amount of movement

    allSlidersCustomStyle={{opacity: 1}} // custom slider for the patent of all sliders, which is as long as sum of all widhts of slides
    wrapperCustomStyle={{opacity: 1}} // custom style for wrapper (background of slider)
    sliderCustomStyle={{opacity: 1}} // custom style for slides

    easing={Easing.elastic(1)} // for custom easing you should import Easing from React

    slideWidth={width - 100}
    slideBorderRadius={13}
    slideHeight={193}
    slideBackgroundColor={'white'}

    wrapperHeight={220}
    wrapperWidth={width - 50}
    wrapperBackgroundColor='rgba(255,255,255,.3)'
    wrapperBorderRadius={15}
>
        <View></View>
        <View></View>
        <View></View>
</Slider>

You can add your slides as children of Slide component. For example in the top instance we have three slides.