React Native Swipe Button Component
npm install rn-swipe-button –save
import SwipeButton from ‘rn-swipe-button’;const renderSwipeButton = () => (<SwipeButton />)
Screenshots of Android and iOS
These screenshots are from demo app under examples folder in the repo
Component properties
containerStyles: PropTypes.object, disabled: PropTypes.bool, disabledRailBackgroundColor: PropTypes.string, disabledThumbIconBackgroundColor: PropTypes.string, disabledThumbIconBorderColor: PropTypes.string, enableRightToLeftSwipe: PropTypes.bool, 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, resetAfterSuccessAnimDelay: PropTypes.number, resetAfterSuccessAnimDuration: PropTypes.number, screenReaderEnabled: PropTypes.bool, shouldResetAfterSuccess: PropTypes.bool, swipeSuccessThreshold: PropTypes.number, // Ex: 70. Swipping 70% will be considered as successful swipe thumbIconBackgroundColor: PropTypes.string, thumbIconBorderColor: PropTypes.string, thumbIconComponent: PropTypes.node, 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 from 'react';
import {View, Text} 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';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
message: 'swipe status appears here',
};
}
showToastMessage = message => this.setState({message});
renderSubHeading = heading => (
<Text style={styles.subHeading}>{heading}</Text>
);
renderSwipeStatus = () => (
<Text style={styles.swipeStatus}>{this.state.message}</Text>
);
render() {
const TwitterIcon = () => <Icon name="twitter" color="#3b5998" size={30} />;
const facebookIcon = () => (
<Icon name="facebook" color="#3b5998" size={30} />
);
setInterval(
() => this.setState({message: 'swipe status appears here'}),
5000,
);
return (
<View style={styles.container}>
<Text style={styles.title}>React Native Swipe Button</Text>
{this.renderSwipeStatus()}
{this.renderSubHeading('Disabled')}
<SwipeButton thumbIconImageSource={arrowRight} disabled />
{this.renderSubHeading('Swipe status callbacks')}
<SwipeButton
thumbIconImageSource={arrowRight}
onSwipeStart={() => this.showToastMessage('Swipe started!')}
onSwipeFail={() => this.showToastMessage('Incomplete swipe!')}
onSwipeSuccess={() =>
this.showToastMessage('Submitted successfully!')
}
/>
{this.renderSubHeading('Right to left swipe enabled')}
<SwipeButton
enableRightToLeftSwipe
thumbIconBackgroundColor="#FFFFFF"
thumbIconComponent={facebookIcon}
title="Slide to unlock"
onSwipeSuccess={() => this.showToastMessage('Slide success!')}
/>
{this.renderSubHeading('Set a component as thumb icon')}
<SwipeButton
thumbIconBackgroundColor="#FFFFFF"
thumbIconComponent={TwitterIcon}
title="Slide to unlock"
/>
{this.renderSubHeading('Set .png image as thumb icon')}
<SwipeButton thumbIconImageSource={thumbIcon} />
{this.renderSubHeading('Set height')}
<SwipeButton height={25} />
{this.renderSubHeading('Set height and width')}
<SwipeButton height={35} width={150} title="Swipe" />
</View>
);
}
}
Note: In accessibility mode this component works like a regular button (double tap to activate)