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 />

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>
  )
};

Note

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.