All Projects → harpalsinh-jadeja → RNSlidingButton

harpalsinh-jadeja / RNSlidingButton

Licence: other
React Native Button component which support Slide event to perform action.

Programming Languages

javascript
184084 projects - #8 most used programming language
objective c
16641 projects - #2 most used programming language
python
139335 projects - #7 most used programming language
java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to RNSlidingButton

We Swiper
✨ 微信小程序触摸内容滑动解决方案we-swiper
Stars: ✭ 311 (+1536.84%)
Mutual labels:  slide, swipe
Fullpage.js
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
Stars: ✭ 32,974 (+173447.37%)
Mutual labels:  slide, swipe
Pagepiling.js
pagePiling plugin by Alvaro Trigo. Create a scrolling pile of sections. http://alvarotrigo.com/pagePiling/
Stars: ✭ 3,993 (+20915.79%)
Mutual labels:  slide, swipe
Vue Swipe Mobile
😃 A siwpe (touch slider) component for Vue2
Stars: ✭ 97 (+410.53%)
Mutual labels:  slide, swipe
Swipe
Swipe is the most accurate touch slider. Support both React and Angular.
Stars: ✭ 850 (+4373.68%)
Mutual labels:  slide, swipe
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+63436.84%)
Mutual labels:  slide, swipe
Vue Slide Bar
🎢 A Simple Vue Slider Bar Component.
Stars: ✭ 129 (+578.95%)
Mutual labels:  slide
Kittik
Create slides in TypeScript and present them in the terminal using ASCII only!
Stars: ✭ 147 (+673.68%)
Mutual labels:  slide
Slidehub
SlideHub is an Open Source Slide Sharing Application for Azure / AWS
Stars: ✭ 120 (+531.58%)
Mutual labels:  slide
Appintro
Make a cool intro for your Android app.
Stars: ✭ 9,989 (+52473.68%)
Mutual labels:  slide
Nuka Carousel
Pure React Carousel Component
Stars: ✭ 2,607 (+13621.05%)
Mutual labels:  slide
Androidpilelayout
An abnormal horizontal ListView-like pile layout with stretch and contraction effects.
Stars: ✭ 2,104 (+10973.68%)
Mutual labels:  slide
Svelte Carousel
A super lightweight, super simple Carousel for Svelte 3
Stars: ✭ 144 (+657.89%)
Mutual labels:  slide
Verticalslidefragment
vertical slide to switch to the next fragment page, looks like vertical viewpager
Stars: ✭ 1,615 (+8400%)
Mutual labels:  slide
Cs193p 2017 Fall Demo And Solution
it's slide, demo and assignment of cs193p 2017 fall
Stars: ✭ 164 (+763.16%)
Mutual labels:  slide
Xlslidemenu
iOS 仿QQ的左右抽屉效果
Stars: ✭ 122 (+542.11%)
Mutual labels:  slide
Vue Infinite Slide Bar
∞ Infinite slide bar component (no dependency and light weight 1.48 KB)
Stars: ✭ 190 (+900%)
Mutual labels:  slide
Drawer Behavior Flutter
Drawer behavior is a library that provide an extra behavior on drawer, such as, move view or scaling view's height while drawer on slide.
Stars: ✭ 110 (+478.95%)
Mutual labels:  slide
Xlslideswitch
iOS 仿照今日头条滚动列表
Stars: ✭ 136 (+615.79%)
Mutual labels:  slide
Springy facebook rebound
Springy makes Android Property animation easy to use.
Stars: ✭ 176 (+826.32%)
Mutual labels:  slide

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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].