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

Comparing version 1.1.40 to 2.0.0

index.js

@@ -1,2 +0,2 @@
-import React, { Component } from "react";
+import React from 'react';
 import Highlighter from "react-native-highlight-words";
@@ -10,9 +10,11 @@ import {
   RefreshControl,
+  Animated,
 } from "react-native";
 
-class CompleteFlatList extends Component {
+class CompleteFlatList extends React.Component {
   state = {
     behavior: "padding",
     refreshing: false,
-    searchText: ""
+    searchText: "",
+    rowScale: new Animated.Value(0),
   };
@@ -34,2 +36,3 @@
     showSearch: true,
+    isJelly: false,
     renderEmptyRow: () => (
@@ -107,5 +110,21 @@ <Text style={styles.noData}>{"No data available"}</Text>
     }
-    return filteredData
+    return filteredData;
   };
 
+  onScrollBeginDrag = () => {
+    Animated.spring(this.state.rowScale, {
+      toValue: 5,
+      tension: 20,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  onScrollEndDrag = () => {
+    Animated.spring(this.state.rowScale, {
+      toValue: 1,
+      tension: 20,
+      useNativeDriver: true,
+    }).start();
+  };
+
   render() {
@@ -123,4 +142,5 @@ const {
       showSearch,
+      isJelly,
     } = this.props;
-    const { searchText } = this.state
+    const { searchText } = this.state;
     const filteredData = this.filterText();
@@ -131,2 +151,7 @@ if (filteredData.length === 0) {
 
+    const scaleY = this.state.rowScale.interpolate({
+      inputRange: [0, 5],
+      outputRange: [1, 0.9],
+    });
+
     const searchbar = (
@@ -152,2 +177,7 @@ <View style={[styles.searchBarContainer, searchBarBackgroundStyles]}>
 
+    const jellyProps = isJelly ? {
+      onScrollBeginDrag: this.onScrollBeginDrag,
+      onScrollEndDrag: this.onScrollEndDrag,
+    } : {}
+
     return (
@@ -161,3 +191,6 @@ <View
         <FlatList
+          ItemSeparatorComponent={renderSeparator}
+          scrollEventThrottle={16}
           {...this.props}
+          {...jellyProps}
           refreshControl={
@@ -179,3 +212,3 @@ onSearch !== null ? (
           data={filteredData}
-          renderItem={({ item, index, separators: { highlight, unhighlight, updateProps } }) =>
+          renderItem={({ item, index, separators }) =>
             filteredData.length === 1 &&
@@ -185,7 +218,6 @@ filteredData[0].showEmptyRow !== null &&
               ? this.props.renderEmptyRow()
-              : renderItem(item, index)
+              : <Animated.View style={{ transform: [{ scaleY }] }}>{renderItem({ item, index, separators })}</Animated.View>
           }
           style={styles.flatList}
-          ItemSeparatorComponent={renderSeparator}
-          keyExtractor={(item, index) => index.toString()}
+        // keyExtractor={(item, index) => index.toString()}//dangerous to use index
         />
@@ -192,0 +224,0 @@ </View>

package.json

 {
   "name": "react-native-complete-flatlist",
-  "version": "1.1.40",
+  "version": "2.0.0",
   "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

@@ -52,3 +52,3 @@ # react-native-complete-flatlist
 class App extends Component {
-  cell = (data,index) => {
+  cell = ({data,index}) => {
     const item = data.cleanData ? data.cleanData : data
@@ -98,2 +98,3 @@
 |`showSearch`|boolean|If `true`, search bar will be show|true|Optional|
+|`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|
 |`data`|array of objects|Data to be rendered in the list|[]|Required (come on, ofcourse u need data for this)|
@@ -100,0 +101,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

15491

increased by6.11%

Lines of code

235

increased by13.53%

Number of lines in readme file

131

increased by0.77%

Worsened metrics

Number of package files

5

decreased by-16.67%

No dependency changes