React Native Swipe Button Component

---

Installation

npm install rn-swipe-button --save
# OR
yarn add rn-swipe-button

Usage

importSwipeButtonfrom'rn-swipe-button';</SwipeButton/>

---

NPM Package

https://www.npmjs.com/package/rn-swipe-button

---

Screenshots

iOS	Android	iOS GIF	Android RTL

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

---

Component properties

containerStyles: PropTypes.object,
disabled: PropTypes.bool,
disableResetOnTap: PropTypes.bool,
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.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 1000msswipeSuccessThreshold: PropTypes.number, // Ex: 70. Swipping 70% will be considered as successful swipethumbIconBackgroundColor: PropTypes.string,
thumbIconBorderColor: PropTypes.string,
thumbIconComponent: PropTypes.node, Pass any react component to replace swipable thumb iconthumbIconImageSource: 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 propertiestitleStyles: PropTypes.object,
width: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),

---

Code for above screenshots

importReact,{useState}from'react';import{SafeAreaView,View,Text,StatusBar,Button}from'react-native';importIconfrom'react-native-vector-icons/FontAwesome';importthumbIconfrom'./assets/thumbIcon.png';importarrowRightfrom'./assets/arrow-right.png';importstylesfrom'./styles';importSwipeButtonfrom'rn-swipe-button';constApp: ()=>React$Node=()=>{const[disableCBButton,setDisableCBButton]=useState(false)constdefaultStatusMessage='swipe status appears here';const[swipeStatusMessage,setSwipeStatusMessage]=useState(defaultStatusMessage,);setInterval(()=>setSwipeStatusMessage(defaultStatusMessage),5000);constupdateSwipeStatusMessage=(message)=>setSwipeStatusMessage(message);constrenderSubHeading=(heading)=>(<Textstyle={styles.subHeading}>{heading}</Text>);letforceResetLastButton=null;constCheckoutButton=()=>{return(<Viewstyle={{width: 100,height: 30,backgroundColor: '#C70039',borderRadius: 5,justifyContent: 'center',alignItems: 'center'}}><Textstyle={{color: '#ffffff'}}>Checkout</Text></View>);}return(<><StatusBarbarStyle="dark-content"/><SafeAreaView><Viewstyle={styles.container}><Textstyle={styles.title}>React Native Swipe Button</Text><Textstyle={styles.swipeStatus}>{swipeStatusMessage}</Text>{renderSubHeading('Disabled')}<SwipeButtonthumbIconImageSource={arrowRight}disabled/>{renderSubHeading('Swipe status callbacks')}<SwipeButtoncontainerStyles={{borderRadius: 5}}height={30}onSwipeFail={()=>updateSwipeStatusMessage('Incomplete swipe!')}onSwipeStart={()=>updateSwipeStatusMessage('Swipe started!')}onSwipeSuccess={()=>updateSwipeStatusMessage('Submitted successfully!')}railBackgroundColor="#31a57c"railStyles={{borderRadius: 5}}thumbIconComponent={CheckoutButton}thumbIconImageSource={arrowRight}thumbIconStyles={{borderRadius: 5}}thumbIconWidth={100}title="Submit order"/>{renderSubHeading('Reverse swipe enabled')}<SwipeButtonenableReverseSwipeonSwipeSuccess={()=>updateSwipeStatusMessage('Slide success!')}railBackgroundColor="#a493d6"thumbIconBackgroundColor="#FFFFFF"title="Slide to unlock"/>{renderSubHeading('Set a component as thumb icon & use forceReset')}<SwipeButtondisableResetOnTapforceReset={reset=>{forceResetLastButton=reset}}railBackgroundColor="#9fc7e8"railStyles={{backgroundColor: '#44000088',borderColor: '#880000FF',}}thumbIconBackgroundColor="#FFFFFF"title="Slide to unlock"/><Viewstyle={{alignItems: 'center',marginBottom: 5}}><ButtononPress={()=>forceResetLastButton&&forceResetLastButton()}title="Force reset"/></View>{renderSubHeading('Set .png image as thumb icon')}<SwipeButtonthumbIconImageSource={thumbIcon}railBackgroundColor="#cfb0dd"/>{renderSubHeading('Set height & reset after successful swipe')}<SwipeButtonheight={25}shouldResetAfterSuccess={true}resetAfterSuccessAnimDelay={1000}/>{renderSubHeading('Set height and width')}<Viewstyle={{flexDirection: 'row',alignItems: 'center'}}><SwipeButtonheight={35}width={200}title="Swipe"disabled={disableCBButton}/><Viewstyle={{marginLeft: 15,width: 150,height: 32}}><ButtononPress={()=>setDisableCBButton(!disableCBButton)}title="Toggle disable"/></View></View></View></SafeAreaView></>);};

---

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.

Tech Stack

• Node
• Yarn
• JavaScript
• TypeScript
• ReactNative

Running example app

1. git clone https://github.com/UdaySravanK/RNSwipeButton.git
2. cd RNSwipeButton/examples/RNSwipeButtonDemo
3. yarn

4. To run on an android emulator

   yarn android
   Make sure of

   • Android Studio is configured
   • Global paths set correctly for Android SDK i.e ANDROID_HOME, tools, platform-tools
   • Java8 is installed
   • At least one emulator is ready

5. To run on an ios simulator

   yarn ios
   Make sure of

   • xcode is configured
   • cocoapods installed
   • If seeing issues then run pod deintegrate & pod install
   • If seeing issues with fonts
     1. Open ios workspace project in xcode
     2. Select RNSwipeButtonDemo
     3. Go to Build phases
     4. Open 'Copy Bundle Resources' and delete all .ttf files