react-native-swipeable-item - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

package.json

 {
   "name": "react-native-swipeable-item",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Swipeable flatlist row",
@@ -5,0 +5,0 @@ "main": "index.tsx",

README.md

@@ -8,3 +8,3 @@ # React Native Swipeable Item
 
-![Swipeable Item demo](https://imgur.com/W2qACyE.gif)
+![Swipeable Item demo](https://i.imgur.com/zc2IrRl.gif)
 
@@ -14,3 +14,3 @@ ## Install
 2. `npm install` or `yarn add` `react-native-swipeable-item` 
-3. `import SwipeItem from 'react-native-swipeable-Item'`  
+3. `import SwipeItem from 'react-native-swipeable-item'`  
 
@@ -20,13 +20,29 @@ ### Props
 :--- | :--- | :---
-`renderUnderlay` | `() => React.ReactNode` |  Component to be rendered underneath row.
-`underlayWidth` | `number` | Width of underlay.
-`swipeThreshold` | `number` | Swipe threshold for underlay to remain open on release.
-`onOpen` | `() => void` |  Called when row is opened.
-`onClose` | `() => void` | Called when row is closed.
+`renderUnderlayLeft` | `() => React.ReactNode` |  Component to be rendered underneath row on left swipe.
+`underlayWidthLeft` | `number` | Width of left-swiped underlay.
+`renderUnderlayRight` | `() => React.ReactNode` |  Component to be rendered underneath row on left swipe.
+`underlayWidthRight` | `number` | Width of left-swiped underlay.
+`onChange` | `(params: { open: "left" \| "right" \| "null" }) => void` |  Called when row is opened or closed.
 
+### Instance Methods
+Name | Type | Description
+:--- | :--- | :---
+`open` | `("left" | "right") => void` |  Programmatically open left or right.
+`close` | `() => void` | Close all.
 
+```js
+// Programmatic open example
+const itemRef: SwipeItem | null = null
+
+...
+
+<SwipeItem ref={ref => itemRef = ref} />
+
+...
+if (itemRef) itemRef.open()
+```
+
 ### Example
 ```javascript
-import * as React from 'react';
-const { useCallback, useState } = React;
+import React from 'react';
 import {
@@ -41,2 +57,3 @@ Text,
 import SwipeRow from './components/SwipeRow';
+import DraggableFlatList from 'react-native-draggable-flatlist';
 
@@ -61,5 +78,2 @@ const NUM_ITEMS = 10;
 
-  refMap = new Map();
-  openMap = new Map();
-
   deleteItem = item => {
@@ -72,33 +86,38 @@ const updatedData = this.state.data.filter(d => d !== item);
 
-  renderItem = ({ item, index }) => (
+  itemRefs = new Map();
+
+  renderItem = ({ item, index, drag }) => (
     <SwipeRow
-      ref={ref => this.refMap.set(item.key, ref)}
       key={item.key}
-      underlayWidth={200}
-      swipeThreshold={-150}
-      onOpen={() => this.openMap.set(item.key, true)}
-      onClose={() => this.openMap.set(item.key, false)}
-      renderUnderlay={() => {
-        return (
-          <View style={styles.underlay}>
-            <TouchableOpacity onPress={() => this.deleteItem(item)}>
-              <Text style={styles.text}>DEL</Text>
-            </TouchableOpacity>
-          </View>
-        );
-      }}>
-      <View
-        style={{ flexDirection: 'row', backgroundColor: item.backgroundColor }}>
-        <Text style={styles.text}>{item.text}</Text>
+      ref={ref => this.itemRefs.set(item.key, ref)}
+      underlayWidthLeft={100}
+      underlayWidthRight={200}
+      underlayLeft={() => (
         <TouchableOpacity
-          onPress={() => {
-            const ref = this.refMap.get(item.key);
-            if (ref) {
-              if (this.openMap.get(item.key)) ref.close();
-              else ref.open();
-            }
+          onPressOut={() => this.deleteItem(item)}
+          style={{
+            flex: 1,
+            backgroundColor: 'tomato',
+            alignItems: 'flex-end',
           }}>
-          <Text style={styles.text}>{`<>`}</Text>
+          <Text style={styles.text}>{`[x]`}</Text>
         </TouchableOpacity>
-      </View>
+      )}
+      underlayRight={() => (
+        <TouchableOpacity
+          style={{
+            flex: 1,
+            backgroundColor: 'teal',
+            alignItems: 'flex-start',
+          }}
+          onPressOut={() => {
+            const ref = this.itemRefs.get(item.key);
+            if (ref) ref.close();
+          }}>
+          <Text style={styles.text}>CLOSE</Text>
+        </TouchableOpacity>
+      )}>
+      <Text style={[styles.text, { backgroundColor: item.backgroundColor }]}>
+        {item.text}
+      </Text>
     </SwipeRow>
@@ -110,3 +129,8 @@ );
       <View style={styles.container}>
-        <FlatList data={this.state.data} renderItem={this.renderItem} />
+        <DraggableFlatList
+          keyExtractor={item => item.key}
+          data={this.state.data}
+          renderItem={this.renderItem}
+          onDragEnd={({ data }) => this.setState({ data })}
+        />
       </View>
@@ -129,10 +153,5 @@ );
     textAlign: 'center',
-    padding: 25,
+    padding: 15,
   },
-  underlay: { 
-    flex: 1, 
-    backgroundColor: 'tomato', 
-    alignItems: 'flex-end' 
-  }
 });
 ```

No alert changes

Improved metrics

Total package byte prevSize

12610

27.93%

Lines of code

239

24.48%

Number of lines in readme file

150

14.5%

No dependency changes