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

Comparing version 2.0.17 to 2.0.18

index.js

@@ -1,6 +0,15 @@
-import React from 'react';
-import {StyleSheet, Text, View, FlatList, TextInput, RefreshControl, Animated} from 'react-native';
+import React from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  FlatList,
+  TextInput,
+  RefreshControl,
+  Animated,
+  ActivityIndicator,
+} from "react-native";
 
-import filterText from './utils/filterText';
-import fuzziedText from './utils/fuzzySearch';
+import filterText from "./utils/filterText";
+import fuzziedText from "./utils/fuzzySearch";
 
@@ -14,3 +23,3 @@ class CompleteFlatList extends React.Component {
     refreshing: false,
-    searchText: '',
+    searchText: "",
   };
@@ -20,3 +29,3 @@
     searchKey: [],
-    placeholder: 'Search ...',
+    placeholder: "Search ...",
     data: [],
@@ -31,3 +40,3 @@ isRefreshing: false,
     isJelly: false,
-    slide: 'none',
+    slide: "none",
     elementBetweenSearchAndList: null,
@@ -40,3 +49,3 @@ refreshOnLoad: true,
 
-    if (this.props.slide != 'none') {
+    if (this.props.slide != "none") {
       Animated.spring(this.slide, {
@@ -50,11 +59,11 @@ toValue: 1,
 
-  clearSearch = () => this.setState({searchText: ''}, this.searchInput.clear);
+  clearSearch = () => this.setState({ searchText: "" }, this.searchInput.clear);
 
   onRefresh = () => {
     this.props.pullToRefreshCallback?.();
-    this.setState({refreshing: true});
-    setTimeout(() => this.setState({refreshing: false}), 7000);
+    this.setState({ refreshing: true });
+    setTimeout(() => this.setState({ refreshing: false }), 7000);
   };
 
-  refresh = () => this.setState({refreshing: false, data: this.props.data});
+  refresh = () => this.setState({ refreshing: false, data: this.props.data });
 
@@ -94,7 +103,8 @@ onScrollBeginDrag = () => {
       useFuzzy,
+      loadNext,
     } = this.props;
-    const {searchText} = this.state;
+    const { searchText } = this.state;
     const filteredData = useFuzzy
-      ? fuzziedText({...this.props, searchText})
-      : filterText({...this.props, searchText});
+      ? fuzziedText({ ...this.props, searchText })
+      : filterText({ ...this.props, searchText });
 
@@ -118,3 +128,3 @@ const scaleY = !isJelly
         <TextInput
-          ref={c => (this.searchInput = c)}
+          ref={(c) => (this.searchInput = c)}
           style={[styles.searchBar, searchTextInputStyle]}
@@ -127,3 +137,3 @@ placeholder={placeholder}
           keyboardType="email-address"
-          onChangeText={t => this.setState({searchText: t})}
+          onChangeText={(t) => this.setState({ searchText: t })}
           value={searchText}
@@ -143,31 +153,43 @@ maxLength={100}
           ItemSeparatorComponent={renderSeparator}
-          ListEmptyComponent={<Text style={styles.noData}>No data available</Text>}
+          ListEmptyComponent={
+            <Text style={styles.noData}>No data available</Text>
+          }
           scrollEventThrottle={16}
           {...this.props}
+          onEndReached={() => {
+            this.props.onEndReached?.();
+            loadNext?.();
+          }}
           {...jellyProps}
           refreshControl={
-            onSearch ? (
-              <RefreshControl
-                refreshing={isRefreshing || isLoading}
-                onRefresh={() => onSearch(searchText)}
-              />
-            ) : (
-              <RefreshControl
-                refreshing={isRefreshing || isLoading}
-                onRefresh={pullToRefreshCallback}
-              />
-            )
+            <RefreshControl
+              refreshing={isRefreshing || isLoading}
+              onRefresh={
+                onSearch ? () => onSearch(searchText) : pullToRefreshCallback
+              }
+            />
           }
-          data={filteredData}
-          renderItem={({item, index, separators}) => {
+          data={
+            loadNext ? [...filteredData, "loading-component"] : filteredData
+          }
+          renderItem={({ item, index, separators }) => {
             const translateX =
-              slide == 'none'
+              slide == "none"
                 ? 0
                 : this.slide.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [(slide == 'right' ? 1 : -1) * ((index + 1) * 500), 0],
+                    outputRange: [
+                      (slide == "right" ? 1 : -1) * ((index + 1) * 500),
+                      0,
+                    ],
                   });
             return (
-              <Animated.View style={{transform: [{scaleY}, {translateX}]}}>
-                {renderItem({item, index, separators})}
+              <Animated.View
+                style={{ transform: [{ scaleY }, { translateX }] }}
+              >
+                {item === "loading-component" ? (
+                  <ActivityIndicator style={{ margin: 20 }} />
+                ) : (
+                  renderItem({ item, index, separators })
+                )}
               </Animated.View>
@@ -184,15 +206,15 @@ );
 const styles = StyleSheet.create({
-  noData: {alignSelf: 'center', textAlign: 'center', marginTop: 20},
+  noData: { alignSelf: "center", textAlign: "center", marginTop: 20 },
   searchBarContainer: {
-    justifyContent: 'center',
+    justifyContent: "center",
     padding: 10,
-    backgroundColor: '#f2f2f2',
-    width: '100%',
+    backgroundColor: "#f2f2f2",
+    width: "100%",
   },
   searchBar: {
     borderRadius: 5,
-    backgroundColor: 'white',
+    backgroundColor: "white",
     height: 38,
     fontSize: 15,
-    width: '100%',
+    width: "100%",
     paddingHorizontal: 10,
@@ -202,12 +224,16 @@ },
     flex: 1,
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    width: '100%',
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
   },
-  defaultSeparator: {height: 1, width: '80%', alignSelf: 'center', backgroundColor: '#f2f2f2'},
-  flatList: {height: '100%', width: '100%', backgroundColor: 'transparent'},
+  defaultSeparator: {
+    height: 1,
+    width: "80%",
+    alignSelf: "center",
+    backgroundColor: "#f2f2f2",
+  },
+  flatList: { height: "100%", width: "100%", backgroundColor: "transparent" },
 });
 
 export default CompleteFlatList;

package.json

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

@@ -103,3 +103,4 @@ # react-native-complete-flatlist
 | `refreshOnLoad`               | boolean                                                                                              | If `true`, prop `pullToRefreshCallback` will be called if available                                                                                                                                                                                                                                                       | true                                                                | Optional                                                                |
-| `onSearch`                    | function that will replace `pullToRefreshCallback`                                                   | If exist, `pullToRefreshCallback` will be overrided. This will not triggered on key press, but on return key pressed. This props is introduced if search trigger result from API. If you just want local search (search from existing array), this props is not needed. `onSearch` will automatic get `keyword` parameter | ()=>null                                                            | Optional                                                                |
+| `onSearch`                    | function that will replace `pullToRefreshCallback`                                                   | If exist, `pullToRefreshCallback` will be overrided. This will not triggered on key press, but on return key pressed. This props is introduced if search trigger result from API. If you just want local search (search from existing array), this props is not needed. `onSearch` will automatic get `keyword` parameter | ()=>null                                                            | Optional  
+| `loadNext`                    | function | If defined, this function will be called when user scroll FlatList to the bottom. The usecase is to call next pagination of your API. If defined, loading icon will be shown at the bottom of the list. To hide the loading icon, make sure this prop is undefined | undefined | Optional                                                                |
 
@@ -106,0 +107,0 @@ ### Methods

No alert changes

Improved metrics

Total package byte prevSize

26939

increased by2.75%

Lines of code

315

increased by9%

Number of lines in readme file

141

increased by0.71%

No dependency changes