rn-swipe-unlock-button
v1.0.0
Published
react native swipe/slide button component
Downloads
12
Maintainers
Readme
React Native Swipe Button Component
import React, {useState} from 'react';
import {SafeAreaView, View, Text, StatusBar, Button} 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';
const App: () => React$Node = () => {
const defaultStatusMessage = 'swipe status appears here';
const [swipeStatusMessage, setSwipeStatusMessage] = useState(
defaultStatusMessage,
);
const TwitterIcon = () => <Icon name="twitter" color="#3b5998" size={30} />;
const FacebookIcon = () => <Icon name="facebook" color="#3b5998" size={30} />;
setInterval(() => setSwipeStatusMessage(defaultStatusMessage), 5000);
const updateSwipeStatusMessage = (message) => setSwipeStatusMessage(message);
const renderSubHeading = (heading) => (
<Text style={styles.subHeading}>{heading}</Text>
);
let forceResetLastButton = null;
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<View style={styles.container}>
<Text style={styles.title}>React Native Swipe Button</Text>
<Text style={styles.swipeStatus}>{swipeStatusMessage}</Text>
{renderSubHeading('Disabled')}
<SwipeButton thumbIconImageSource={arrowRight} disabled />
{renderSubHeading('Swipe status callbacks')}
<SwipeButton
thumbIconImageSource={arrowRight}
onSwipeStart={() => updateSwipeStatusMessage('Swipe started!')}
onSwipeFail={() => updateSwipeStatusMessage('Incomplete swipe!')}
onSwipeSuccess={() =>
updateSwipeStatusMessage('Submitted successfully!')
}
/>
{renderSubHeading('Reverse swipe enabled')}
<SwipeButton
enableReverseSwipe
thumbIconBackgroundColor="#FFFFFF"
thumbIconComponent={FacebookIcon}
title="Slide to unlock"
onSwipeSuccess={() => updateSwipeStatusMessage('Slide success!')}
/>
{renderSubHeading('Set a component as thumb icon & use forceReset')}
<SwipeButton
thumbIconBackgroundColor="#FFFFFF"
thumbIconComponent={TwitterIcon}
title="Slide to unlock"
railStyles={{
backgroundColor: '#44000088',
borderColor: '#880000FF',
}}
forceReset={ reset => {
forceResetLastButton = reset
}}
/>
<View style={{ alignItems: 'center', marginBottom: 5 }}>
<Button onPress={() => forceResetLastButton && forceResetLastButton()} title="Force reset" />
</View>
{renderSubHeading('Set .png image as thumb icon')}
<SwipeButton thumbIconImageSource={thumbIcon} />
{renderSubHeading('Set height & reset after successful swipe')}
<SwipeButton height={25} shouldResetAfterSuccess={true} resetAfterSuccessAnimDelay={1000} />
{renderSubHeading('Set height and width')}
<SwipeButton height={35} width={150} title="Swipe" />
</View>
</SafeAreaView>
</>
);
};
Note
In accessibility mode this component works like a regular button (double tap to activate)