react-native-sortable-dynamic 0.1.0

package/package.json

@@ -0,0 +1,175 @@
+{
+  "name": "react-native-sortable-dynamic",
+  "version": "0.1.0",
+  "description": "This package provides a highly customizable, animated, and performant sortable grid list component for React Native. It allows users to easily reorder grid items through drag-and-drop gestures, with smooth animations powered by react-native-reanimated and gesture handling by react-native-gesture-handler.",
+  "source": "./src/index.js",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-sortable-dynamic-example",
+    "test": "jest",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AdamLee321/react-native-sortable-dynamic.git"
+  },
+  "author": "Adam Lee <adam@hkc.ie> (https://github.com/AdamLee321)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/AdamLee321/react-native-sortable-dynamic/issues"
+  },
+  "homepage": "https://github.com/AdamLee321/react-native-sortable-dynamic#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-builder-bob": "^0.30.2",
+    "release-it": "^15.0.0",
+    "typescript": "^5.2.2",
+    "react-native-reanimated": "^3.0.0",
+    "react-native-gesture-handler": "^2.0.0"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": "^2.0.0",
+    "react-native-gesture-handler": "^1.10.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off",
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "version": "0.41.2"
+  }
+}

package/src/Config.js

@@ -0,0 +1,81 @@
+import { Dimensions } from 'react-native';
+import { Easing } from 'react-native-reanimated';
+import React, { createContext, useContext } from 'react';
+
+// Get screen width to calculate dynamic sizes
+const { width } = Dimensions.get('window');
+
+// Default configuration for the sortable list
+const defaultConfig = {
+  MARGIN: 10, // Default margin between items
+  COL: 2, // Default number of columns
+  // Default size for each item, calculated based on the number of columns and margin
+  SIZE: width / 2 - 10, // (width / COL - MARGIN)
+};
+
+// Create a Context for the sortable list configuration
+const ConfigContext = createContext(defaultConfig);
+
+// Custom hook to use the sortable configuration context
+export const useSortableConfig = () => useContext(ConfigContext);
+
+// Configuration for animation settings
+export const animationConfig = {
+  easing: Easing.inOut(Easing.ease),
+  duration: 350,
+};
+
+// Helper function to calculate the item's position based on its index
+// This is used to position items in a grid layout
+export const getPosition = (position, COL, SIZE) => {
+  'worklet'; // Necessary for Reanimated 2 to run this function on the UI thread
+  return {
+    x: position % COL === 0 ? 0 : SIZE * (position % COL),
+    y: Math.floor(position / COL) * SIZE,
+  };
+};
+
+// Helper function to determine the new order of items during drag-and-drop
+export const getOrder = (tx, ty, max, COL, SIZE) => {
+  'worklet'; // Necessary for Reanimated 2 to run this function on the UI thread
+  const x = Math.round(tx / SIZE) * SIZE;
+  const y = Math.round(ty / SIZE) * SIZE;
+  const row = Math.max(y, 0) / SIZE;
+  const col = Math.max(x, 0) / SIZE;
+  return Math.min(row * COL + col, max);
+};
+
+/**
+ * SortableListProvider component
+ *
+ * Wrap your sortable list components with this provider to set custom configuration.
+ *
+ * @param {Object} config - Custom configuration to override the default settings.
+ * @param {number} config.MARGIN - Margin between items.
+ * @param {number} config.COL - Number of columns in the grid.
+ * @param {React.ReactNode} children - Child components that will use this configuration.
+ *
+ * Usage:
+ *
+ * <SortableListProvider config={{ MARGIN: 15, COL: 3 }}>
+ *   <YourSortableList />
+ * </SortableListProvider>
+ */
+const SortableListProvider = ({ children, config }) => {
+  // Merge custom config with the default configuration
+  const mergedConfig = {
+    ...defaultConfig,
+    ...config,
+  };
+
+  // Recalculate SIZE based on COL and MARGIN
+  mergedConfig.SIZE = width / mergedConfig.COL - mergedConfig.MARGIN;
+
+  return (
+    <ConfigContext.Provider value={mergedConfig}>
+      {children}
+    </ConfigContext.Provider>
+  );
+};
+
+export default SortableListProvider;

package/src/Item.js

@@ -0,0 +1,196 @@
+import React, { useEffect } from 'react';
+import { Dimensions, StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedGestureHandler,
+  useAnimatedStyle,
+  useAnimatedReaction,
+  withSpring,
+  scrollTo,
+  withTiming,
+  useSharedValue,
+  runOnJS,
+} from 'react-native-reanimated';
+import { PanGestureHandler } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { animationConfig, getOrder, getPosition } from './Config';
+import { useSortableConfig } from './Config';
+
+/**
+ * Item Component
+ *
+ * This component represents a draggable item in the sortable grid. It manages the gesture handling
+ * and animations needed to drag and reorder the item within the grid.
+ *
+ * Props:
+ * @param {React.ReactNode} children - The content to render inside the item.
+ * @param {object} positions - Shared value that contains the current positions of all items.
+ * @param {number} id - Unique identifier for the item.
+ * @param {function} onDragEnd - Callback function triggered when dragging ends.
+ * @param {object} scrollView - Reference to the scroll view for scrolling during drag.
+ * @param {object} scrollY - Shared value representing the current scroll position.
+ * @param {boolean} editing - Whether the list is in editing mode.
+ * @param {boolean} draggable - Whether the item is draggable (default: true).
+ * @param {Array} tiles - Array of tile items used to check reorderable state.
+ */
+
+const Item = ({
+  children,
+  positions,
+  id,
+  onDragEnd,
+  scrollView,
+  scrollY,
+  editing,
+  draggable = true,
+  tiles,
+}) => {
+  // Get safe area insets for accurate height calculation
+  const inset = useSafeAreaInsets();
+  const containerHeight =
+    Dimensions.get('window').height - inset.top - inset.bottom;
+
+  // Get the configuration for columns and size
+  const { COL, SIZE } = useSortableConfig();
+
+  // Calculate content height based on the number of items
+  const contentHeight = (Object.keys(positions.value).length / COL) * SIZE;
+  const isGestureActive = useSharedValue(false); // Whether the item is being actively dragged
+
+  // Calculate initial position of the item
+  const position = getPosition(positions.value[id], COL, SIZE);
+  const translateX = useSharedValue(position.x);
+  const translateY = useSharedValue(position.y);
+
+  // Effect to reset isGestureActive when not in editing mode
+  useEffect(() => {
+    if (!editing) {
+      isGestureActive.value = false;
+    }
+  }, [editing, isGestureActive]);
+
+  // React to changes in the positions object
+  useAnimatedReaction(
+    () => positions.value[id], // Track changes to this item's position
+    (newOrder) => {
+      if (!isGestureActive.value) {
+        const pos = getPosition(newOrder, COL, SIZE);
+        translateX.value = withTiming(pos.x, animationConfig);
+        translateY.value = withTiming(pos.y, animationConfig);
+      }
+    }
+  );
+
+  // Gesture handler for dragging
+  const onGestureEvent = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      if (editing && draggable) {
+        // Store the starting position
+        ctx.x = translateX.value;
+        ctx.y = translateY.value;
+        isGestureActive.value = false; // TODO: Set to false when grouping is implemented
+      }
+    },
+    onActive: ({ translationX, translationY }, ctx) => {
+      if (editing && draggable) {
+        // Calculate new position
+        translateX.value = ctx.x + translationX;
+        translateY.value = ctx.y + translationY;
+
+        // Calculate new order based on position
+        const newOrder = getOrder(
+          translateX.value,
+          translateY.value,
+          Object.keys(positions.value).length - 1,
+          COL,
+          SIZE
+        );
+
+        const oldOrder = positions.value[id];
+        if (newOrder !== oldOrder) {
+          // Find the item to swap positions with
+          const idToSwap = Object.keys(positions.value).find(
+            (key) => positions.value[key] === newOrder
+          );
+
+          // Only swap if the target item is reorderable
+          const targetItem = tiles.find((tile) => tile.id === Number(idToSwap));
+          if (idToSwap && targetItem?.reorderable !== false) {
+            const newPositions = { ...positions.value };
+            newPositions[id] = newOrder;
+            newPositions[idToSwap] = oldOrder;
+            positions.value = newPositions;
+          }
+        }
+
+        // Handle scrolling during drag
+        const lowerBound = scrollY.value;
+        const upperBound = lowerBound + containerHeight - SIZE;
+        const maxScroll = contentHeight - containerHeight;
+        const leftToScrollDown = maxScroll - scrollY.value;
+
+        // Scroll up
+        if (translateY.value < lowerBound) {
+          const diff = Math.min(lowerBound - translateY.value, lowerBound);
+          scrollY.value -= diff;
+          scrollTo(scrollView, 0, scrollY.value, false);
+          ctx.y -= diff;
+          translateY.value = ctx.y + translationY;
+        }
+        // Scroll down
+        if (translateY.value > upperBound) {
+          const diff = Math.min(
+            translateY.value - upperBound,
+            leftToScrollDown
+          );
+          scrollY.value += diff;
+          scrollTo(scrollView, 0, scrollY.value, false);
+          ctx.y += diff;
+          translateY.value = ctx.y + translationY;
+        }
+      }
+    },
+    onEnd: () => {
+      if (draggable) {
+        // Snap the item back into its place when the drag ends
+        const newPosition = getPosition(positions.value[id], COL, SIZE);
+        translateX.value = withTiming(newPosition.x, animationConfig, () => {
+          isGestureActive.value = false; // Set gesture to inactive
+          runOnJS(onDragEnd)(positions.value); // Call onDragEnd on the JS thread
+        });
+        translateY.value = withTiming(newPosition.y, animationConfig);
+      }
+    },
+  });
+
+  // Animated style for the item
+  const style = useAnimatedStyle(() => {
+    const zIndex = isGestureActive.value ? 100 : 0; // Bring the item to front when active
+    const scale =
+      editing && isGestureActive.value ? withSpring(1.05) : withSpring(1); // Slightly enlarge the item when dragging
+    return {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: SIZE,
+      height: SIZE,
+      zIndex,
+      transform: [
+        { translateX: translateX.value },
+        { translateY: translateY.value },
+        { scale },
+      ],
+    };
+  });
+
+  return (
+    <Animated.View style={style}>
+      <PanGestureHandler enabled={editing} onGestureEvent={onGestureEvent}>
+        <Animated.View style={StyleSheet.absoluteFill}>
+          {children}
+        </Animated.View>
+      </PanGestureHandler>
+    </Animated.View>
+  );
+};
+
+export default Item;

package/src/SortableList.js

@@ -0,0 +1,86 @@
+import React, { memo } from 'react';
+import Animated, {
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+  useSharedValue,
+} from 'react-native-reanimated';
+import Item from './Item';
+import { useSortableConfig } from './Config';
+
+/**
+ * SortableList Component
+ *
+ * This component renders a scrollable list of items that can be reordered using drag-and-drop gestures.
+ * It manages the overall layout of the items and provides the necessary props to each child `Item` component
+ * to enable dragging, scrolling, and reordering functionality.
+ *
+ * Props:
+ * @param {React.ReactNode[]} children - The list of items to render inside the sortable list.
+ * @param {boolean} editing - Whether the list is in editing mode, enabling drag-and-drop.
+ * @param {Array} tiles - Array of tile data to manage the reordering state.
+ * @param {function} onDragEnd - Callback function called with the updated positions when the drag ends.
+ *
+ * Usage:
+ *
+ * <SortableList editing={isEditing} tiles={tiles} onDragEnd={handleDragEnd}>
+ *   {tiles.map((tile) => (
+ *     <YourTileComponent key={tile.id} id={tile.id} />
+ *   ))}
+ * </SortableList>
+ */
+
+const SortableList = ({ children, editing, tiles, onDragEnd }) => {
+  // Get the configuration for columns and size from context
+  const { COL, SIZE } = useSortableConfig();
+
+  // Shared values to track scrolling and item positions
+  const scrollY = useSharedValue(0); // Current scroll position
+  const scrollView = useAnimatedRef(); // Reference to the scroll view
+  const positions = useSharedValue(
+    children.reduce(
+      (acc, child, index) => ({ ...acc, [child.props.id]: index }),
+      {}
+    )
+  );
+
+  // Scroll event handler to update scrollY shared value
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: ({ contentOffset: { y } }) => {
+      scrollY.value = y;
+    },
+  });
+
+  return (
+    <Animated.ScrollView
+      onScroll={onScroll}
+      ref={scrollView}
+      contentContainerStyle={{
+        // Calculate the total height needed for the scroll view content
+        height: Math.ceil(children.length / COL) * SIZE,
+      }}
+      showsVerticalScrollIndicator={false}
+      bounces={false}
+      scrollEventThrottle={16} // Control scroll event frequency
+    >
+      {/* Render each child wrapped in an Item component */}
+      {children.map((child) => (
+        <Item
+          key={child.props.id}
+          id={child.props.id}
+          positions={positions}
+          editing={editing}
+          draggable={child.props.draggable}
+          reorderable={child.props.reorderable}
+          tiles={tiles}
+          onDragEnd={onDragEnd}
+          scrollView={scrollView}
+          scrollY={scrollY}
+        >
+          {child}
+        </Item>
+      ))}
+    </Animated.ScrollView>
+  );
+};
+
+export default memo(SortableList);

package/src/Tile.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { useSortableConfig } from './Config';
+
+/**
+ * Tile Component
+ *
+ * This component represents a single tile in the sortable grid. It is designed to be flexible and
+ * allows for user interactions such as press and long press. The size of each tile is dynamically
+ * adjusted based on the configuration provided by `SortableListProvider`.
+ *
+ * Props:
+ * @param {function} onPress - Callback function called when the tile is pressed.
+ * @param {function} onLongPress - Callback function called when the tile is long-pressed.
+ * @param {number} activeOpacity - The opacity of the tile when it is pressed. Default is 0.7.
+ * @param {React.ReactNode} children - The content to render inside the tile.
+ *
+ * Usage:
+ *
+ * <Tile onPress={handlePress} onLongPress={handleLongPress}>
+ *   <Text>Tile Content</Text>
+ * </Tile>
+ */
+
+const Tile = ({ onPress, onLongPress, activeOpacity = 0.7, children }) => {
+  // Get the size of the tile from the sortable config context
+  const { SIZE } = useSortableConfig();
+
+  // Define the style for the tile, ensuring that its size is consistent across the grid
+  const containerStyle = {
+    width: SIZE,
+    height: SIZE,
+  };
+
+  return (
+    <TouchableOpacity
+      style={containerStyle}
+      onPress={onPress}
+      onLongPress={onLongPress}
+      activeOpacity={activeOpacity} // Control the opacity when the tile is pressed
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};
+
+export default Tile;

package/src/index.js

@@ -0,0 +1,3 @@
+export { default as SortableListProvider } from './Config';
+export { default as SortableList } from './SortableList';
+export { default as Tile } from './Tile';