Searchable Flatlist
Wrapper component over Flatlist component to provide search functionality.
Preview
Usage
Install from npm:
npm install --save searchable-flatlist
Integrate into your app:
;;; const data = id: 1 name: "Francesco Raoux" id: 2 name: "Tasha Bonanno" id: 3 name: "Merle Braunstein" id: 4 name: "Aleda Bouzan" id: 5 name: "Issiah Elnaugh" ; state = searchTerm: "" ; { let sContainer sSearchBar sTextItem = styles; return <View style=sContainer> <TextInput placeholder="Search" style=sSearchBar onChangeText= this /> <SearchableFlatlist searchProperty="name" searchTerm=thisstatesearchTerm data=data containerStyle= flex: 1 renderItem= <Text style=sTextItem>itemname</Text> keyExtractor= itemid /> </View> ; } const styles = StyleSheet;
Props | Description | Value | Required |
---|---|---|---|
data |
data for flatlist | object array |
✔️ |
searchProperty |
property of the object to be searched | string |
✔️ |
searchTerm |
searching term | string |
✔️ |
type |
type of search | one of the following SearchableFlatlist.WORDS SearchableFlatlist.INCLUDES |
✖️ |
SearchableFlatlist.WORDS
- search words
SearchableFlatlist.INCLUDES
- search everything (default)