React Native Swipe Button Component

Screenshots

Android	iOS	iOS gif	Android RTL

Component properties

    containerStyles: PropTypes.object,

    disabled: PropTypes.bool,

    disableResetOnTap: PropTypes.bool, // After swipe success, tapping on the button resets it. Set this prop to true to disable this behavior.

    disabledRailBackgroundColor: PropTypes.string,

    disabledThumbIconBackgroundColor: PropTypes.string,

    disabledThumbIconBorderColor: PropTypes.string,

    enableReverseSwipe: 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.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,

    thumbIconWidth: PropTypes.number,

    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.number,

    

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.