Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
rn-swipe-button-rectangular
Advanced tools
Readme
yarn add rn-swipe-button-rectangular
import SwipeButton from 'rn-swipe-button-rectangular';
const renderSwipeButton = () => (<SwipeButton />)iOS | Android | iOS GIF |
These screenshots are from demo app under examples folder in the repo, however instead of circular corners you will be able to view round rect corners
containerStyles: PropTypes.object, disabled: PropTypes.bool, disabledRailBackgroundColor: PropTypes.string, disabledThumbIconBackgroundColor: PropTypes.string, disabledThumbIconBorderColor: PropTypes.string, enableRightToLeftSwipe: 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('Right to left swipe enabled')}
<SwipeButton
enableRightToLeftSwipe
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 with rectangular round rect corners
The npm package rn-swipe-button-rectangular receives a total of 1 weekly downloads. As such, rn-swipe-button-rectangular popularity was classified as not popular.
We found that rn-swipe-button-rectangular 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
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.