Quick Start
You can find below a minimal example of a working app using react-native-dnd
.
Most of the time you will want to create custom Draggable
and Droppable
components that you can use in your app.
// src/App.tsx
import { DndProvider, DndProviderProps, Draggable, Droppable } from "@mgcrea/react-native-dnd";
import type { FunctionComponent } from "react";
import { SafeAreaView, StyleSheet, Text } from "react-native";
import { GestureHandlerRootView, State } from "react-native-gesture-handler";
export const App: FunctionComponent = () => {
const handleDragEnd: DndProviderProps["onDragEnd"] = ({ active, over }) => {
"worklet";
if (over) {
console.log("onDragEnd", { active, over });
}
};
const handleBegin: DndProviderProps["onBegin"] = () => {
"worklet";
console.log("onBegin");
};
const handleFinalize: DndProviderProps["onFinalize"] = ({ state }) => {
"worklet";
console.log("onFinalize");
if (state !== State.FAILED) {
console.log("onFinalize");
}
};
return (
<SafeAreaView>
<GestureHandlerRootView>
<DndProvider onBegin={handleBegin} onFinalize={handleFinalize} onDragEnd={handleDragEnd}>
<Droppable id="drop" style={styles.box}>
<Text>DROP</Text>
</Droppable>
<Draggable id="drag" style={styles.box}>
<Text>DRAG</Text>
</Draggable>
</DndProvider>
</GestureHandlerRootView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
box: {
margin: 24,
padding: 24,
height: 128,
width: 128,
justifyContent: "center",
alignItems: "center",
backgroundColor: "darkseagreen",
},
});