feat: support horizontal layout

Closes #42.

Author: omahili

README.md

@@ -2,15 +2,23 @@
 [![GitHub License](https://img.shields.io/github/license/omahili/react-native-reorderable-list)](https://github.com/omahili/react-native-reorderable-list?tab=MIT-1-ov-file#readme)
 [![NPM Version](https://img.shields.io/npm/v/react-native-reorderable-list)](https://www.npmjs.com/package/react-native-reorderable-list?activeTab=versions)
 <br />
-![iOS](https://img.shields.io/badge/platform-iOS-000.svg?logo=apple)
-![Android](https://img.shields.io/badge/platform-Android-3ddc84.svg?logo=android)
+[![iOS](https://img.shields.io/badge/platform-iOS-000.svg?logo=apple)](https://developer.apple.com/ios)
+[![Android](https://img.shields.io/badge/platform-Android-3ddc84.svg?logo=android)](https://www.android.com)
 
 # React Native Reorderable List
 
-A reorderable list for React Native applications, powered by Reanimated 🚀
+A reorderable list for React Native applications, powered by Reanimated 🚀.
 
 ![Demo](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExanBuODMwN29scmxoNXY0MmZkcHpzZnFxYXE5eTVydzBsbHIyY3ZqMyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/T9uQrEnUCijeJOzSs9/giphy.gif)
 
+### Features
+
+- Drag & Drop FlatList
+- Vertical & Horizontal Mode
+- Layout Animations
+- Nested Lists
+- Custom Animations
+
 ## Index
 
 - [Install](#install)
@@ -60,7 +68,7 @@ This component uses a [FlatList](https://reactnative.dev/docs/flatlist) and it e
 | Props                     | Type                                             | Required | Default                    | Description                                                                                                                                                                                                                                                                                                                                                                                                    |
 | ------------------------- | ------------------------------------------------ | -------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | autoscrollThreshold       | `number`                                         | No       | `0.1`                      | Threshold at the extremity of the list that triggers autoscroll when an item is dragged to it. A value of `0.1` means that 10% of the area at the top and 10% at the bottom will trigger autoscroll. Min value: `0`. Max value: `0.4`.                                                                                                                                                                         |
-| autoscrollThresholdOffset | `{top?: number; bottom?: number}`                | No       | `{top: 0, bottom: 0}`      | Amount by which the threshold is offset at the extremety of the list. For example, setting `{top: 50}` will make the autoscroll trigger 50 pixels earlier at the top.                                                                                                                                                                                                                                          |
+| autoscrollThresholdOffset | `{start?: number; end?: number}`                | No       | `{start: 0, end: 0}`      | Amount by which the threshold is offset at the extremety of the list. For example, setting `{start: 50}` will make the autoscroll trigger 50 pixels earlier at the start of the list.                                                                                                                                                                               |
 | autoscrollSpeedScale      | `number`                                         | No       | `1`                        | Scales the autoscroll speed at which the list scrolls when an item is dragged to the scroll areas.                                                                                                                                                                                                                                                                                                             |
 | autoscrollDelay           | `number`                                         | No       | `0` (Android), `100` (iOS) | Delay in between autoscroll triggers. Can be used to tune the autoscroll smoothness. Default values differ between platforms: `0` for Android and `100` for iOS.                                                                                                                                                                                                                                               |
 | autoscrollActivationDelta | `number`                                         | No       | `5`                        | Allows configuring the delta for autoscroll activation when dragging an item in the same direction as the autoscroll. This is particularly useful when an item is dragged within the autoscroll area to account for minor unintentional movements.                                                                                                                                                             |
@@ -78,7 +86,6 @@ This component uses a [FlatList](https://reactnative.dev/docs/flatlist) and it e
 
 The following props from FlatList are not supported:
 
-- horizontal
 - scrollEventThrottle
 - removeClippedSubviews
 - CellRendererComponent

example/src/ActiveItem.tsx

@@ -1,8 +1,8 @@
 import React, {memo, useMemo, useState} from 'react';
-import {ListRenderItemInfo} from 'react-native';
+import {ListRenderItemInfo, StyleSheet} from 'react-native';
 
 import {faker} from '@faker-js/faker';
-import ReorderableList, {
+import {
   ReorderableListReorderEvent,
   reorderItems,
   useIsActive,
@@ -12,19 +12,15 @@ import {
   ItemSeparator,
   ListItem,
   ListItemProps,
+  ReorderableList,
   SeedDataItem,
   usePanGesture,
 } from './common';
 
 export const ActiveItem: React.FC<ListItemProps> = memo(props => {
   const isActive = useIsActive();
 
-  return (
-    <ListItem
-      {...props}
-      description={isActive ? 'ACTIVE' : props.description}
-    />
-  );
+  return <ListItem style={isActive && styles.activeItem} {...props} />;
 });
 
 export const ActiveItemScreen = () => {
@@ -37,6 +33,10 @@ export const ActiveItemScreen = () => {
             width: 50,
             height: 50,
           }),
+          imageWidth: faker.number.int({
+            min: 50,
+            max: 90,
+          }),
           title: faker.book.title(),
           description: faker.book.genre(),
         }),
@@ -69,3 +69,9 @@ export const ActiveItemScreen = () => {
     />
   );
 };
+
+const styles = StyleSheet.create({
+  activeItem: {
+    backgroundColor: 'lightblue',
+  },
+});

example/src/CustomAnimations.tsx

@@ -2,7 +2,7 @@ import React, {useMemo, useState} from 'react';
 import {ListRenderItemInfo, Platform} from 'react-native';
 
 import {Easing, useSharedValue, withTiming} from 'react-native-reanimated';
-import ReorderableList, {
+import {
   ReorderableListCellAnimations,
   ReorderableListDragEndEvent,
   ReorderableListDragStartEvent,
@@ -13,6 +13,7 @@ import ReorderableList, {
 import {
   ItemSeparator,
   ListItem,
+  ReorderableList,
   SeedDataItem,
   usePanGesture,
   useSeedData,

example/src/DragEnable.tsx

@@ -2,12 +2,18 @@ import React, {useCallback, useMemo, useState} from 'react';
 import {Button, ListRenderItemInfo, StyleSheet, View} from 'react-native';
 
 import {Gesture} from 'react-native-gesture-handler';
-import ReorderableList, {
+import {
   ReorderableListReorderEvent,
   reorderItems,
 } from 'react-native-reorderable-list';
 
-import {ItemSeparator, ListItem, SeedDataItem, useSeedData} from './common';
+import {
+  ItemSeparator,
+  ListItem,
+  ReorderableList,
+  SeedDataItem,
+  useSeedData,
+} from './common';
 
 export const DragEnableScreen = () => {
   const seedData = useSeedData();
@@ -58,7 +64,6 @@ export const DragEnableScreen = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingBottom: 32,
   },
   listContentContainer: {
     flexGrow: 1,

example/src/DynamicHeights.tsx example/src/DynamicSizes.tsxexample/src/DynamicHeights.tsx renamed to example/src/DynamicSizes.tsx

@@ -1,20 +1,21 @@
 import React, {useState} from 'react';
 import {ListRenderItemInfo} from 'react-native';
 
-import ReorderableList, {
+import {
   ReorderableListReorderEvent,
   reorderItems,
 } from 'react-native-reorderable-list';
 
 import {
   ItemSeparator,
   ListItem,
+  ReorderableList,
   SeedDataItem,
   usePanGesture,
   useSeedData,
 } from './common';
 
-export const DynamicHeightsScreen = () => {
+export const DynamicSizesScreen = () => {
   const seedData = useSeedData();
   const [data, setData] = useState(seedData);
   const panGesture = usePanGesture();

example/src/FloatingHeaderFooter.tsx

@@ -1,31 +1,38 @@
 import React, {useState} from 'react';
 import {ListRenderItemInfo, Platform, StyleSheet, View} from 'react-native';
 
-import ReorderableList, {
+import {
   ReorderableListReorderEvent,
   reorderItems,
 } from 'react-native-reorderable-list';
 
 import {
   ItemSeparator,
   ListItem,
+  ReorderableList,
   SeedDataItem,
   TitleHighlight,
+  useHorizontal,
   usePanGesture,
   useSeedData,
 } from './common';
 
-const TOP_HEIGHT = 150;
-const BOTTOM_HEIGHT = 100;
+const START_SIZE = 70;
+const END_SIZE = 60;
 
-const contentInset = {top: TOP_HEIGHT, bottom: BOTTOM_HEIGHT};
-const autoscrollThresholdOffset = Platform.select({ios: contentInset});
-const contentOffset = Platform.select({ios: {y: -TOP_HEIGHT, x: 0}});
+const contentInsetVertical = {top: START_SIZE, bottom: END_SIZE};
+const contentInsetHorizontal = {left: START_SIZE, right: END_SIZE};
+const autoscrollThresholdOffset = Platform.select({
+  ios: {start: START_SIZE, end: END_SIZE},
+});
+const contentOffsetVertical = Platform.select({ios: {y: -START_SIZE, x: 0}});
+const contentOffsetHorizontal = Platform.select({ios: {y: 0, x: -START_SIZE}});
 
 export const FloatingHeaderFooterScreen = () => {
   const seedData = useSeedData();
   const [data, setData] = useState(seedData);
   const panGesture = usePanGesture();
+  const {horizontal} = useHorizontal();
 
   const handleReorder = ({from, to}: ReorderableListReorderEvent) => {
     setData(value => reorderItems(value, from, to));
@@ -38,8 +45,11 @@ export const FloatingHeaderFooterScreen = () => {
   return (
     <View style={styles.container}>
       <TitleHighlight
-        title="Floating Top"
-        style={[Platform.select({ios: styles.absoluteContainer}), styles.top]}
+        title="Start"
+        style={[
+          Platform.select({ios: styles.absoluteContainer}),
+          horizontal ? styles.left : styles.top,
+        ]}
       />
       <ReorderableList
         data={data}
@@ -48,15 +58,19 @@ export const FloatingHeaderFooterScreen = () => {
         keyExtractor={item => item.id}
         ItemSeparatorComponent={ItemSeparator}
         autoscrollThresholdOffset={autoscrollThresholdOffset}
-        contentInset={contentInset}
-        contentOffset={contentOffset}
+        contentInset={
+          horizontal ? contentInsetHorizontal : contentInsetVertical
+        }
+        contentOffset={
+          horizontal ? contentOffsetHorizontal : contentOffsetVertical
+        }
         panGesture={panGesture}
       />
       <TitleHighlight
-        title="Floating Bottom"
+        title="End"
         style={[
           Platform.select({ios: styles.absoluteContainer}),
-          styles.bottom,
+          horizontal ? styles.right : styles.bottom,
         ]}
       />
     </View>
@@ -69,17 +83,31 @@ const styles = StyleSheet.create({
   },
   absoluteContainer: {
     position: 'absolute',
-    right: 0,
-    left: 0,
     zIndex: 1,
     opacity: 0.75,
   },
   top: {
     top: 0,
-    height: TOP_HEIGHT,
+    right: 0,
+    left: 0,
+    height: START_SIZE,
   },
   bottom: {
     bottom: 0,
-    height: BOTTOM_HEIGHT,
+    right: 0,
+    left: 0,
+    height: END_SIZE,
+  },
+  left: {
+    top: 0,
+    left: 0,
+    width: START_SIZE,
+    height: '100%',
+  },
+  right: {
+    top: 0,
+    right: 0,
+    width: END_SIZE,
+    height: '100%',
   },
 });

example/src/HeaderFooter.tsx

@@ -1,14 +1,15 @@
 import React, {useState} from 'react';
 import {ListRenderItemInfo} from 'react-native';
 
-import ReorderableList, {
+import {
   ReorderableListReorderEvent,
   reorderItems,
 } from 'react-native-reorderable-list';
 
 import {
   ItemSeparator,
   ListItem,
+  ReorderableList,
   SeedDataItem,
   TitleHighlight,
   usePanGesture,

example/src/Home.tsx

@@ -21,14 +21,19 @@ export const HomeScreen = () => {
       )}
       keyExtractor={item => item.id}
       style={styles.list}
+      contentContainerStyle={styles.listContentContainer}
     />
   );
 };
 
 const styles = StyleSheet.create({
   list: {
+    flex: 1,
     backgroundColor: 'white',
   },
+  listContentContainer: {
+    flexGrow: 1,
+  },
   item: {
     padding: 12,
     backgroundColor: 'white',

example/src/IndexChange.tsx

@@ -2,7 +2,7 @@ import React, {useCallback, useState} from 'react';
 import {ListRenderItemInfo, StyleSheet, View} from 'react-native';
 
 import {runOnJS} from 'react-native-reanimated';
-import ReorderableList, {
+import {
   ReorderableListReorderEvent,
   reorderItems,
 } from 'react-native-reorderable-list';
@@ -11,6 +11,7 @@ import {ReorderableListIndexChangeEvent} from 'src/types';
 import {
   ItemSeparator,
   ListItem,
+  ReorderableList,
   SeedDataItem,
   TitleHighlight,
   usePanGesture,
@@ -74,7 +75,6 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   footer: {
-    height: 80,
-    paddingBottom: 24,
+    height: 60,
   },
 });

example/src/LayoutAnimations/LayoutAnimationsScreen.tsx

@@ -2,13 +2,14 @@ import React, {useCallback, useState} from 'react';
 import {Button, ListRenderItemInfo, StyleSheet, View} from 'react-native';
 
 import {LinearTransition} from 'react-native-reanimated';
-import ReorderableList, {
+import {
   ReorderableListReorderEvent,
   reorderItems,
 } from 'react-native-reorderable-list';
 
 import {
   ItemSeparator,
+  ReorderableList,
   SeedDataItem,
   createDataItem,
   usePanGesture,