VolkenoMakers / react-native-drag-drop

volkeno-react-native-drag-drop

Add it to your project

• Using NPM npm install volkeno-react-native-drag-drop
• or:
• Using Yarn yarn add volkeno-react-native-drag-drop

Usage

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import DragAndDrop from "volkeno-react-native-drag-drop";

export default function App() {
  const [items, setItems] = React.useState([
    { id: 1, text: "Test item 1" },
    { id: 2, text: "Test item 2" },
    { id: 3, text: "Test item 3" },
    { id: 4, text: "Test item 4" },
  ]);
  const [zones, setZones] = React.useState([
    {
      id: 1,
      text: "Test zone 1",
      items: [{ id: 5, text: "Test existing item 5" }],
    },
    {
      id: 2,
      text: "Test zone 2",
    },
  ]);

  return (
    <DragAndDrop
      style={styles.container}
      contentContainerStyle={styles.contentContainerStyle}
      itemKeyExtractor={(item) => item.id}
      zoneKeyExtractor={(zone) => zone.id}
      zones={zones}
      items={items}
      itemsContainerStyle={styles.itemsContainerStyle}
      zonesContainerStyle={styles.zonesContainerStyle}
      onMaj={(zones, items) => {
        setItems(items);
        setZones(zones);
      }}
      itemsInZoneStyle={styles.itemsInZoneStyle}
      renderItem={(item) => {
        return (
          <View style={styles.dragItemStyle}>
            <Text style={styles.dragItemTextStyle}>{item.text}</Text>
          </View>
        );
      }}
      renderZone={(zone, children, hover) => {
        return (
          <View
            style={{
              ...styles.dragZoneStyle,
              backgroundColor: hover ? "#E2E2E2" : "#FFF",
            }}
          >
            <Text stylae={styles.dragZoneTextStyle}>{zone.text}</Text>
            {children}
          </View>
        );
      }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  itemsInZoneStyle: {
    width: "100%",
  },
  contentContainerStyle: {
    padding: 20,
    paddingTop: 40,
  },
  itemsContainerStyle: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
    alignItems: "center",
  },
  zonesContainerStyle: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
  },
  dragItemStyle: {
    borderColor: "#F39200",
    borderWidth: 1,
    width: "47%",
    alignItems: "center",
    justifyContent: "center",
    marginVertical: 5,
    backgroundColor: "#F5F5F5",
    padding: 10,
  },
  dragItemTextStyle: {
    color: "#011F3B",
    fontWeight: "700",
    textAlign: "center",
  },
  dragZoneStyle: {
    borderColor: "#F39200",
    borderWidth: 1,
    width: "47%",
    padding: 15,
    minHeight: 130,
    marginVertical: 15,
  },
  dragZoneTextStyle: {
    position: "absolute",
    opacity: 0.2,
    zIndex: 0,
    alignSelf: "center",
    top: "50%",
  },
});

Properties

Property name	Type	Description
style	Object	Custom style for ScrollView component
draggedElementStyle	Object	Custom style for the dragged item
maxItemsPerZone	Number	max items inside a drop area default to null (no limit)
itemsInZoneDisplay	row or collumn	the flex direction for the container of items inside a zone
itemsDisplay	row or collumn	the flex direction for the container of items
itemsNumCollumns	Number	the number of collumns for items
itemsInZoneNumCollumns	Number	the number of collumns for items inside a zone
headerComponent	ReactElement	render a header
footerComponent	ReactElement	render a footer
contentContainerStyle	Object	Custom style for ScrollView contentContainerStyle
itemKeyExtractor	Function	function that take an item as a parameter then return the id of the item
zoneKeyExtractor	Function	function that take a zone as a parameter then return the id of the item
zones	Array	array contains the drops area
items	Array	array contains draggable items
itemsContainerStyle	Object	Custom style for the container of the draggable items
zonesContainerStyle	Object	Custom style for the container of the drop zones
itemsInZoneStyle	Object	Custom style for the item in the drop area
onMaj	Function	The callback function trigger when there are changes on the items or the zones
renderItem	Function	Function to render an item
renderZone	Function	Function to render a drop zone important the chidren parameter is the draggable items in the drop area

Usage with multiple collumns

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import DragAndDrop from "volkeno-react-native-drag-drop";

export function DragDropModule() {
  const [items, setItems] = React.useState([
    { id: 1, text: "A" },
    { id: 2, text: "B" },
    { id: 3, text: "C" },
    { id: 4, text: "D" },
    { id: 5, text: "F" },
    { id: 6, text: "G" },
    { id: 7, text: "H" },
    { id: 8, text: "I" },
    { id: 9, text: "K" },
  ]);
  const [zones, setZones] = React.useState([
    {
      id: 1,
      text: "Test zone 0",
      items: [{ id: 10, text: "L" }],
    },
  ]);

  return (
    <DragAndDrop
      style={styles.container}
      contentContainerStyle={styles.contentContainerStyle}
      itemKeyExtractor={(item) => item.id}
      zoneKeyExtractor={(zone) => zone.id}
      zones={zones}
      items={items}
      onMaj={(zones, items) => {
        setItems(items);
        setZones(zones);
      }}
      itemsInZoneDisplay="row"
      itemsDisplay="row"
      itemsNumCollumns={3}
      itemsInZoneNumCollumns={2}
      renderItem={(item) => {
        return (
          <View style={styles.dragItemStyle}>
            <Text style={styles.dragItemTextStyle}>{item.text}</Text>
          </View>
        );
      }}
      renderZone={(zone, children, hover) => {
        return (
          <View style={{ marginVertical: 10 }}>
            <Text style={{ marginBottom: 5 }}>{zone.text}</Text>
            <View
              style={{
                ...styles.dragZoneStyle,
                minHeight: 150,
                backgroundColor: hover ? "#E2E2E2" : "#FFF",
              }}
            >
              {children}
            </View>
          </View>
        );
      }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  contentContainerStyle: {
    padding: 20,
    paddingTop: 40,
  },
  dragItemStyle: {
    borderColor: "#F39200",
    borderWidth: 1,
    alignItems: "center",
    justifyContent: "center",
    marginVertical: 5,
    backgroundColor: "#F5F5F5",
    padding: 10,
  },
  dragItemTextStyle: {
    color: "#011F3B",
    fontWeight: "700",
    textAlign: "center",
  },
  dragZoneStyle: {
    borderColor: "#F39200",
    borderWidth: 1,
    padding: 15,
  },
});

ISC Licensed