Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
rn-swipe-unlock-button
Advanced tools
react native swipe/slide button component
Weekly downloads
Readme
npm install rn-swipe-unlock-button --save
import SwipeButton from 'rn-swipe-unlock-button';
const renderSwipeButton = () => (<SwipeButton />)iOS | Android | iOS GIF |
These screenshots are from demo app under examples folder in the repo
containerStyles: PropTypes.object, disabled: 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 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 title: PropTypes.string, titleColor: PropTypes.string, titleFontSize: PropTypes.number, titleStyles: PropTypes.object, width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, ]),
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>
</>
);
};
In accessibility mode this component works like a regular button (double tap to activate)
git clone https://github.com/UdaySravanK/RNSwipeButton.git
cd RNSwipeButton/examples/RNSwipeButtonDemo
yarn
To run on an android emulator
yarn android
To run on an ios simulator
yarn ios
pod deintegrate & pod install
FAQs
react native swipe/slide button component
The npm package rn-swipe-unlock-button receives a total of 3 weekly downloads. As such, rn-swipe-unlock-button popularity was classified as not popular.
We found that rn-swipe-unlock-button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.