# rn-slide-button

> A simple slide button using Reanimated 2 animation library.

Latest version **1.0.3** (published 2022-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-slide-button
pnpm add rn-slide-button
yarn add rn-slide-button
bun add rn-slide-button
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-08-16 |
| First published | 2021-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 117.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Saleh Imran |
| Maintainers | emu075, r3tr0c0d3r |
| Keywords | slide-button, rn-slide-button, react-native-slide-button, slide-to-unlock, slide-to-save, slide-to-verify, slide-to-confirm, swipe-button, rn-swipe-button, react-native-swipe-button, swipe-to-unlock, swipe-to-save, swipe-to-verify, swipe-to-confirm, slidable-button, swipeable-button, swipeable, slidable, slide, swipe |

## Links

- npm: https://www.npmjs.com/package/rn-slide-button
- Repository: https://github.com/r3tr0c0d3r/rn-slide-button
- Homepage: https://github.com/r3tr0c0d3r/rn-slide-button#readme
- Issues: https://github.com/r3tr0c0d3r/rn-slide-button/issues
- npm.io page: https://npm.io/package/rn-slide-button

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.0.3 (latest) — 2022-08-16
- 1.0.2 — 2021-11-11
- 1.0.1 — 2021-11-06
- 1.0.0 — 2021-10-25

## README

# React Native Slide Button

A simple slide button using Reanimated 2 animation library.

## Preview

![@](https://github.com/r3tr0c0d3r/rn-slide-button/blob/master/screenshots/screenshot-rn-slide-button.gif?raw=true)


## Installation

```sh
npm install --save rn-slide-button
```

or

```sh
yarn add rn-slide-button
```

## Dependencies

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

## Usage

```js
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

---
_Source: https://npm.io/package/rn-slide-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._