hanselsen / rnswipebutton

React Native Swipe Button component

React Native Swipe Button Component

---

npm install rn-swipe-button --save

import SwipeButton from 'rn-swipe-button';

const renderSwipeButton = () => (<SwipeButton />)

---

Screenshots of Android and iOS

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

---

Component properties

    containerStyles: PropTypes.object,
    disabled: PropTypes.bool,
    disabledRailBackgroundColor: PropTypes.string,
    disabledThumbIconBackgroundColor: PropTypes.string,
    disabledThumbIconBorderColor: PropTypes.string,
    enableRightToLeftSwipe: PropTypes.bool,
    height: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number,
    ]),
    onSwipeFail: PropTypes.func,
    onSwipeStart: PropTypes.func,
    onSwipeSuccess: PropTypes.func,
    railBackgroundColor: PropTypes.string,
    railBorderColor: PropTypes.string,
    railFillBackgroundColor: PropTypes.string,
    railFillBorderColor: PropTypes.string,
    resetAfterSuccessAnimDelay: PropTypes.number,
    resetAfterSuccessAnimDuration: PropTypes.number,
    screenReaderEnabled: PropTypes.bool,
    shouldResetAfterSuccess: PropTypes.bool,
    swipeSuccessThreshold: PropTypes.number, // Ex: 70. Swipping 70% will be considered as successful swipe
    thumbIconBackgroundColor: PropTypes.string,
    thumbIconBorderColor: PropTypes.string,
    thumbIconComponent: PropTypes.node,
    thumbIconImageSource: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
    ]),
    thumbIconStyles: PropTypes.object
    title: PropTypes.string,
    titleColor: PropTypes.string,
    titleFontSize: PropTypes.number,
    titleStyles: PropTypes.object,
    width: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
    ]),

---

Code for above screenshots

import React from 'react';
import {View, Text} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

import thumbIcon from './assets/thumbIcon.png';
import arrowRight from './assets/arrow-right.png';
import styles from './styles';

import SwipeButton from 'rn-swipe-button';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'swipe status appears here',
    };
  }
  showToastMessage = message => this.setState({message});
  renderSubHeading = heading => (
    <Text style={styles.subHeading}>{heading}</Text>
  );
  renderSwipeStatus = () => (
    <Text style={styles.swipeStatus}>{this.state.message}</Text>
  );
  render() {
    const TwitterIcon = () => <Icon name="twitter" color="#3b5998" size={30} />;
    const facebookIcon = () => (
      <Icon name="facebook" color="#3b5998" size={30} />
    );

    setInterval(
      () => this.setState({message: 'swipe status appears here'}),
      5000,
    );

    return (
      <View style={styles.container}>
        <Text style={styles.title}>React Native Swipe Button</Text>
        {this.renderSwipeStatus()}
        {this.renderSubHeading('Disabled')}
        <SwipeButton thumbIconImageSource={arrowRight} disabled />
        {this.renderSubHeading('Swipe status callbacks')}
        <SwipeButton
          thumbIconImageSource={arrowRight}
          onSwipeStart={() => this.showToastMessage('Swipe started!')}
          onSwipeFail={() => this.showToastMessage('Incomplete swipe!')}
          onSwipeSuccess={() =>
            this.showToastMessage('Submitted successfully!')
          }
        />
        {this.renderSubHeading('Right to left swipe enabled')}
        <SwipeButton
          enableRightToLeftSwipe
          thumbIconBackgroundColor="#FFFFFF"
          thumbIconComponent={facebookIcon}
          title="Slide to unlock"
          onSwipeSuccess={() => this.showToastMessage('Slide success!')}
        />
        {this.renderSubHeading('Set a component as thumb icon')}
        <SwipeButton
          thumbIconBackgroundColor="#FFFFFF"
          thumbIconComponent={TwitterIcon}
          title="Slide to unlock"
        />
        {this.renderSubHeading('Set .png image as thumb icon')}
        <SwipeButton thumbIconImageSource={thumbIcon} />
        {this.renderSubHeading('Set height')}
        <SwipeButton height={25} />
        {this.renderSubHeading('Set height and width')}
        <SwipeButton height={35} width={150} title="Swipe" />
      </View>
    );
  }
}

Note: In accessibility mode this component works like a regular button (double tap to activate)