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:

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="Geeksforgeeks!"
                    paragraph="A Computer Science portal for geeks.
                               It contains well written, well thought
                               and well explained computer science and
                                programming articles,"
                />
                <DragAndDropCard
                    heading="Geeksforgeeks!!"
                    paragraph="A Computer Science portal for geeks.
                               It contains well written, well thought
                               and well explained computer science and
                               programming articles,"
                />
                <DragAndDropCard
                    heading="Geeksforgeeks!!!"
                    paragraph="A Computer Science portal for geeks.
                              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:

How to Implement Drag and Drop Functionality in React Native

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.geeksforgeeks.org/wp-content/uploads/20230721212132/Geeksforgeeks-logo.png"
            />
            <DragAndDropImage
                imageUrl=
"https://media.geeksforgeeks.org/wp-content/uploads/20230721212159/gfg-logo.jpeg"
            />
            <DragAndDropImage
                imageUrl=
"https://media.geeksforgeeks.org/wp-content/uploads/20230721212132/Geeksforgeeks-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:

How to Implement Drag and Drop Functionality in React Native With Images