react-native-simple-dnd

The very simple Drag and Drop library in React Native.

Installation

npm install react-native-simple-dnd

Example

All you have to do is enclose <DnDArea>, <DnDable>!

<DnDArea>
  <DnDable x={10} y={10}>
    // Put the component you want to drag and drop here
  </DnDable>
</DnDArea>

For more details, see example codes.

Props

DnDArea

This component is needed above the DnDable. DnDArea manages all the child DnDables.

* is required.

props	type	description
*keyValues	Array<string>	The DnDable's unique keys. These are managed inside the DnDArea to avoid too much rendering
*children	React.ReactNode	Any components including <DnDable>

Note: This component manages the global state by recoil package. DON'T use the below atom's key in your app.

• DroppableInformationAtom
  • To store the information including a layout for droppable component
• DraggableInformationAtom
  • To store the information including a flag that indicates whether this component is dragging now or not
• DnDAreaAtom
  • Not used now
• ReloadLayoutAtom
  • To store the state and function for refreshing the DnDable component manually

DnDable

When you enclose DnDable with the components, you can drag and drop them!

props	type	description
*keyValue	string	The unique key to manage the component
parentkeyValue	string	The parent unique key to manage the component (This is needed to avoid overlapping during dragging the child DnDable component)
item	T	The custom item
styleParams	U extends object	The custom parameters for style
eventHandlers	DnDEventHandlers<T, U>	The event handlers (See below for more details)
x	number	The x coordinates relative to parent
y	number	The y coordinates relative to parent
reverseX	boolean	Whether the opposite x direction (left) is positive or not
reverseY	boolean	Whether the opposite y direction (up) is positive or not
zIndex	number	The z index
containerStyle	StyleProp<ViewStyle>	The container style
*children	((\_styleParams?: U) => React.ReactElement) or React.ReactElement	The child component or functional component

Event Handlers

function	args	description
onDragStart		The function to be called when the dragging starts
onDragStartForStyleParams	styleParams: U The current style parameters	The function for style parameters to be called when the dragging starts
onDragEnd		The function to be called when the dragging ends
onDragEndForStyleParams	styleParams: U The current style parameters	The function for style parameters to be called when the dragging ends
onDraggedItemHovered	draggedItem: DnDItemType<any> The hovered (dragged) item on this component	The function to be called when a dragged component hovers this component
onDraggedItemHoveredForStyleParams	styleParams?: U The current style parameters draggedItem: DnDItemType<any> The dragged item droppedItem: DnDItemType<T> The dropped item (This component's item)	The function for style parameters to be called when a dragged component hovers this component
onDraggedItemNotHoveredForStyleParams	styleParams?: U The current style parameters draggedItem: DnDItemType<any> The dragged item	The function for style parameters to be called when a dragged component DOESN'T hovers this component
onDropped	draggedItem: DnDItemType<any> The dragged item droppedItem: DnDItemType<T> The dropped item (This component's item)	The function to be called when the dragging component is dropped into droppable component

Note: The styleParams is managed inside the DnDable. That's why you can pass the functional component like this;

<DnDable
  keyValue={'1'}
  x={10}
  y={20}
  styleParams={{ bgColor: childItem.bgColor }} // This parameters will be managed inside <DnDable>
  eventHandlers={{
    onDragStartForStyleParams: () => ({ bgColor: 'yellow' }), // You can change the above parameters by event handlers (postfixed by `ForStyleParams`)
    onDraggedItemHoveredForStyleParams: () => ({
      bgColor: 'black',
    })
  })
>
  {/* You can pass the functional component style like this */}
  {(styleParams) => (
    <View
      style={{
        width: 50,
        height: 50,
        backgroundColor: styleParams?.bgColor,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text>{childItem.title}</Text>
    </View>
  )}
</DnDable>

Development

npm install -g yalc
yalc publish react-native-simple-dnd
cd example
yalc add
npm install -S
npx expo start

• When the codes are updated,

npm run build
yalc push

Referece: Stackoverflow