Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-complete-flatlist
Advanced tools
react-native-complete-flatlist - npm Package Compare versions
Comparing version 2.0.3 to 2.0.4
21
index.js
@@ -37,5 +37,2 @@ import React from 'react'; | ||
| slide: 'none', | ||
| renderEmptyRow: () => ( | ||
| <Text style={styles.noData}>{"No data available"}</Text> | ||
| ), | ||
| elementBetweenSearchAndList: null | ||
@@ -71,8 +68,3 @@ }; | ||
| refresh = () => { | ||
| let filtereddata = null; | ||
| if (this.props.data.length === 0) { | ||
| filtereddata = [{ type: "emptyrow", name: "No data available" }]; | ||
| } | ||
| filtereddata = this.props.data; | ||
| this.setState({ refreshing: false, data: filtereddata }); | ||
| this.setState({ refreshing: false, data: this.props.data }); | ||
| }; | ||
@@ -156,5 +148,2 @@ | ||
| const filteredData = this.filterText(); | ||
| if (filteredData.length === 0) { | ||
| filteredData.push({ showEmptyRow: true }); | ||
| } | ||
@@ -198,2 +187,3 @@ const scaleY = !isJelly ? 1 : this.state.rowScale.interpolate({ | ||
| ItemSeparatorComponent={renderSeparator} | ||
| ListEmptyComponent={<Text style={styles.noData}>No data available</Text>} | ||
| scrollEventThrottle={16} | ||
@@ -217,12 +207,5 @@ {...this.props} | ||
| }); | ||
| if (filteredData.length === 1 && | ||
| filteredData[0].showEmptyRow !== null && | ||
| 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} | ||
| // keyExtractor={(item, index) => index.toString()}//dangerous to use index | ||
| /> | ||
@@ -229,0 +212,0 @@ </View> |
| { | ||
| "name": "react-native-complete-flatlist", | ||
| "version": "2.0.3", | ||
| "version": "2.0.4", | ||
| "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", |
| # react-native-complete-flatlist | ||
| Extended version of react native flat list with many built in function such as search, pull to refresh, no data available message if empty row | ||
@@ -6,17 +7,9 @@ | ||
| Caution: | ||
| ```renderItem``` props return ```data``` and ```index``` parameters | ||
| ```data``` parameter returns a single element in ```data``` array. But if search text is not empty, ```data``` parameter will return new structure of JSON object (in order to render highlighted text in jsx). This might break your logic. Therefore, if you want to access original structure of your data, it will be under ```data.cleanData```. Remember, ```data.cleanData``` only exist if search text is not empty (user is searching) | ||
| `renderItem` props return `data` and `index` parameters | ||
| `data` parameter returns a single element in `data` array. But if search text is not empty, `data` parameter will return new structure of JSON object (in order to render highlighted text in jsx). This might break your logic. Therefore, if you want to access original structure of your data, it will be under `data.cleanData`. Remember, `data.cleanData` only exist if search text is not empty (user is searching) | ||
| Usage : | ||
| Usage : | ||
| ``` | ||
@@ -89,2 +82,3 @@ | ||
| ``` | ||
| ### Upgrading from V 1.x.x to V 2.x.x | ||
@@ -94,31 +88,30 @@ | ||
| ### Properties | ||
| ### Properties | ||
| All FlatList props should work plus props mentioned below | ||
| |Prop|Type|Description|Default|Required| | ||
| |----|----|-----------|-------|--------| | ||
| |`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| | ||
| |`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)| | ||
| |`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| | ||
| |`backgroundStyles`|style object|Style of the flatlist background|null|Optional| | ||
| |`searchBarBackgroundStyles`|style object|Style of the searchbar background|null|Optional| | ||
| |`pullToRefreshCallback`|function|Callback function when user pull to refresh|null|Optional (Pull to refresh will not be available if this is not supplied| | ||
| |`isRefreshing`|boolean|if true, the loading will be shown on top of the list. Can only be used if prop `pullToRefreshCallback` not null|false|Optional| | ||
| |`renderItem`|function that return a JSX element (Just like RN's ListView and FlatList)|Template of a row in the Flat List|null (open for PR if anyone wish to make default template for this)|Required (since I dont do default template yet) | | ||
| |`renderSeparator`|function that return a JSX element to be rendered between rows(Just like RN's ListView and FlatList)|Template of separator in the Flat List|a thin line|Optional| | ||
| |`placeholder`|string|Placeholder of search field|"Search ..."|Optional| | ||
| |`searchTextInputStyle`|object (style for React Native's TextInput component)|style for search field|null|Optional| | ||
| |`highlightColor`|color|color of higlighted words background when match search keyword|yellow|Optional| | ||
| |`searchKey`|array of string|This should be name of keys available in data which will be use to search. ```**Warning: nested key not yet supported```|null|Optional (if not supplied, search field will not appear)| | ||
| |`elementBetweenSearchAndList`|JSX element|What to render between searchbar and the list|null|Optional| | ||
| |`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| | ||
| | Prop | Type | Description | Default | Required | | ||
| | ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------- | | ||
| | `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 | | ||
| | `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) | | ||
| | `backgroundStyles` | style object | Style of the flatlist background | null | Optional | | ||
| | `searchBarBackgroundStyles` | style object | Style of the searchbar background | null | Optional | | ||
| | `pullToRefreshCallback` | function | Callback function when user pull to refresh | null | Optional (Pull to refresh will not be available if this is not supplied | | ||
| | `isRefreshing` | boolean | if true, the loading will be shown on top of the list. Can only be used if prop `pullToRefreshCallback` not null | false | Optional | | ||
| | `renderItem` | function that return a JSX element (Just like RN's ListView and FlatList) | Template of a row in the Flat List | null (open for PR if anyone wish to make default template for this) | Required (since I dont do default template yet) | | ||
| | `renderSeparator` | function that return a JSX element to be rendered between rows(Just like RN's ListView and FlatList) | Template of separator in the Flat List | a thin line | Optional | | ||
| | `placeholder` | string | Placeholder of search field | "Search ..." | Optional | | ||
| | `searchTextInputStyle` | object (style for React Native's TextInput component) | style for search field | null | Optional | | ||
| | `highlightColor` | color | color of higlighted words background when match search keyword | yellow | Optional | | ||
| | `searchKey` | array of string | This should be name of keys available in data which will be use to search. `**Warning: nested key not yet supported` | null | Optional (if not supplied, search field will not appear) | | ||
| | `elementBetweenSearchAndList` | JSX element | What to render between searchbar and the list | null | Optional | | ||
| | `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 | | ||
| ### Methods | ||
| ### Methods | ||
| If you have ```ref``` to the component, | ||
| If you have `ref` to the component, | ||
| ``` | ||
@@ -134,6 +127,6 @@ | ||
| you can use any method(s) below | ||
| ```this.completeFlatList.methodName()``` | ||
| `this.completeFlatList.methodName()` | ||
| |Method|Description| | ||
| |------|-----------| | ||
| |clearSearch|Clear search input programmatically| | ||
| | Method | Description | | ||
| | ----------- | ----------------------------------- | | ||
| | clearSearch | Clear search input programmatically | |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by48.94%
24291
Worsened metrics
- Lines of code
- decreased by-6.58%
227
- Number of lines in readme file
- decreased by-4.44%
129
No dependency changes