How to Implement Drag and Drop Functionality in React Native ?
In this article, We’ll look at a straightforward technique to build drag-and-drop capabilities in React Native. We aim to enable users to drag and drop elements within a React Native app, allowing them to rearrange components seamlessly using touch gestures.
React Native is a popular platform for developing native iOS and Android mobile apps from a single codebase. It makes it easier to create interesting, high-performing apps. To utilize React Native, first prepare your development environment by installing Node.js, a runtime environment for JavaScript code that extends beyond web browsers.
- Installation: In this article, we will use the Expo CLI edition, which provides a more seamless experience for executing your React Native apps.
- Expo is a JavaScript and React-based mobile app development platform for iOS, Android, and the web. It provides tools and services that help to streamline the development process and enable high-quality apps.
Prerequisites:
- Introduction to React Native
- React Native Components
- useState In React
- Expo CLI
- Node.js and npm (Node Package Manager)
Steps to Create React Native Application:
Step 1: Create React Native Application With Expo CLI
Create a new react native application with Expo CLI by using this command:
npx create-expo-app drag-drop
Step 2: Navigate to the project directory by using this command:
cd drag-drop
Project Structure:
Approach
We’ll use the PanResponder API to manage touch gestures in order to enable drag and drop in React Native. It includes event listeners as well as mechanisms for monitoring and responding to user activities. We’ll make a draggable component that adjusts its screen location based on touch movements. We’ll use the Animated API for the animation to achieve smooth movement. We will accomplish a seamless and interactive drag-and-drop functionality by integrating the PanResponder and Animated API.
Example 1:
App.js
Javascript
import React, { useRef, useState } from 'react' ; import { View, StyleSheet, PanResponder, Animated, Text } from 'react-native' ; const DragAndDropCard = ({ heading, paragraph }) => { // Create a ref to store the position of the card const position = useRef( new Animated.ValueXY()).current; // State to track if the card is being dragged const [dragging, setDragging] = useState( false ); // Create a pan responder to handle touch events const panResponder = useRef( PanResponder.create({ onStartShouldSetPanResponder: () => true , onMoveShouldSetPanResponder: () => true , onPanResponderGrant: () => { // When touch gesture starts, //set dragging to true setDragging( true ); }, onPanResponderMove: Animated.event( [ null , { dx: position.x, dy: position.y, }, ], { useNativeDriver: false } ), onPanResponderRelease: () => { // When touch gesture is released, //set dragging to false setDragging( false ); }, }) ).current; return ( <Animated.View style={[ styles.card, { transform: position.getTranslateTransform(), opacity: dragging ? 0.8 : 1, }, ]} {...panResponder.panHandlers} > <Text style={styles.heading}>{heading}</Text> <Text style={styles.paragraph}>{paragraph}</Text> </Animated.View> ); }; const App = () => { return ( <View style={styles.container}> <View style={styles.cardContainer}> <DragAndDropCard heading= "w3wiki!" paragraph= "A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles," /> <DragAndDropCard heading= "w3wiki!!" paragraph= "A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles," /> <DragAndDropCard heading= "w3wiki!!!" paragraph= "A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles," /> </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center' , alignItems: 'center' , backgroundColor: '#F5F5F5' , }, cardContainer: { marginTop: 20, }, card: { width: '90%' , height: 100, backgroundColor: '#FFF' , justifyContent: 'center' , alignItems: 'flex-start' , paddingHorizontal: 16, paddingVertical: 10, borderRadius: 10, marginBottom: 10, elevation: 5, }, heading: { fontSize: 22, fontWeight: 'bold' , color: "green" , marginBottom: 6, }, paragraph: { fontSize: 14, }, }); export default App; |
Step 4: To execute the React Native application, launch the Terminal or Command Prompt and input the specified command:
npx expo start
To run on Android:
npx react-native run-android
To run on Ios:
npx react-native run-ios
Output:
Example 2: In this example, we will show the drag-and-drop of images.
Javascript
import React, { useRef, useState } from 'react' ; import { View, StyleSheet, PanResponder, Animated, Image } from 'react-native' ; const DragAndDropImage = ({ imageUrl }) => { const position = useRef( new Animated.ValueXY()).current; const [dragging, setDragging] = useState( false ); const panResponder = useRef( PanResponder.create({ onStartShouldSetPanResponder: () => true , onMoveShouldSetPanResponder: () => true , onPanResponderGrant: () => { setDragging( true ); }, onPanResponderMove: Animated.event( [ null , { dx: position.x, dy: position.y, }, ], { useNativeDriver: false } ), onPanResponderRelease: () => { setDragging( false ); }, }) ).current; return ( <Animated.View style={[ styles.imageContainer, { transform: position.getTranslateTransform(), opacity: dragging ? 0.8 : 1, }, ]} {...panResponder.panHandlers} > <Image style={styles.image} source={{ uri: imageUrl }} /> </Animated.View> ); }; const App = () => { return ( <View style={styles.container}> <DragAndDropImage imageUrl= "https://media.w3wiki.net/wp-content/uploads/20230721212132/w3wiki-logo.png" /> <DragAndDropImage imageUrl= "https://media.w3wiki.net/wp-content/uploads/20230721212159/gfg-logo.jpeg" /> <DragAndDropImage imageUrl= "https://media.w3wiki.net/wp-content/uploads/20230721212132/w3wiki-logo.png" /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center' , alignItems: 'center' , backgroundColor: '#F5F5F5' , }, imageContainer: { width: 100, height: 100, justifyContent: 'center' , alignItems: 'center' , margin: 10, }, image: { width: '100%' , height: '100%' , borderRadius: 8, }, }); export default App; |
Output:
Contact Us