glepur / React Native Swipe Gestures
Licence: mit
4-directional swipe gestures for react-native
Stars: ✭ 471
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Swipe Gestures
gestures
A library for normalized events and gesture for desktop and mobile.
Stars: ✭ 31 (-93.42%)
Mutual labels: touch, swipe, gesture, gestures
Swipe Listener
Zero-dependency, minimal swipe-gesture listener for the web.
Stars: ✭ 68 (-85.56%)
Mutual labels: swipe, gestures, touch
Slip
Slip.js — UI library for manipulating lists via swipe and drag gestures
Stars: ✭ 2,421 (+414.01%)
Mutual labels: swipe, touch
Better Gesture
A gesture library use for pc, mobile, vue, and mini programs
Stars: ✭ 419 (-11.04%)
Mutual labels: gesture, touch
Layerjs
layerJS: Javascript UI composition framework
Stars: ✭ 1,825 (+287.47%)
Mutual labels: swipe, touch
Swiped Events
Adds `swiped` events to the DOM in 0.7k of pure JavaScript
Stars: ✭ 249 (-47.13%)
Mutual labels: swipe, touch
Fusuma
Multitouch gestures with libinput driver on Linux
Stars: ✭ 2,870 (+509.34%)
Mutual labels: swipe, gesture
simple gesture detector
Easy to use, reliable and lightweight gesture detector for Flutter apps, exposing simple API for basic gestures
Stars: ✭ 26 (-94.48%)
Mutual labels: swipe, gesture
gesto
You can set up drag, pinch events in any browser.
Stars: ✭ 47 (-90.02%)
Mutual labels: touch, gesture
react-gallery-carousel
Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.
Stars: ✭ 178 (-62.21%)
Mutual labels: touch, swipe
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-75.16%)
Mutual labels: swipe, touch
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+334.39%)
Mutual labels: swipe, touch
React Easy Swipe
Easy handler for common swipe operations
Stars: ✭ 85 (-81.95%)
Mutual labels: swipe, touch
Swipycell
Easy to use UITableViewCell implementing swiping to trigger actions.
Stars: ✭ 230 (-51.17%)
Mutual labels: swipe, gesture
Rxgesture
RxSwift reactive wrapper for view gestures
Stars: ✭ 1,069 (+126.96%)
Mutual labels: swipe, gesture
React Soft Slider
Simple, fast and impartial slider
Stars: ✭ 54 (-88.54%)
Mutual labels: swipe, gesture
Gnome Shell Extended Gestures
Better touchpad gesture handling for GNOME
Stars: ✭ 281 (-40.34%)
Mutual labels: swipe, gesture
react-native-swipe-gestures
React Native component for handling swipe gestures in up, down, left and right direction.
Installation
npm i -S react-native-swipe-gestures
Usage
'use strict';
import React, {Component} from 'react';
import {View, Text} from 'react-native';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
class SomeComponent extends Component {
constructor(props) {
super(props);
this.state = {
myText: 'I\'m ready to get swiped!',
gestureName: 'none',
backgroundColor: '#fff'
};
}
onSwipeUp(gestureState) {
this.setState({myText: 'You swiped up!'});
}
onSwipeDown(gestureState) {
this.setState({myText: 'You swiped down!'});
}
onSwipeLeft(gestureState) {
this.setState({myText: 'You swiped left!'});
}
onSwipeRight(gestureState) {
this.setState({myText: 'You swiped right!'});
}
onSwipe(gestureName, gestureState) {
const {SWIPE_UP, SWIPE_DOWN, SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
this.setState({gestureName: gestureName});
switch (gestureName) {
case SWIPE_UP:
this.setState({backgroundColor: 'red'});
break;
case SWIPE_DOWN:
this.setState({backgroundColor: 'green'});
break;
case SWIPE_LEFT:
this.setState({backgroundColor: 'blue'});
break;
case SWIPE_RIGHT:
this.setState({backgroundColor: 'yellow'});
break;
}
}
render() {
const config = {
velocityThreshold: 0.3,
directionalOffsetThreshold: 80
};
return (
<GestureRecognizer
onSwipe={(direction, state) => this.onSwipe(direction, state)}
onSwipeUp={(state) => this.onSwipeUp(state)}
onSwipeDown={(state) => this.onSwipeDown(state)}
onSwipeLeft={(state) => this.onSwipeLeft(state)}
onSwipeRight={(state) => this.onSwipeRight(state)}
config={config}
style={{
flex: 1,
backgroundColor: this.state.backgroundColor
}}
>
<Text>{this.state.myText}</Text>
<Text>onSwipe callback received gesture: {this.state.gestureName}</Text>
</GestureRecognizer>
);
}
}
export default SomeComponent;
Config
Can be passed within optional config
property.
Params | Type | Default | Description |
---|---|---|---|
velocityThreshold | Number | 0.3 | Velocity that has to be breached in order for swipe to be triggered (vx and vy properties of gestureState ) |
directionalOffsetThreshold | Number | 80 | Absolute offset that shouldn't be breached for swipe to be triggered (dy for horizontal swipe, dx for vertical swipe) |
gestureIsClickThreshold | Number | 5 | Absolute distance that should be breached for the gesture to not be considered a click (dx or dy properties of gestureState ) |
Methods
onSwipe(gestureName, gestureState)
Params | Type | Description |
---|---|---|
gestureName | String | Name of the gesture (look example above) |
gestureState | Object | gestureState received from PanResponder |
onSwipeUp(gestureState)
Params | Type | Description |
---|---|---|
gestureState | Object | gestureState received from PanResponder |
onSwipeDown(gestureState)
Params | Type | Description |
---|---|---|
gestureState | Object | gestureState received from PanResponder |
onSwipeLeft(gestureState)
Params | Type | Description |
---|---|---|
gestureState | Object | gestureState received from PanResponder |
onSwipeRight(gestureState)
Params | Type | Description |
---|---|---|
gestureState | Object | gestureState received from PanResponder |
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].