rn-slide-to-confirm

Slide to confirm button for react native

Demo

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

| Prop | Type | Description | | :-------- | :------- | :------------------------- | | onSlide |callback | callback while sliding | | onSlideEnd |callback | callback when sliding ended | | onSlideRelease |callback | callback when sliding released | | onSlideBegin |callback | callback when sliding begin | | onSlideConfirmed |callback | callback when sliding confirmed | | onSlideNotConfirmed |callback | callback when sliding not confirmed | | defaultColor | string | set default color for all components (default is "#5920BC") | | defaultIconSize | number | set icon size (default is 30) | | tipAnimationEnable |boolean | set slider tip animation (default is true) | | tipTextSlideAnimEnable |boolean | set tip text animation (default is true) | | sliderTipDuration |number | duration time for slide tip animation (default is 300) | | sliderTipDistanceFromLeft |number | distance from left when slide tip animation started (default is 40) | | goToBackDuration | number | duration time for go back after slide ending or not confirmed (default is 300) | | confirmedPercent | number | range: 0 - 1 , slider will be confirmed at this percent of the width of the slider (default is 0.8) | | ballPadding |number | padding of slider ball - left and right. this is recommended prop for adding padding to an inside component of the slider (default is 0) | | disableOnConfirmed |boolean | disables gesture handler after sliding confirmed default(false)| | state |boolean | current 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)| | unconfimredTipText |string | shown text in slider before confirmed (while slider is unconfimred). default is "" | | confirmedTipText |string | shown text in slider while slider is confirmed. default is ""| | confirmedTipTextStyle |style |confirmed tip text style | | unconfirmedTipTextStyle |style | unconfirmed tip text style | | sliderStyle |style | custom slider container style. Don't forget making overflow:"hidden" in custom style. because inside component of slider can go out of box | | sliderButtonComponent |component | custom slider button component. you can create your custom inside component of slider container |