1.1.6 • Published 4 years ago

rn-sliding-button-fix-lifecycle-hooks v1.1.6

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

React Native Sliding Button

npm version

React Native Button component which support Slide event to perform action.It support only slideComplete event not tappe event.

rnslidingbutton

Installation.

Install the package with NPM.

npm install rn-sliding-button --save

Or with YARN

yarn install rn-sliding-button

How to use.

Very simple to use just add this component in your file.

// 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

PropTypeDefaultDescription
heightnumberHeight of button
slideDirectionstringSlideDirection.RIGHTDetermines which direction to slide. Either SlideDirection.LEFT, SlideDirection.RIGHT, SlideDirection.BOTH.
onSlidingSuccessfunctionFired when slide succeeds
onSlidefunctionFired on every movement. Distance of movement is passed as argument.
successfulSlidePercentnumberPercent of total button width needed to slide before movement is seen as a successful slide. Default is 40.