## React Native Swipe Button Component
[](https://github.com/UdaySravanK/RNSwipeButton)
[](https://github.com/UdaySravanK/RNSwipeButton)
[](https://www.npmjs.com/package/rn-swipe-button)
[](https://www.npmjs.com/package/rn-swipe-button)
[](https://www.npmjs.com/package/rn-swipe-button)
[](https://socket.dev/npm/package/rn-swipe-button)
[](https://github.com/UdaySravanK/RNSwipeButton/blob/master/CONTRIBUTING.md)
## Description
- Highly customizable "swipe to submit" category button.
- Generally used in exchange of regular buttons to avoid accidental taps.
- This component works for Android, iOS and Web application.
- Supports RTL out of the box.
- Provides accessiblity support.
- Component has more than 85% test coverge.
- 100% TypeScript
- MIT License
## Installation
```bash
npm install rn-swipe-button --save
# OR
yarn add rn-swipe-button
```
## react-native compatibility
|rn-swipe-button|react-native| react |
|---------------|------------|---------|
| <= v1.3.8 | >= 0.60.5 | >= 16.8.6|
| >= v2.0.0 | >= 0.70.0 | >= 18.1.0|
## Usage
```js
import SwipeButton from 'rn-swipe-button';
```
Web Demo
Custom Title Demo
You can get the code for this from the demo project
Component properties
containerStyles: PropTypes.object,
disabled: PropTypes.bool,
disableResetOnTap: PropTypes.bool,
disabledRailBackgroundColor: PropTypes.string,
disabledThumbIconBackgroundColor: PropTypes.string,
disabledThumbIconBorderColor: PropTypes.string,
enableReverseSwipe: PropTypes.bool,
finishRemainingSwipeAnimationDuration: PropTypes.number,
forceCompleteSwipe: PropTypes.func, // RNSwipeButton will call this function by passing a function as an argument. Calling the returned function will force complete the swipe.
forceReset: PropTypes.func, // RNSwipeButton will call this function by passing a "reset" function as an argument. Calling "reset" will reset the swipe thumb.
height: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
onSwipeFail: PropTypes.func,
onSwipeStart: PropTypes.func,
onSwipeSuccess: PropTypes.func, // Returns a boolean to indicate the swipe completed with real gesture or forceCompleteSwipe was called
railBackgroundColor: PropTypes.string,
railBorderColor: PropTypes.string,
railFillBackgroundColor: PropTypes.string,
railFillBorderColor: PropTypes.string,
railStyles: PropTypes.object,
resetAfterSuccessAnimDelay: PropTypes.number, // This is delay before resetting the button after successful swipe When shouldResetAfterSuccess = true
screenReaderEnabled: PropTypes.bool, // Overrides the internal value
shouldResetAfterSuccess: PropTypes.bool, // If set to true, buttun resets automatically after swipe success with default delay of 1000ms
swipeSuccessThreshold: PropTypes.number, // Ex: 70. Swipping 70% will be considered as successful swipe
thumbIconBackgroundColor: PropTypes.string,
thumbIconBorderColor: PropTypes.string,
thumbIconComponent: PropTypes.node, Pass any react component to replace swipable thumb icon
thumbIconImageSource: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
thumbIconStyles: PropTypes.object,
thumbIconWidth: PropTypes.number,
titleComponent: PropTypes.node, Pass any react component to replace title text element
title: PropTypes.string,
titleColor: PropTypes.string,
titleFontSize: PropTypes.number,
titleMaxFontScale: PropTypes.number, // Ex: 2. will limit font size increasing to 200% when user increases font size in device properties
titleMaxLines: PropTypes.number, // Use other title related props for additional UI customization
titleStyles: PropTypes.object,
width: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
You can also check type definitions in types.d.ts file.
Example
```js
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import SwipeButton from 'rn-swipe-button';
function Example() {
let forceResetLastButton: any = null;
let forceCompleteCallback: any = null;
const [finishSwipeAnimDuration, setFinishSwipeAnimDuration] = useState(400)
const forceCompleteButtonCallback = useCallback(() => {
setFinishSwipeAnimDuration(0)
forceCompleteCallback()
}, [])
const forceResetButtonCallback = useCallback(() => {
forceResetLastButton()
setInterval(() => setFinishSwipeAnimDuration(400) , 1000)
}, [])
return (
{
forceResetLastButton = reset
}}
finishRemainingSwipeAnimationDuration={finishSwipeAnimDuration}
forceCompleteSwipe={ (forceComplete: any) => {
forceCompleteCallback = forceComplete
}}
railBackgroundColor="#9fc7e8"
railStyles={{
backgroundColor: '#147cbb',
borderColor: '#880000FF',
}}
thumbIconBackgroundColor="#FFFFFF"
thumbIconImageSource={require('@/assets/images/react-logo.png')}
title="Slide to unlock"
/>
Force Complete
Force Reset
)
};
```
Please check the demo app for more examples.
### Note
- In accessibility mode this component works like a regular button (double tap to activate)
- We are supporting RTL out of the box. For RTL layouts, swipe button works by default as right to left swipe.
Tech Stack
- Node
- Yarn/NPM
- JavaScript
- TypeScript
- ReactNative
## Contributing
I request more developers from the open-source community to contributing to improve this project. You can find the work by visiting the [project](https://github.com/users/UdaySravanK/projects/1) associated with this repository. You can find issues related to defects, new feature requests and dev only related tasks like writing unit tests.
