## React Native Swipe Button Component Rectangular

yarn add rn-swipe-button-rectangular

import SwipeButton from 'rn-swipe-button-rectangular';

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

Screenshots

iOS Android iOS GIF

These screenshots are from demo app under examples folder in the repo, however instead of circular corners you will be able to view round rect corners

Component properties

    containerStyles: PropTypes.object,
    disabled: PropTypes.bool,
    disabledRailBackgroundColor: PropTypes.string,
    disabledThumbIconBackgroundColor: PropTypes.string,
    disabledThumbIconBorderColor: PropTypes.string,
    enableRightToLeftSwipe: PropTypes.bool,
    forceReset: PropTypes.func,  // RNSwipeButton will call this function by passing a "reset" function as argument. Calling "reset" will reset the swipe thumb.
    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,
    railStyles: PropTypes.object,
    resetAfterSuccessAnimDelay: PropTypes.number, // This is delay before resetting the button after successful swipe When shouldResetAfterSuccess = true 
    resetAfterSuccessAnimDuration: PropTypes.number,
    screenReaderEnabled: PropTypes.bool,
    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
    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, {useState} from 'react'; import {SafeAreaView, View, Text, StatusBar, Button} 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'; const App: () => React$Node = () => { const defaultStatusMessage = 'swipe status appears here'; const [swipeStatusMessage, setSwipeStatusMessage] = useState( defaultStatusMessage, ); const TwitterIcon = () => ; const FacebookIcon = () => ; setInterval(() => setSwipeStatusMessage(defaultStatusMessage), 5000); const updateSwipeStatusMessage = (message) => setSwipeStatusMessage(message); const renderSubHeading = (heading) => ( {heading} ); let forceResetLastButton = null; return ( <> React Native Swipe Button {swipeStatusMessage} {renderSubHeading('Disabled')} {renderSubHeading('Swipe status callbacks')} updateSwipeStatusMessage('Swipe started!')} onSwipeFail={() => updateSwipeStatusMessage('Incomplete swipe!')} onSwipeSuccess={() => updateSwipeStatusMessage('Submitted successfully!') } /> {renderSubHeading('Right to left swipe enabled')} updateSwipeStatusMessage('Slide success!')} /> {renderSubHeading('Set a component as thumb icon & use forceReset')} { forceResetLastButton = reset }} />