feat: render items on web

example/src/App.tsx

@@ -1,23 +1,50 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import { StyleSheet, SafeAreaView, Platform, StatusBar } from 'react-native';
+import {
+  StyleSheet,
+  SafeAreaView,
+  Platform,
+  StatusBar,
+  TouchableOpacity,
+  Text,
+} from 'react-native';
 import { MyDraggableList } from 'react-native-awesome-module';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const getItems = (count: number) =>
   Array.from({ length: count }, (_, k) => k).map((k) => ({
     id: `item-${k}`,
-    content: `item ${k}`,
+    content: { label: `item ${k}`, subtitle: 'test' },
   }));
 
 export default function App() {
   const [items, setItems] = useState(getItems(5));
 
+  const renderItem = ({ item, drag, isActive }: any) => {
+    return (
+      <TouchableOpacity
+        onLongPress={drag}
+        disabled={isActive}
+        style={[
+          styles.rowItem,
+          { backgroundColor: isActive ? '#111111' : item.backgroundColor },
+        ]}
+      >
+        <Text style={styles.text}>{item.content.label}</Text>
+        <Text>{item.content.subtitle}</Text>
+      </TouchableOpacity>
+    );
+  };
+
   return (
     <GestureHandlerRootView style={[styles.container]}>
       <SafeAreaView style={[styles.container, styles.androidSafeArea]}>
-        <MyDraggableList items={items} setData={setItems} />
+        <MyDraggableList
+          items={items}
+          setData={setItems}
+          renderItem={renderItem}
+        />
       </SafeAreaView>
     </GestureHandlerRootView>
   );
@@ -30,4 +57,16 @@ const styles = StyleSheet.create({
   androidSafeArea: {
     paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
   },
+  rowItem: {
+    height: 100,
+    width: 150,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: 'red',
+    fontSize: 24,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
 });

src/MyDraggableList/index.tsx

@@ -1,29 +1,8 @@
 import React from 'react';
-import { Text, StyleSheet, TouchableOpacity } from 'react-native';
-import DraggableFlatList, {
-  ScaleDecorator,
-  type RenderItemParams,
-} from 'react-native-draggable-flatlist';
-import type { Item, Props } from './types';
-
-export const MyDraggableList = ({ items, setData }: Props) => {
-  const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => {
-    return (
-      <ScaleDecorator>
-        <TouchableOpacity
-          onLongPress={drag}
-          disabled={isActive}
-          style={[
-            styles.rowItem,
-            { backgroundColor: isActive ? 'red' : item.backgroundColor },
-          ]}
-        >
-          <Text style={styles.text}>{item.content}</Text>
-        </TouchableOpacity>
-      </ScaleDecorator>
-    );
-  };
+import DraggableFlatList from 'react-native-draggable-flatlist';
+import type { Props } from './types';
 
+export const MyDraggableList = ({ items, setData, renderItem }: Props) => {
   return (
     <DraggableFlatList
       data={items}
@@ -33,18 +12,3 @@ export const MyDraggableList = ({ items, setData }: Props) => {
     />
   );
 };
-
-const styles = StyleSheet.create({
-  rowItem: {
-    height: 100,
-    width: 150,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    color: 'red',
-    fontSize: 24,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-});

src/MyDraggableList/index.web.tsx

@@ -1,50 +1,43 @@
-import React, { useState } from 'react';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import React from 'react';
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  type OnDragEndResponder,
+} from 'react-beautiful-dnd';
 import { View } from 'react-native';
-import type { Item, Props } from './types';
+import type { Props, Item } from './types';
 
 // a little function to help us with reordering the result
-const reorder = (list, startIndex, endIndex) => {
+type ReoderParams = {
+  list: Item[];
+  startIndex: number;
+  endIndex: number;
+};
+
+const reorder = ({ list, startIndex, endIndex }: ReoderParams) => {
   const result = Array.from(list);
   const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
+
+  if (removed !== undefined) {
+    result.splice(endIndex, 0, removed);
+  }
 
   return result;
 };
 
-const grid = 8;
-
-const getItemStyle = (isDragging, draggableStyle) => ({
-  // some basic styles to make the items look a bit nicer
-  userSelect: 'none',
-  padding: grid * 2,
-  margin: `0 0 ${grid}px 0`,
-
-  // change background colour if dragging
-  background: isDragging ? 'lightgreen' : 'grey',
-
-  // styles we need to apply on draggables
-  ...draggableStyle,
-});
-
-const getListStyle = (isDraggingOver) => ({
-  background: isDraggingOver ? 'lightblue' : 'lightgrey',
-  padding: grid,
-  width: 250,
-});
-
-export const MyDraggableList = ({ items, setData }: Props) => {
-  const onDragEnd = (result) => {
+export const MyDraggableList = ({ items, setData, renderItem }: Props) => {
+  const onDragEnd: OnDragEndResponder = (result) => {
     // dropped outside the list
     if (!result.destination) {
       return;
     }
 
-    const reorderedItems = reorder(
-      items,
-      result.source.index,
-      result.destination.index
-    );
+    const reorderedItems = reorder({
+      list: items,
+      startIndex: result.source.index,
+      endIndex: result.destination.index,
+    });
 
     setData(reorderedItems);
   };
@@ -53,24 +46,21 @@ export const MyDraggableList = ({ items, setData }: Props) => {
     <DragDropContext onDragEnd={onDragEnd}>
       <Droppable droppableId="droppable">
         {(provided, snapshot) => (
-          <View
-            {...provided.droppableProps}
-            ref={provided.innerRef}
-            style={getListStyle(snapshot.isDraggingOver)}
-          >
+          <View {...provided.droppableProps} ref={provided.innerRef}>
             {items.map((item, index) => (
               <Draggable key={item.id} draggableId={item.id} index={index}>
                 {(provided, snapshot) => (
                   <div
                     ref={provided.innerRef}
                     {...provided.draggableProps}
                     {...provided.dragHandleProps}
-                    style={getItemStyle(
-                      snapshot.isDragging,
-                      provided.draggableProps.style
-                    )}
                   >
-                    {item.content}
+                    {renderItem({
+                      item,
+                      getIndex: () => 1,
+                      isActive: snapshot.isDragging,
+                      drag: () => {},
+                    })}
                   </div>
                 )}
               </Draggable>

src/MyDraggableList/types.tsx

@@ -1,9 +1,12 @@
+import type { RenderItemParams } from 'react-native-draggable-flatlist';
+
 export type Item = {
   id: string;
-  content: string;
+  content: any;
 };
 
 export type Props = {
   items: Item[];
   setData: (data: Item[]) => void;
+  renderItem: (params: RenderItemParams<Item>) => React.ReactNode;
 };