Update README.md

Author: computerjazz

README.md

@@ -76,124 +76,106 @@ Gesture handlers can sometimes capture a gesture unintentionally. If you are usi
 
 ### Example
 
-```javascript
-import React from "react";
+https://snack.expo.io/@computerjazz/swipeable-draggable-list
+
+```typescript
+import React from 'react';
 import {
   Text,
   View,
   StyleSheet,
   FlatList,
   LayoutAnimation,
+  TouchableOpacity,
   Platform,
   UIManager,
-  TouchableOpacity,
-  Dimensions
-} from "react-native";
-
-const { width } = Dimensions.get("window");
-
-import { TouchableOpacity as RNGHTouchableOpacity } from "react-native-gesture-handler";
-import Animated from "react-native-reanimated";
-import SwipeableItem from 'react-native-swipeable-item';
-import DraggableFlatList from "react-native-draggable-flatlist";
+} from 'react-native';
+import Animated from 'react-native-reanimated';
+import SwipeableItem, { UnderlayParams } from 'react-native-swipeable-item';
+import DraggableFlatList, {
+  RenderItemParams,
+} from 'react-native-draggable-flatlist';
 const { multiply, sub } = Animated;
 
-const isAndroid = Platform.OS === "android";
-
-if (isAndroid && UIManager.setLayoutAnimationEnabledExperimental) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
+if (Platform.OS === 'android') {
+  UIManager.setLayoutAnimationEnabledExperimental &&
+    UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 
-const PlatformTouchable = isAndroid ? TouchableOpacity : TouchableOpacity;
-
-const NUM_ITEMS = 3;
-function getColor(i) {
+const NUM_ITEMS = 20;
+function getColor(i: number) {
   const multiplier = 255 / (NUM_ITEMS - 1);
   const colorVal = i * multiplier;
   return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
 }
 
-const initialData = [...Array(NUM_ITEMS)].fill(0).map((d, index) => ({
-  text: `Row ${index}`,
-  key: `key-${index}`, // Note: It's bad practice to use index as your key. Don't do it in production!
-  backgroundColor: getColor(index),
-  hasLeft: index % 3 === 0 || index % 3 === 1,
-  hasRight: index % 3 === 0 || index % 3 === 2
-}));
+type Item = {
+  key: string;
+  text: string;
+  backgroundColor: string;
+  height: number;
+};
+
+const initialData: Item[] = [...Array(NUM_ITEMS)].fill(0).map((d, index) => {
+  const backgroundColor = getColor(index);
+  return {
+    text: `Row ${index}`,
+    key: `key-${backgroundColor}`,
+    backgroundColor,
+    height: 100,
+  };
+});
 
 class App extends React.Component {
   state = {
-    data: initialData
+    data: initialData,
   };
 
   itemRefs = new Map();
 
-  deleteItem = item => {
-    const updatedData = this.state.data.filter(d => d !== item);
+  deleteItem = (item: Item) => {
+    const updatedData = this.state.data.filter((d) => d !== item);
     // Animate list to close gap when item is deleted
     LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
     this.setState({ data: updatedData });
   };
 
-  renderUnderlayLeft = ({ item, percentOpen }) => (
+  renderUnderlayLeft = ({ item, percentOpen }: UnderlayParams<Item>) => (
     <Animated.View
       style={[styles.row, styles.underlayLeft, { opacity: percentOpen }]} // Fade in on open
     >
-      <PlatformTouchable onPressOut={() => this.deleteItem(item.item)}>
+      <TouchableOpacity onPressOut={() => this.deleteItem(item)}>
         <Text style={styles.text}>{`[x]`}</Text>
-      </PlatformTouchable>
+      </TouchableOpacity>
     </Animated.View>
   );
 
-  renderUnderlayRight = ({ item, percentOpen, close }) => (
+  renderUnderlayRight = ({
+    item,
+    percentOpen,
+    open,
+    close,
+  }: UnderlayParams<Item>) => (
     <Animated.View
       style={[
         styles.row,
         styles.underlayRight,
         {
-          transform: [{ translateX: multiply(sub(1, percentOpen), -100) }] // Translate from left on open
-        }
-      ]}
-    >
-      <PlatformTouchable onPressOut={close}>
+          transform: [{ translateX: multiply(sub(1, percentOpen), -100) }], // Translate from left on open
+        },
+      ]}>
+      <TouchableOpacity onPressOut={close}>
         <Text style={styles.text}>CLOSE</Text>
-      </PlatformTouchable>
+      </TouchableOpacity>
     </Animated.View>
   );
 
-  renderOverlay = ({ item, openLeft, openRight, openDirection, close }) => {
-    const { text, backgroundColor, hasLeft, hasRight } = item.item;
-    return (
-      <View style={[styles.row, { backgroundColor }]}>
-        <View style={[styles.flex, { alignItems: "flex-start" }]}>
-          {hasRight && (
-            <PlatformTouchable
-              onPressOut={!!openDirection ? close : () => openRight(1)}
-            >
-              <Text style={styles.text}>{`<`}</Text>
-            </PlatformTouchable>
-          )}
-        </View>
-        <PlatformTouchable style={styles.flex} onLongPress={item.drag}>
-          <Text style={styles.text}>{text}</Text>
-        </PlatformTouchable>
-        <View style={[styles.flex, { alignItems: "flex-end" }]}>
-          {hasLeft && (
-            <PlatformTouchable onPressOut={!!openDirection ? close : openLeft}>
-              <Text style={styles.text}>{`>`}</Text>
-            </PlatformTouchable>
-          )}
-        </View>
-      </View>
-    );
-  };
-
-  renderItem = ({ item, index, drag }) => {
+  renderItem = ({ item, index, drag }: RenderItemParams<Item>) => {
     return (
       <SwipeableItem
         key={item.key}
-        item={{ item, drag }}
-        ref={ref => {
+        item={item}
+        ref={(ref) => {
           if (ref && !this.itemRefs.get(item.key)) {
             this.itemRefs.set(item.key, ref);
           }
@@ -206,25 +188,33 @@ class App extends React.Component {
             });
           }
         }}
-        overSwipe={50}
+        overSwipe={20}
         renderUnderlayLeft={this.renderUnderlayLeft}
-        snapPointsLeft={item.hasLeft ? [100] : undefined}
         renderUnderlayRight={this.renderUnderlayRight}
-        snapPointsRight={item.hasRight ? [100, width] : undefined}
-        renderOverlay={this.renderOverlay}
-      />
+        snapPointsLeft={[150]}
+        snapPointsRight={[175]}>
+        <View
+          style={[
+            styles.row,
+            { backgroundColor: item.backgroundColor, height: item.height },
+          ]}>
+          <TouchableOpacity onLongPress={drag}>
+            <Text style={styles.text}>{item.text}</Text>
+          </TouchableOpacity>
+        </View>
+      </SwipeableItem>
     );
   };
 
   render() {
     return (
       <View style={styles.container}>
         <DraggableFlatList
-          activationDistance={15}
-          keyExtractor={item => item.key}
+          keyExtractor={(item) => item.key}
           data={this.state.data}
           renderItem={this.renderItem}
           onDragEnd={({ data }) => this.setState({ data })}
+          activationDistance={20}
         />
       </View>
     );
@@ -235,32 +225,30 @@ export default App;
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
-  },
-  flex: {
-    flex: 1
+    flex: 1,
   },
   row: {
-    flexDirection: "row",
+    flexDirection: 'row',
     flex: 1,
-    alignItems: "center",
-    justifyContent: "space-around",
-    padding: 15
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 15,
   },
   text: {
-    fontWeight: "bold",
-    color: "white",
-    fontSize: 32
+    fontWeight: 'bold',
+    color: 'white',
+    fontSize: 32,
   },
   underlayRight: {
     flex: 1,
-    backgroundColor: "teal",
-    justifyContent: "flex-start"
+    backgroundColor: 'teal',
+    justifyContent: 'flex-start',
   },
   underlayLeft: {
     flex: 1,
-    backgroundColor: "tomato",
-    justifyContent: "flex-end"
-  }
+    backgroundColor: 'tomato',
+    justifyContent: 'flex-end',
+  },
 });
+
 ```