Screenshots

iOS	Android	iOS GIF

These screenshots are from the demo app.

Web Demo

Custom Title Demo

You can get the code for this from the demo project

Component properties

    containerStyles: PropTypes.object,
    disabled: PropTypes.bool,
    disableResetOnTap: PropTypes.bool,
    disabledRailBackgroundColor: PropTypes.string,
    disabledThumbIconBackgroundColor: PropTypes.string,
    disabledThumbIconBorderColor: PropTypes.string,
    enableReverseSwipe: PropTypes.bool,
    finishRemainingSwipeAnimationDuration: PropTypes.number,
    forceCompleteSwipe: PropTypes.func, // RNSwipeButton will call this function by passing a  function as an argument. Calling the returned function will force complete the swipe.
    forceReset: PropTypes.func,  // RNSwipeButton will call this function by passing a "reset" function as an argument. Calling "reset" will reset the swipe thumb.
    height: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number,
    ]),
    onSwipeFail: PropTypes.func,
    onSwipeStart: PropTypes.func,
    onSwipeSuccess: PropTypes.func, // Returns a boolean to indicate the swipe completed with real gesture or forceCompleteSwipe was called
    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 
    screenReaderEnabled: PropTypes.bool, // Overrides the internal value 
    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,
    titleComponent: PropTypes.node, Pass any react component to replace title text element
    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.oneOfType([
      PropTypes.string,
      PropTypes.number,
    ]),

You can also check type definitions in types.d.ts file.

Example