rn-swipe-button

React Native Swipe Button Component

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

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

import SwipeButton from 'rn-swipe-button'; 

<SwipeButton />

NPM Package

https://www.npmjs.com/package/rn-swipe-button

Screenshots

iOS	Android	iOS GIF

These screenshots are from the demo app.

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

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 (
    <View>
      <SwipeButton
        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"
      />
      <View style={{ marginBottom: 5, flexDirection: 'row', justifyContent: 'center' }}>
        <Text onPress={forceCompleteButtonCallback}>Force Complete</Text>
        <Text onPress={forceResetButtonCallback}>Force Reset</Text>
      </View>
    </View>
  )
};

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 associated with this repository. You can find issues related to defects, new feature requests and dev only related tasks like writing unit tests.