Skip to content

A demo to show how to implement drag & drop functionality into your React Native application using React Native's own PanResponder.

Notifications You must be signed in to change notification settings

mlorencs/react-native-drag-and-drop-demo

Repository files navigation

React Native Drag & Drop using Pan Responders Demo

This project is just a demo how to implement drag & drop functionality into your React Native application using React Native's own PanResponder.

This project was bootstrapped with:

Before running any scripts, make sure you have Yarn installed on your machine and have installed all dependencies:

yarn or yarn install

Available Scripts

Starting the development server


expo start

Expo CLI starts Metro Bundler, which is an HTTP server that compiles the JavaScript code of this app using Babel and serves it to the Expo app. It also pops up Expo Dev Tools, a graphical interface for Expo CLI.

Opening the app on your phone/tablet


  • 🍎 On your iPhone or iPad, open the default Apple "Camera" app and scan the QR code you see in the terminal or in Expo Dev Tools.
  • 🤖 On your Android device, press "Scan QR Code" on the "Projects" tab of the Expo client app and scan the QR code you see in the terminal or in Expo Dev Tools.

Alternative to opening the app on your phone/tablet


expo start --ios

Expo CLI starts Metro Bundler, pops up Expo Dev Tools, and installs and launches the app on the iOS device/emulator.

expo start --android

Expo CLI starts Metro Bundlder, pops up Expo Dev Tools, and installs and launches the app on the Android device/emulator.

expo start --web

Note: Starting in SDK 33 projects bootstrapped with the Expo CLI will have web support from the start. That means web apps can use the same code-base as your existing native app.

Expo CLI starts Metro Bundler, pops up Expo Dev Tools and launches the app on the web browser with Webpack.

Ejecting from Managed Workflow


expo eject

This will download the required dependencies and build native projects under the ios and android directories.

Learn More

You can learn more:

To learn React, check out the React documentation.

About

A demo to show how to implement drag & drop functionality into your React Native application using React Native's own PanResponder.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published