Search Using Filter Data React Native

Derry Berni Cahyady
Aug 9, 2017 · 1 min read

If you need search for your apps you can implement this method. To make simple you can save data from server to json and get and set data using AsyncStorage. You just need once call data.

Example Search Data React Native

Add function setSearchText and create state data for backup

constructor(){
super();
this.state ={
data : [],
dataBackup : [],
}
}setSearchText(event){
searchText = event.nativeEvent.text;
data = this.state.dataBackup;
searchText = searchText.trim().toLowerCase();
data = data.filter(l => {
return l.nama.toLowerCase().match( searchText );
});
this.setState({
data : data
});
}

dont forget add function when onchange , i’m using react element here.

render() {
return (
<View>
<SearchBar
lightTheme
onChange={this.setSearchText.bind(this)}
placeholder=’Type Here…’/>
)
}

I hope it’s heplful :D. Please comment below if you have question.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade