Swipeable actions!

app/index.tsx

@@ -1,44 +1,98 @@
-import {FlatList, Text, View, ColorValue, ListRenderItemInfo} from "react-native";
+import {StyleSheet, Text, View, ColorValue, ListRenderItemInfo, TouchableOpacity} from "react-native";
-// @ts-ignore
+import {RowMap, SwipeListView} from "react-native-swipe-list-view";
-import SwipeableFlatList from 'react-native-swipeable-list';
+
+const servers: Server[] = [
+  {
+    name: "Test Data Server",
+    domain: "localhost",
+    computers: [
+      {
+        key: 0,
+        name: "Test PC",
+        emoji: "💻",
+        background_color: '#D9D9D9',
+        mac_address: "00:1A:2B:3C:4D:5E",
+      },
+      {
+        key: 1,
+        name: "Another PC in the basement",
+        emoji: "💻",
+        background_color: '#D9D9D9',
+        mac_address: "00:1A:2B:3C:4D:5E",
+      }
+    ]
+  }
+];
 
 export default function Index() {
   return (
-    <View style={{
+    <ComputerList computers={servers[0].computers}/>
-      backgroundColor: "#FFFFFF",
-    }}>
-      <ComputerList computers={[
-        {
-          name: "Test PC",
-          emoji: "💻",
-          background_color: '#D9D9D9',
-          mac_address: "00:1A:2B:3C:4D:5E",
-        },
-        {
-          name: "Another PC in the basement",
-          emoji: "💻",
-          background_color: '#D9D9D9',
-          mac_address: "00:1A:2B:3C:4D:5E",
-        }
-      ]}/>
-    </View>
   );
 }
 
+const styles = StyleSheet.create({
+  computerElement: {
+    display: "flex",
+    flexDirection: "row",
+    paddingHorizontal: 24,
+    paddingVertical: 14,
+    gap: 32,
+    backgroundColor: '#FFFFFF'
+  },
+  computerName: {
+    fontSize: 18,
+    justifyContent: "flex-start",
+  },
+  computerSubtitle: {
+    fontSize: 12,
+    justifyContent: "flex-start",
+    color: '#979797'
+  },
+  backTextWhite: {
+    color: '#FFF',
+  },
+  rowBack: {
+    alignItems: 'center',
+    backgroundColor: '#DDD',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingLeft: 15,
+  },
+  backRightBtn: {
+    alignItems: 'center',
+    bottom: 0,
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    width: 75,
+  },
+  backRightBtnRight: {
+    backgroundColor: 'red',
+    right: 0,
+  },
+});
+
 function ComputerList(computers: { computers: Computer[] }) {
-  return (
+  const renderHiddenItem = (data: ListRenderItemInfo<Computer>, rowMap: RowMap<Computer>) => (
-    <View>
+    <View style={styles.rowBack}>
-      <FlatList style={{
+      <TouchableOpacity
-        borderRadius: 25,
+        style={[styles.backRightBtn, styles.backRightBtnRight]}
-      }} data={computers.computers} renderItem={({item}: ListRenderItemInfo<Computer>) =>
+        onPress={() => {
-        <View style={{
+          //TODO: remove it from storage
-          display: "flex",
-          flexDirection: "row",
-          paddingHorizontal: 15,
-          paddingVertical: 15,
-          gap: 60,
-          backgroundColor: '#FFFFFF'
         }}>
+        <Text style={styles.backTextWhite}>Delete</Text>
+      </TouchableOpacity>
+    </View>
+  );
+
+  return (
+    <SwipeListView style={{
+      // borderRadius: 25,
+    }}
+      data={computers.computers}
+      renderItem={({item}: ListRenderItemInfo<Computer>) =>
+        <View style={styles.computerElement}>
           <View style={{
             width: 65,
             height: 65,
@@ -53,23 +107,16 @@ function ComputerList(computers: { computers: Computer[] }) {
           </View>
           <View style={{
             flexDirection: "column",
-            gap: 0,
+            gap: 3,
             padding: 0,
             justifyContent: "center",
           }}>
-            <Text style={{
+            <Text style={styles.computerName}>{item.name}</Text>
-              fontSize: 18,
+            <Text style={styles.computerSubtitle}>{item.mac_address}</Text>
-              justifyContent: "flex-start",
-            }}>{item.name}</Text>
-            <Text style={{
-              fontSize: 12,
-              justifyContent: "flex-start",
-              color: '#979797'
-            }}>{item.mac_address}</Text>
           </View>
         </View>
-      }/>
+      } rightOpenValue={-75} renderHiddenItem={renderHiddenItem}
-    </View>
+    />
   )
 }
 
@@ -80,6 +127,7 @@ type Server = {
 }
 
 type Computer = {
+  key: number,
   name: string,
   emoji: string,
   background_color: ColorValue,

package-lock.json

@@ -30,7 +30,7 @@
         "react-native-reanimated": "~3.16.1",
         "react-native-safe-area-context": "4.12.0",
         "react-native-screens": "~4.4.0",
-        "react-native-swipeable-list": "^0.1.2",
+        "react-native-swipe-list-view": "^3.2.9",
         "react-native-web": "~0.19.13",
         "react-native-webview": "13.12.5"
       },
@@ -11748,14 +11748,15 @@
         "react-native": "*"
       }
     },
-    "node_modules/react-native-swipeable-list": {
+    "node_modules/react-native-swipe-list-view": {
-      "version": "0.1.2",
+      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/react-native-swipeable-list/-/react-native-swipeable-list-0.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-swipe-list-view/-/react-native-swipe-list-view-3.2.9.tgz",
-      "integrity": "sha512-FDeFLByUep3m3xuwS/ZkktxL7Xzg90XnKoo+KLTF04jiddyVZQMnXTHG8O4pyiEtg/swcBlT6XUktV+/KTVNXQ==",
+      "integrity": "sha512-SjAEuHc/D6ovp+RjDUhfNmw6NYOntdT7+GFhfMGfP/BSLMuMWynpzJy9GKQeyB8sI78T6Lzip21TVbongOg1Mw==",
       "license": "MIT",
       "peerDependencies": {
-        "react": ">=16.11.0",
+        "prop-types": ">=15.5.0",
-        "react-native": ">=0.61.4"
+        "react": ">=0.14.8",
+        "react-native": ">=0.23.1"
       }
     },
     "node_modules/react-native-web": {

package.json

@@ -37,7 +37,7 @@
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
-    "react-native-swipeable-list": "^0.1.2",
+    "react-native-swipe-list-view": "^3.2.9",
     "react-native-web": "~0.19.13",
     "react-native-webview": "13.12.5"
   },