react-native-dnd-like-ios

React Native Drag and Drop like IOS

"react-native-dnd-like-ios" is a powerful JavaScript library for creating captivating animations in your React Native applications. This library empowers developers to effortlessly incorporate smooth and fluid drag-and-drop interactions, inspired by the intuitive iOS user interface.

Intro

Installation

Install the library using npm or Yarn. Open your project's terminal and run one of the following commands:

npm install react-native-dnd-like-ios

or

yarn add react-native-dnd-like-ios

Setup

Add this line to the AndroidManifest.xml file for permissions.

<uses-permission android:name="android.permission.VIBRATE"/>

Quickstart

import React, { useState } from "react";
import { View, Text, Dimensions } from "react-native";
import DnDLikeIOS from "react-native-dnd-like-ios";
const { width, height } = Dimensions.get("window");

const users = [
  { name: "Name_No1" },
  { name: "Name_No2" },
  { name: "Name_No3" },
  { name: "Name_No4" },
  { name: "Name_No5" },
  { name: "Name_No6" },
  { name: "Name_No7" },
];

const _renderItem = (item, index) => {
  return (
    <View
      style={{
        backgroundColor: "rgba(0,0,0,0.4)",
        width: 75,
        height: 75,
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 10,
      }}>
      <Text>{item?.name}</Text>
    </View>
  );
};

const App = () => {
  const [newData, setNewData] = useState([]);

  return (
    <View style={styles.container}>
      <DnDLikeIOS
        parentWidth={width}
        parentHeight={height}
        Item={_renderItem}
        data={users}
        setNewDataSource={setNewData}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#9CD7CB",
  },
});

Document

Prop	Defined	Type
data	List the data used to render each list item.	Array
setNewDataSource	Return the new data when a handler deletes an item in the list.	Function
Item	This is the child component you want to show.	Function
IconDelete	This is the icon delete you want to show.	Function
parentWidth	This is width of your component you want render	Number
parentHeight	This is height of your component you want render	Number
childrenWidth	This is width of your Child item component you want render	Number
childrenHeight	This is height of your Child item component you want render	Number
widthIconDelete	This is width of icon delete	Number
heightIconDelete	This is height of icon delete	Number
radiusIconDelete	This is border radius of icon delete	Number
topIconDelete	This is position top of icon delete	Number
leftIconDelete	This is position left of icon delete	Number
degLeft	This is the value to shake the Child item component to the left	String
degRight	This is the value to shake the Child item component to the right	String
timeoutShake	This is the time at which the shaking stops	Number
durationShakeLeft	This is the time to shake the Child item component to the left	Number
valueShakeRight	This is the value to shake the Child item component to the right	Number
durationShakeRight	This is the time to shake the Child item component to the right	Number
marginChildrenBottom	This is the value to set the margin bottom of the Child item component	Number
marginChildrenRight	This is the value to set the margin right of the Child item component	Number
marginChildrenLeft	This is the value to set the margin left of the Child item component	Number
marginChildrenTop	This is the value to set the margin top of the Child item component	Number

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.