UNPKG

rn-sliding-button-fix-lifecycle-hooks

Version:

SlidingButton component for react-native, same api on both android and ios.

70 lines (54 loc) 2.03 kB
# React Native Sliding Button [![npm version](https://badge.fury.io/js/rn-sliding-button.svg)](https://badge.fury.io/js/rn-sliding-button) React Native Button component which support Slide event to perform action.It support only slideComplete event not tappe event. ![rnslidingbutton](https://user-images.githubusercontent.com/31007929/34517639-d1fab516-f0a1-11e7-9158-b29bc6fe5591.gif) # Installation. Install the package with NPM. ```sh npm install rn-sliding-button --save ``` Or with YARN ```sh yarn install rn-sliding-button ``` # How to use. Very simple to use just add this component in your file. ```js // import packages import {RNSlidingButton, SlideDirection} from 'rn-sliding-button'; // use in your class onSlideRight = () => { //perform Action on slide success. }; <RNSlidingButton style={{ width: 240 }} height={35} onSlidingSuccess={this.onSlideRight} slideDirection={SlideDirection.RIGHT}> <View> <Text numberOfLines={1} style={styles.titleText}> SLIDE RIGHT TO ACCEPT > </Text> </View> </RNSlidingButton> const styles = StyleSheet.create({ titleText: { fontSize: 17, fontWeight: 'normal', textAlign: 'center', color: '#ffffff' } }); ``` API --- ### SlidingButton | Prop | Type | Default | Description | ------------- |:----------:|:---------------------:|:------------------ | height | number | <required> | Height of button | slideDirection | string | `SlideDirection.RIGHT`| Determines which direction to slide. Either `SlideDirection.LEFT`, `SlideDirection.RIGHT`, `SlideDirection.BOTH`. | onSlidingSuccess | function | <optional> | Fired when slide succeeds | onSlide | function | <optional> | Fired on every movement. Distance of movement is passed as argument. | successfulSlidePercent | number | <optional> | Percent of total button width needed to slide before movement is seen as a successful slide. Default is 40.