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 |