Replace dragging with buttons in edit plan - 2.5 🚀

Every draggable library I tried was buggy.

EditPlan.tsx

@@ -5,11 +5,8 @@ import {
   useRoute,
 } from "@react-navigation/native";
 import { useCallback, useEffect, useState } from "react";
-import { Pressable, StyleSheet, View } from "react-native";
+import { FlatList, Pressable, StyleSheet, View } from "react-native";
 import { IconButton, Switch as PaperSwitch, Text } from "react-native-paper";
-import ReorderableList, {
-  ReorderableListRenderItemInfo,
-} from "react-native-reorderable-list";
 import AppInput from "./AppInput";
 import { StackParams } from "./AppStack";
 import PrimaryButton from "./PrimaryButton";
@@ -98,35 +95,46 @@ export default function EditPlan() {
     />
   );
 
-  const renderExercise = ({
+  const renderExercise = (name: string, index: number) => (
-    item,
-    drag,
-  }: ReorderableListRenderItemInfo<string>) => (
     <Pressable
-      onPress={() => toggleExercise(!exercises.includes(item), item)}
+      onPress={() => toggleExercise(!exercises.includes(name), name)}
       style={{ flexDirection: "row", alignItems: "center" }}
     >
       <PaperSwitch
-        value={exercises.includes(item)}
+        value={exercises.includes(name)}
         style={{ marginRight: MARGIN }}
-        onValueChange={(value) => toggleExercise(value, item)}
+        onValueChange={(value) => toggleExercise(value, name)}
       />
-      <Text>{item}</Text>
+      <Text>{name}</Text>
       <IconButton
-        icon="drag-vertical"
+        icon="arrow-up"
         style={{ marginLeft: "auto" }}
-        onPressIn={drag}
+        onPressIn={() => moveUp(index)}
       />
+      <IconButton icon="arrow-down" onPressIn={() => moveDown(index)} />
     </Pressable>
   );
 
-  const reorderExercise = (from: number, to: number) => {
+  const moveDown = (from: number) => {
+    if (from === names.length - 1) return;
+    const to = from + 1;
+    const newNames = [...names];
+    const copy = newNames[from];
+    newNames[from] = newNames[to];
+    newNames[to] = copy;
+    const newExercises = newNames.filter((name) => exercises.includes(name));
+    setExercises(newExercises);
+    setNames(newNames);
+  };
+
+  const moveUp = (from: number) => {
+    if (from === 0) return;
+    const to = from - 1;
     const newNames = [...names];
     const copy = newNames[from];
     newNames[from] = newNames[to];
     newNames[to] = copy;
     const newExercises = newNames.filter((name) => exercises.includes(name));
-    console.log({ newExercises });
     setExercises(newExercises);
     setNames(newNames);
   };
@@ -167,19 +175,14 @@ export default function EditPlan() {
 
         <Text style={[styles.title, { marginTop: MARGIN }]}>Exercises</Text>
         {names !== undefined && (
-          <ReorderableList
+          <FlatList
             data={names}
             ListEmptyComponent={<Text>No exercises yet</Text>}
-            onReorder={({ fromIndex, toIndex }) =>
+            renderItem={({ item, index }) => renderExercise(item, index)}
-              reorderExercise(fromIndex, toIndex)
-            }
-            renderItem={renderExercise}
             keyExtractor={(item) => item}
-            dragScale={1.025}
             style={{
               flex: 1,
             }}
-            containerStyle={{ flex: 1 }}
           />
         )}
       </View>
@@ -191,6 +194,7 @@ export default function EditPlan() {
           await save();
           drawerNavigate("Plans");
         }}
+        style={{ margin: MARGIN }}
       >
         Save
       </PrimaryButton>

android/app/build.gradle

@@ -85,8 +85,8 @@ android {
         applicationId "com.massive"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 36219
+        versionCode 36220
-        versionName "2.4"
+        versionName "2.5"
     }
     signingConfigs {
         release {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "massive",
-  "version": "1.171",
+  "version": "2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "massive",
-      "version": "1.171",
+      "version": "2.4",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -39,7 +39,6 @@
         "react-native-paper": "^5.9.1",
         "react-native-permissions": "^3.10.1",
         "react-native-reanimated": "^3.3.0",
-        "react-native-reorderable-list": "^0.4.0",
         "react-native-safe-area-context": "^4.7.1",
         "react-native-screens": "^3.22.1",
         "react-native-share": "^9.2.3",
@@ -3029,11 +3028,6 @@
         "react-native-screens": ">= 3.0.0"
       }
     },
-    "node_modules/@seznam/compose-react-refs": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz",
-      "integrity": "sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q=="
-    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "license": "BSD-3-Clause",
@@ -6190,11 +6184,6 @@
       "version": "2.0.6",
       "license": "MIT"
     },
-    "node_modules/fast-memoize": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
-      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
-    },
     "node_modules/fast-xml-parser": {
       "version": "4.2.5",
       "funding": [
@@ -9936,20 +9925,6 @@
       "version": "2.0.0",
       "license": "MIT"
     },
-    "node_modules/react-native-reorderable-list": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/react-native-reorderable-list/-/react-native-reorderable-list-0.4.0.tgz",
-      "integrity": "sha512-XC0BpYFNZcTgfO6xAHvB2KefdiFZEp1WOFjZRR9Du9YX5NQtZg4DUKjtXWNgwnoB9SCQh04sOWxRf3rnAXpDww==",
-      "dependencies": {
-        "@seznam/compose-react-refs": "^1.0.6",
-        "fast-memoize": "^2.5.2"
-      },
-      "peerDependencies": {
-        "react-native": ">=0.62.0",
-        "react-native-gesture-handler": ">=1.10.0",
-        "react-native-reanimated": ">=2.2.0"
-      }
-    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.7.1",
       "license": "MIT",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "massive",
-  "version": "2.4",
+  "version": "2.5",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {
@@ -42,7 +42,6 @@
     "react-native-paper": "^5.9.1",
     "react-native-permissions": "^3.10.1",
     "react-native-reanimated": "^3.3.0",
-    "react-native-reorderable-list": "^0.4.0",
     "react-native-safe-area-context": "^4.7.1",
     "react-native-screens": "^3.22.1",
     "react-native-share": "^9.2.3",