React Native Slide Button

A simple slide button using Reanimated 2 animation library.

Preview

Installation

npm install --save rn-slide-button

or

yarn add rn-slide-button

Dependencies

yarn add react-native-gesture-handler react-native-reanimated

Usage

import SlideButton from 'rn-slide-button';

// ...
<SlideButton title="Slide To Unlock"/>;
// ...

Component props

prop	type	default	description
width	number	screen width	button width.
height	number	60	button height.
borderRadius	number	30	button corner radius.
completeThreshold	number	70	determinates whether the thumb will reach to the end or to start. (value should be 0-100)
padding	number	5	button content padding.
disabled	boolean	false	changes button touchability.
reverseSlideEnabled	boolean	true	enable/disable thumb's back sliding feature
title	string	Slide to save	button title.
titleStyle	object	object	button title styling.
titleContainerStyle	object	object	button title container styling.
icon	Image/ Element	null	thumb icon.
thumbStyle	object	object	thumb container styling.
containerStyle	object	object	button container styling.
underlayStyle	object	object	thumb underlay view styling.
autoReset	boolean	false	thumb will reset its position if it's set to true
autoResetDelay	number	1080ms	delay time to reset
animation	boolean	false	thum will animate if it's set to true
animationDuration	number	180ms	animation duration time
onSlideStart	func	() => {}	it will be invoked when sliding starts
onSlideEnd	func	() => {}	it will be invoked when sliding ends
onReachedToStart	func	() => {}	it will be invoked when thumb reaches to start
onReachedToEnd	func	() => {}	it will be invoked when thumb reaches to end

License

MIT