react-native-searchable-list
A powerful wrapper around React Native FlatList and SectionList to provide built in search feature.
react-native-searchable-list
is designed to be simple yet a powerful wrapper around react native's FlatList and SectionList components to provide them with search functionality.
Installation
npm i react-native-searchable-list --save
1. SearchableFlatList
API
Props | Description | Data Type | isRequired |
---|---|---|---|
data |
Data for the FlatList | Array |
✅ |
searchTerm |
Searching Term being input by the user. Typically this will be a state variable bound to a text input | String |
✅ |
searchAttribute |
Attribute to be searched in case of array of objects. This will be empty in case of a simple array data | String |
❌ |
ignoreCase |
Case sensitive / Case insensitive search. By default this will be set to true | Boolean |
❌ |
By default the SearchableFlatList
also inherits all the props of a React Native FlatList
. You could use virtually any props you would with a FlatList.
Usage
; <SearchableFlatList data=thisstateflatListData searchTerm=thisstatesearchTerm searchAttribute=thisstatesearchAttribute ignoreCase=true renderItem= <Text>itemname</Text> keyExtractor= itemid />
Example
Github repo with the above examples - https://github.com/Chandrasekar-G/RNSearchableListDemo
1. Simple Array Data
Usage
thisstate = data: "Taj Mahal" "Great Wall of China" "Machu Picchu" "Christ the Redeemer" "Chichen Itza" "Roman Colosseum" "Petra" searchTerm: "" searchAttribute: "" ignoreCase: true ; { const data searchTerm searchAttribute ignoreCase = thisstate; <TextInput style=stylessearch placeholder="Search Wonders" onChangeText= this /> <SearchableFlatList style=styleslist data=data searchTerm=searchTerm ignoreCase=ignoreCase renderItem= <Text style=styleslistItem>item</Text> keyExtractor= item />}
2. Array of Objects
Usage
thisstate = data: id: 1 name: "Taj Mahal" country: "India" id: 2 name: "Great Wall of China" country: "China" id: 3 name: "Machu Picchu" country: "Peru" id: 4 name: "Christ the Redeemer" country: "Brazil" id: 5 name: "Chichen Itza" country: "Mexico" id: 6 name: "Roman Colosseum" country: "Italy" id: 7 name: "Petra" country: "Jordan" searchTerm: "" searchAttribute: "country" ignoreCase: true ; { const data searchTerm searchAttribute ignoreCase = thisstate; <TextInput style=stylessearch placeholder="Search Wonder Country" onChangeText= this /> <SearchableFlatList style=styleslist data=data searchTerm=searchTerm searchAttribute=searchAttribute ignoreCase=ignoreCase renderItem= <Text style=styleslistItem>itemname</Text> keyExtractor= itemid />}
3. Array of Complex Objects
Usage
thisstate = data: id: 1 name: "Taj Mahal" address: continent: "Asia" country: "India" id: 2 name: "Great Wall of China" address: continent: "Asia" country: "China" id: 3 name: "Machu Picchu" address: continent: "South America" country: "Peru" id: 4 name: "Christ the Redeemer" address: continent: "South America" country: "Brazil" id: 5 name: "Chichen Itza" address: continent: "South America" country: "Mexico" id: 6 name: "Roman Colosseum" address: continent: "Europe" country: "Italy" id: 7 name: "Petra" address: continent: "Asia" country: "Jordan" searchTerm: "" searchAttribute: "address.continent" ignoreCase: true ; { const data searchTerm searchAttribute ignoreCase = thisstate; <TextInput style=stylessearch placeholder="Search Wonder Country" onChangeText= this /> <SearchableFlatList style=styleslist data=data searchTerm=searchTerm searchAttribute=searchAttribute ignoreCase=ignoreCase renderItem= <Text style=styleslistItem>itemname</Text> keyExtractor= itemid />}
2. SearchableSectionList
API
Props | Description | Data Type | isRequired |
---|---|---|---|
sections |
Data for the SectionList | Array |
✅ |
searchTerm |
Searching Term being input by the user. Typically this will be a state variable bound to a text input | String |
✅ |
searchByTitle |
Search applies to the title instead of the data is set to true. By default this is set to false | Boolean |
❌ |
searchAttribute |
Attribute to be searched in case of array of objects. This will be empty in case of a simple array data | String |
❌ |
ignoreCase |
Case sensitive / Case insensitive search. By default this will be set to true | Boolean |
❌ |
By default the SearchableSectionList
also inherits all the props of a React Native SectionList
. You could use virtually any props you would with a SectionList
.
Usage
; <SearchableSectionList sections=thisstateflatListData searchTerm=thisstatesearchTerm searchAttribute=thisstatesearchAttribute ignoreCase=true searchByTitle=false renderSectionHeader= <Text style= fontWeight: "bold" >title</Text> renderItem= <Text style=styleslistItem>item</Text> keyExtractor= item />
Example
Github repo with the above examples - https://github.com/Chandrasekar-G/RNSearchableListDemo
1. Simple Array Data
Usage
thisstate = data: title: "Asia" data: "Taj Mahal" "Great Wall of China" "Petra" title: "South America" data: "Machu Picchu" "Christ the Redeemer" "Chichen Itza" title: "Europe" data: "Roman Colosseum" searchTerm: "" searchAttribute: "" searchByTitle: false ignoreCase: true ; { const data searchTerm searchByTitle searchAttribute ignoreCase = thisstate; <TextInput style=stylessearch placeholder="Search Wonders" onChangeText= this /> <SearchableSectionList sections=data searchTerm=searchTerm ignoreCase=ignoreCase renderSectionHeader= <Text style= fontWeight: "bold" >title</Text> renderItem= <Text style=styleslistItem>item</Text> keyExtractor= item />}
2. Array of Objects
Usage
thisstate = data: title: "Asia" data: id: 1 name: "Taj Mahal" address: continent: "Asia" country: "India" id: 2 name: "Great Wall of China" address: continent: "Asia" country: "China" id: 7 name: "Petra" address: continent: "Asia" country: "Jordan" title: "South America" data: id: 3 name: "Machu Picchu" address: continent: "" country: "Peru" id: 4 name: "Christ the Redeemer" address: continent: "South America" country: "Brazil" id: 5 name: "Chichen Itza" address: continent: "South America" country: "Mexico" title: "Europe" data: id: 6 name: "Roman Colosseum" address: continent: "Europe" country: "Italy" searchTerm: "" searchAttribute: "address.country" ignoreCase: true ; { const data searchTerm searchAttribute ignoreCase = thisstate; <TextInput style=stylessearch placeholder="Search Wonder Country" onChangeText= this /> <SearchableSectionList sections=data searchTerm=searchTerm searchAttribute=searchAttribute searchByTitle=false ignoreCase=ignoreCase renderSectionHeader= <Text style= fontWeight: "bold" >title</Text> renderItem= <Text style=styleslistItem>itemname</Text> keyExtractor= itemid />}
3. Search By Title
Usage
thisstate = data: title: "Asia" data: "Taj Mahal" "Great Wall of China" "Petra" title: "South America" data: "Machu Picchu" "Christ the Redeemer" "Chichen Itza" title: "Europe" data: "Roman Colosseum" searchTerm: "" searchAttribute: "" searchByTitle: true ignoreCase: true ; { const data searchTerm searchAttribute ignoreCase = thisstate; <TextInput style=stylessearch placeholder="Search Wonder Country" onChangeText= this /> <SearchableSectionList sections=data searchTerm=searchTerm searchAttribute=searchAttribute searchByTitle=searchByTitle ignoreCase=ignoreCase renderSectionHeader= <Text style= fontWeight: "bold" >title</Text> renderItem= <Text style=styleslistItem>item</Text> keyExtractor= item />}