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
Markdown
[](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.

Install the package with NPM.
```sh
npm install rn-sliding-button --save
```
Or with YARN
```sh
yarn install rn-sliding-button
```
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
---
| 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.