react-native-complete-flatlist - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

index.js

@@ -19,2 +19,3 @@ import React from 'react';
     rowScale: new Animated.Value(0),
+    slide: new Animated.Value(0),
   };
@@ -37,2 +38,3 @@
     isJelly: false,
+    slide: 'none',
     renderEmptyRow: () => (
@@ -52,2 +54,12 @@ <Text style={styles.noData}>{"No data available"}</Text>
 
+  componentDidMount() {
+    if (this.props.slide != 'none') {
+      Animated.spring(this.state.slide, {
+        toValue: 1,
+        tension: 20,
+        useNativeDriver: true,
+      }).start();
+    }
+  }
+
   clearSearch = () => this.setState({ searchText: "" }, this.searchInput.clear)
@@ -143,2 +155,3 @@
       isJelly,
+      slide,
     } = this.props;
@@ -151,3 +164,3 @@ const { searchText } = this.state;
 
-    const scaleY = this.state.rowScale.interpolate({
+    const scaleY = !isJelly ? 1 : this.state.rowScale.interpolate({
       inputRange: [0, 5],
@@ -157,2 +170,7 @@ outputRange: [1, 0.9],
 
+    const jellyProps = isJelly ? {
+      onScrollBeginDrag: this.onScrollBeginDrag,
+      onScrollEndDrag: this.onScrollEndDrag,
+    } : {}
+
     const searchbar = (
@@ -178,7 +196,2 @@ <View style={[styles.searchBarContainer, searchBarBackgroundStyles]}>
 
-    const jellyProps = isJelly ? {
-      onScrollBeginDrag: this.onScrollBeginDrag,
-      onScrollEndDrag: this.onScrollEndDrag,
-    } : {}
-
     return (
@@ -212,9 +225,15 @@ <View
           data={filteredData}
-          renderItem={({ item, index, separators }) =>
-            filteredData.length === 1 &&
+          renderItem={({ item, index, separators }) => {
+            const translateX = slide == 'none' ? 0 : this.state.slide.interpolate({
+              inputRange: [0, 1],
+              outputRange: [((slide == 'right' ? 1 : -1) * ((index + 1) * 500)), 0],
+            });
+            if (filteredData.length === 1 &&
               filteredData[0].showEmptyRow !== null &&
-              typeof filteredData[0].showEmptyRow !== "undefined"
-              ? this.props.renderEmptyRow()
-              : <Animated.View style={{ transform: [{ scaleY }] }}>{renderItem({ item, index, separators })}</Animated.View>
-          }
+              typeof filteredData[0].showEmptyRow !== "undefined") {
+
+              return this.props.renderEmptyRow();
+            }
+            return <Animated.View style={{ transform: [{ scaleY }, { translateX }] }}>{renderItem({ item, index, separators })}</Animated.View>
+          }}
           style={styles.flatList}
@@ -221,0 +240,0 @@ // keyExtractor={(item, index) => index.toString()}//dangerous to use index

package.json

 {
   "name": "react-native-complete-flatlist",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "An extension of React Native's Flatlist with search bar, highlighted search, pull to refresh, and etc is ready to use",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -101,2 +101,3 @@ # react-native-complete-flatlist
 |`isJelly`|boolean|If `true`, when user scroll, the list will expand a lil bit, and when user stop drag, the list will back to original size (iMessage on iPhone style)|false|Optional|
+|`slide`|string|Animation how every items come into the list. Can be "none", "left" or "right"|`none`|Optional|
 |`data`|array of objects|Data to be rendered in the list|[]|Required (come on, ofcourse u need data for this)|
@@ -103,0 +104,0 @@ |`renderEmptyRow`|function that return a JSX element|Will be rendered when data is empty or search does not match any keyword|```()=><Text style={styles.noData}>{'No data available'}</Text>```|Optional|

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16415

increased by4.24%

Lines of code

252

increased by7.23%

Number of lines in readme file

135

increased by0.75%

No dependency changes