1.0.6 • Published 2 years ago

rn-slide-to-confirm v1.0.6

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

rn-slide-to-confirm

Slide to confirm button for react native

Demo

npm.io

Installation

  npm i rn-slide-to-confirm

Basic usage

import React, { useState } from 'react';
import { View } from 'react-native';
import SlideToConfirm from 'rn-slide-to-confirm';

const Slider = () => {
    const [sliderState, setSliderState] = useState(false);

    return (
        <View>
            <SlideToConfirm
                unconfimredTipText={"Slide to confirm"}
                unconfirmedTipTextStyle={{
                    color: "white",
                    fontSize: 18
                }}

                confirmedTipText={"Confirmed"}
                confirmedTipTextStyle={{
                    color: "white",
                    fontSize: 18
                }}
                state={sliderState}
                onSlideConfirmed={() =>setSliderState(true)}
                sliderStyle={{
                    justifyContent: 'center',
                    width: 300,
                    height: 40,
                    borderRadius: 8,
                    overflow: 'hidden',
                }}
            />
        </View>
    );
}

export default Slider;

Props

PropTypeDescription
onSlidecallbackcallback while sliding
onSlideEndcallbackcallback when sliding ended
onSlideReleasecallbackcallback when sliding released
onSlideBegincallbackcallback when sliding begin
onSlideConfirmedcallbackcallback when sliding confirmed
onSlideNotConfirmedcallbackcallback when sliding not confirmed
defaultColorstringset default color for all components (default is "#5920BC")
defaultIconSizenumberset icon size (default is 30)
tipAnimationEnablebooleanset slider tip animation (default is true)
tipTextSlideAnimEnablebooleanset tip text animation (default is true)
sliderTipDurationnumberduration time for slide tip animation (default is 300)
sliderTipDistanceFromLeftnumberdistance from left when slide tip animation started (default is 40)
goToBackDurationnumberduration time for go back after slide ending or not confirmed (default is 300)
confirmedPercentnumberrange: 0 - 1 , slider will be confirmed at this percent of the width of the slider (default is 0.8)
ballPaddingnumberpadding of slider ball - left and right. this is recommended prop for adding padding to an inside component of the slider (default is 0)
disableOnConfirmedbooleandisables gesture handler after sliding confirmed default(false)
statebooleancurrent state of slider. This is recommended prop for changing state of slider. it helps you to change state after an action with pretty animation (default is false)
unconfimredTipTextstringshown text in slider before confirmed (while slider is unconfimred). default is ""
confirmedTipTextstringshown text in slider while slider is confirmed. default is ""
confirmedTipTextStylestyleconfirmed tip text style
unconfirmedTipTextStylestyleunconfirmed tip text style
sliderStylestylecustom slider container style. Don't forget making overflow:"hidden" in custom style. because inside component of slider can go out of box
sliderButtonComponentcomponentcustom slider button component. you can create your custom inside component of slider container