react-native-dragndrop

Screenshots

Getting started

$ npm install react-native-dragndrop --save

Usage

import * as React from 'react';
import { View, Text } from 'react-native';
import { DragAndDropProvider, Draggable, DropView } from 'react-native-dragndrop';

export interface IProps {}
export default function Sample(props: IProps) {
    const [ numbers, setNumbers ] = React.useState<number[]>([1, 2, 3, 4]);
    const [ currentStyle, setCurrentStyle ] = React.useState<any>({});

    const onDrop = (currentNumber: number, selectedNumber: number) => {
        if (currentNumber == selectedNumber) {
            setCurrentStyle(styles.successMatch);
        }
        else {
            setCurrentStyle(styles.failureMatch);
        }
    }

    return (<View style={styles.container}>
        <DragAndDropProvider>
            {numbers.map((w, i) => <DropView key={i}
                onDrop={n => onDrop(n, w)}>
                <Text>{w}</Text>
            </DropView>)}

            <Draggable data={2}>
                <Text style={currentStyle}>2</Text>
            </Draggable>
        </DragAndDropProvider>
    </View>);
}

Implementation

DragAndDropProvider

Makes the use of Draggable and DropView available to any nested components.

DropView

Wrapper to receive a drop event over an existing component.

Props

Draggable

Wrapper to convert a component into a draggable view. It can optionally hold a data prop that will be passed to the drop event.

Props