rn-sliding-button

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
rn-sliding-button
18181.1.55 years ago5 years agoMinified + gzip package size for rn-sliding-button in KB

Readme

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

| Prop | Type | Default | Description | ------------- |:----------:|:---------------------:|:------------------ | height | number | | Height of button | slideDirection | string | SlideDirection.RIGHT| Determines which direction to slide. Either SlideDirection.LEFT, SlideDirection.RIGHT, SlideDirection.BOTH. | onSlidingSuccess | function | | Fired when slide succeeds | onSlide | function | | Fired on every movement. Distance of movement is passed as argument. | successfulSlidePercent | number | | Percent of total button width needed to slide before movement is seen as a successful slide. Default is 40.