rn-swipe-button

React Native Swipe Button Component

---

npm install rn-swipe-button --save

import SwipeButton from 'rn-swipe-button';

<SwipeButton />

---

Screenshots of Android and iOS

These screenshots are from demo app under examples folder in the repo

---

Component properties

    disabled: PropTypes.bool,
    disabledRailBackgroundColor: PropTypes.string,
    disabledThumbIconBackgroundColor: PropTypes.string,
    disabledThumbIconBorderColor: PropTypes.string,
    height: PropTypes.number,
    onSwipeSuccess: PropTypes.func,
    railBackgroundColor: PropTypes.string,
    railBorderColor: PropTypes.string,
    railFillBackgroundColor: PropTypes.string,
    railFillBorderColor: PropTypes.string,
    swipeSuccessThreshold: PropTypes.number, // Ex: 70. Swipping 70% will be considered as successful swipe
    thumbIconBackgroundColor: PropTypes.string,
    thumbIconBorderColor: PropTypes.string,
    thumbIconImageSource: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
    ]),
    title: PropTypes.string,
    titleColor: PropTypes.string,
    titleFontSize: PropTypes.number,
    width: PropTypes.number,

---

Code for above screenshots

import React, {Fragment} from 'react';
import {Text, ToastAndroid} from 'react-native';
import thumbIcon from './assets/thumbIcon.png';

import SwipeButton from 'rn-swipe-button';

const App = () => {
  return (
    <View style={{padding: 15}}>
      <Text style={{color: '#700D99', fontSize: 25}}>
        React Native Swipe Button
      </Text>
      <Text style={{color: '#059478', fontSize: 30}}>**************</Text>
      <Text style={{color: '#140866', fontSize: 20}}>
        Set onSwipeSuccess callback and width
      </Text>
      <SwipeButton
        disabled={false}
        onSwipeSuccess={() => {
          ToastAndroid.showWithGravity(
            'Submitted successfully!',
            ToastAndroid.SHORT,
            ToastAndroid.CENTER,
          );
        }}
      />
      <Text style={{color: '#140866', fontSize: 20}}>
        Enabled and thumb icon
      </Text>
      <SwipeButton thumbIconImageSource={thumbIcon} />
      <Text style={{color: '#140866', fontSize: 20}}>Disabled</Text>
      <SwipeButton disabled={true} />
      <Text style={{color: '#140866', fontSize: 20}}>Set height</Text>
      <SwipeButton height={25} />
      <Text style={{color: '#140866', fontSize: 20}}>Set height and width</Text>
      <SwipeButton height={35} width={150} title="Swipe" />
    </View>
  );
};