https://github.com/bakialmaci/react-native-swipe-drag-drop
React Native Swipe, Drag and Drop
https://github.com/bakialmaci/react-native-swipe-drag-drop
drag-and-drop gesture gesture-recognition mobile-development react-native swipe swipe-gestures swiper-slider
Last synced: 12 months ago
JSON representation
React Native Swipe, Drag and Drop
- Host: GitHub
- URL: https://github.com/bakialmaci/react-native-swipe-drag-drop
- Owner: bakialmaci
- License: gpl-3.0
- Created: 2020-07-05T14:56:29.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T10:41:03.000Z (over 3 years ago)
- Last Synced: 2025-04-05T07:11:49.934Z (over 1 year ago)
- Topics: drag-and-drop, gesture, gesture-recognition, mobile-development, react-native, swipe, swipe-gestures, swiper-slider
- Language: Java
- Homepage:
- Size: 1.58 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[Article Link](https://medium.com/@bakialmaci/react-native-swipe-drag-drop-kullan%C4%B1m%C4%B1-dc1454ff93b8)
## Aim
React Native Community haven't published any official document or source to realize drag-drop-swipe touch gestures on a component. I've some experiences on the touch gestures usage on a component some projects so, I've tried to show this features on a simple react native application. I hope it'll help to you.
## Installation
Let's start to install required packages.
```sh
yarn install
```
There are some lines we need to add on the Android side.. This step does not required for IOS..
The lines to be added are indicated with "+".
The path is , _**_android/app/src/main/java/MainActivity.java_**_
```javascript
package com.gesturehandler;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "gestureHandler";
}
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
```
Our example app ready!
```sh
yarn run android
```
We can run it with the above written command on an android emulator.