Screenshots
\n| iOS | \n\tAndroid | \n \tiOS GIF | \n\t\n\t
\n ![](\"https://github.com/UdaySravanK/RNSwipeButtonDemo/blob/main/assets/images/rn-swipe-button-ios.png\") \n | \n \n ![](\"https://github.com/UdaySravanK/RNSwipeButtonDemo/blob/main/assets/images/rn-swipe-button.png\") \n | \n \n ![](\"https://github.com/UdaySravanK/RNSwipeButtonDemo/blob/main/assets/images/rn-swipe-button.gif\") \n | \n\t
These screenshots are from the demo app.
\n| iOS | \n\tAndroid | \n \tiOS GIF | \n\t\n\t
| \n \n | \n \n \n | \n \n \n | \n\t
These screenshots are from the demo app.
\n\n ![](\"https://github.com/UdaySravanK/RNSwipeButtonDemo/blob/main/assets/images/rn-swipe-button-web.gif\")
\n
\n ![](\"https://github.com/UdaySravanK/RNSwipeButtonDemo/blob/main/assets/images/rn-swipe-button-custom-title.gif\")
\n
You can get the code for this from the demo project
\n\n\n containerStyles: PropTypes.object,\n disabled: PropTypes.bool,\n disableResetOnTap: PropTypes.bool,\n disabledRailBackgroundColor: PropTypes.string,\n disabledThumbIconBackgroundColor: PropTypes.string,\n disabledThumbIconBorderColor: PropTypes.string,\n enableReverseSwipe: PropTypes.bool,\n finishRemainingSwipeAnimationDuration: PropTypes.number,\n forceCompleteSwipe: PropTypes.func, // RNSwipeButton will call this function by passing a function as an argument. Calling the returned function will force complete the swipe.\n forceReset: PropTypes.func, // RNSwipeButton will call this function by passing a \"reset\" function as an argument. Calling \"reset\" will reset the swipe thumb.\n height: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n onSwipeFail: PropTypes.func,\n onSwipeStart: PropTypes.func,\n onSwipeSuccess: PropTypes.func, // Returns a boolean to indicate the swipe completed with real gesture or forceCompleteSwipe was called\n railBackgroundColor: PropTypes.string,\n railBorderColor: PropTypes.string,\n railFillBackgroundColor: PropTypes.string,\n railFillBorderColor: PropTypes.string,\n railStyles: PropTypes.object,\n resetAfterSuccessAnimDelay: PropTypes.number, // This is delay before resetting the button after successful swipe When shouldResetAfterSuccess = true \n screenReaderEnabled: PropTypes.bool, // Overrides the internal value \n shouldResetAfterSuccess: PropTypes.bool, // If set to true, buttun resets automatically after swipe success with default delay of 1000ms\n swipeSuccessThreshold: PropTypes.number, // Ex: 70. Swipping 70% will be considered as successful swipe\n thumbIconBackgroundColor: PropTypes.string,\n thumbIconBorderColor: PropTypes.string,\n thumbIconComponent: PropTypes.node, Pass any react component to replace swipable thumb icon\n thumbIconImageSource: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n thumbIconStyles: PropTypes.object,\n thumbIconWidth: PropTypes.number,\n titleComponent: PropTypes.node, Pass any react component to replace title text element\n title: PropTypes.string,\n titleColor: PropTypes.string,\n titleFontSize: PropTypes.number,\n titleMaxFontScale: PropTypes.number, // Ex: 2. will limit font size increasing to 200% when user increases font size in device properties\n titleMaxLines: PropTypes.number, // Use other title related props for additional UI customization\n titleStyles: PropTypes.object,\n width: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n\n\n
You can also check type definitions in types.d.ts file.
\n\n
Please check the demo app for more examples.
\n\n