react native swipe/slide button component
npm install rn-swipe-button``bash
npm install rn-swipe-button --save
yarn add rn-swipe-button
`
|rn-swipe-button|react-native| react |
|---------------|------------|---------|
| <= v1.3.8 | >= 0.60.5 | >= 16.8.6|
| >= v2.0.0 | >= 0.70.0 | >= 18.1.0|
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 (
disableResetOnTap
forceReset={ (reset: any) => {
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.