Updated April 1, 2023
Introduction to React Native Search Bar
To search the specific items or to filter out the specific items, Search bars are used. In simple terms we can say a search bar is a simple input box where users can type search queries. There are different props that are used for the development of search bar that are, platform, clearIcon, searchIcon, inputStyle, containerStyle, onClear, onChangeText, placeholder, etc. In this, we have different varieties for developing search bar which help in providing best user experience. The below image shows how basic search bar looks like:
Syntax:
<SearchBar round
searchIcon={{ size: 24 }}
onChangeText={text => this.SearchFilterFunction(text)} onClear={text => this.SearchFilterFunction('')} placeholder="Type Here..."
value={this.state.search}
/>Examples to Implement React Native Search Bar
Here are some examples:
Example #1
Basic Search Bar
Code:
import React, { Component } from 'react'; import { View,
Text, StyleSheet
}from 'react-native';
import { SearchBar } from 'react-native-elements';
export default class App extends React.Component { state = {
search: '',
};
updateSearch = search => { this.setState({ search });
};
render() {
const { search } = this.state;
return (
<SearchBar
placeholder="Type Here to Search..." onChangeText={this.updateSearch} value={search}
/>
);
}
}Output:
Example #2
Searching in List using Search Bar-
Code:
import * as React from 'react'; import {
Text, View,
StyleSheet, FlatList, ActivityIndicator, Platform,
} from 'react-native';
import { SearchBar } from 'react-native-elements';
export default class App extends React.Component { constructor(props) {
super(props);
this.state = { search: '', isLoading: true }; this.arrayholder = [];
}
componentDidMount() {
return fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(responseJson => { this.setState(
{
isLoading: false, dataSource: responseJson,
},
function() {
this.arrayholder = responseJson;
}
);
})
.catch(error => { console.error(error);
});
}
search = text => { console.log(text);
};
clear = () => { this.search.clear();
};
SearchFilterFunction(text) {
const newData = this.arrayholder.filter(function(item) { const itemData = item.title ? item.title.toUpperCase() :
''.toUpperCase();
const textData = text.toUpperCase(); return itemData.indexOf(textData) > -1;
});
this.setState({ dataSource: newData, search: text,
});
}
ListViewItemSeparator = () => { return (
<View
style={{ height: 0.4,
width: '89%',
backgroundColor: '#141313',
}}
/>
);
};
render() {
if (this.state.isLoading) { return (
<View style={{ flex: 1, paddingTop: 21 }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.viewStyle}>
<SearchBar round
searchIcon={{ size: 25 }}
onChangeText={text => this.SearchFilterFunction(text)} onClear={text => this.SearchFilterFunction('')} placeholder="Type Here to Search..." value={this.state.search}
/>
<FlatList data={this.state.dataSource}
ItemSeparatorComponent={this.ListViewItemSeparator} renderItem={({ item }) => (
<Text style={styles.textStyle}>{item.title}</Text>
)}
enableEmptySections={true} style={{ marginTop: 11 }}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
}
const styles = StyleSheet.create({ viewStyle: {
justifyContent: 'center', flex: 1,
backgroundColor: '#bffff4',
marginTop: Platform.OS == 'ios' ? 29 : 0,
},
textStyle: { padding: 11,
},
});Output:
Example #3
An Animated Search Bar
Code:
import * as React from 'react'; import {
Text, View,
StyleSheet, TextInput, FlatList, Keyboard,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'; import * as Animate from 'react-native-animatable'; const listItems = [
'Writing', 'Learning', 'Dharma', 'Isolation', 'Productivity', 'Personal', 'Meditate',
'Mindfulness',
'Buddha',
'Health', 'Fitness', 'Music',
];
export default class App extends React.Component { state = {
searchBarFocused: false,
};
componentDidMount() {
this.keyboardDidShow = Keyboard.addListener( 'keyboardDidShow',
this.keyboardDidShow
);
this.keyboardWillShow = Keyboard.addListener( 'keyboardWillShow',
this.keyboardWillShow
);
this.keyboardWillHide = Keyboard.addListener( 'keyboardWillHide',
this.keyboardWillHide
);
}
keyboardDidShow = () => {
this.setState({ searchBarFocused: true });
};
keyboardWillShow = () => {
this.setState({ searchBarFocused: true });
};
keyboardWillHide = () => {
this.setState({ searchBarFocused: false });
};
render() { return (
<View style={{ flex: 1, paddingTop: 21 }}>
<View
style={{ height: 82,
backgroundColor: '#c5ff59', justifyContent: 'center', paddingHorizontal: 5,
}}>
<Animate.View animation="slideInRight"
duration={1000} style={{
height: 51, backgroundColor: '#ffffff', flexDirection: 'row', padding: 4,
alignItems: 'center',
}}>
<Icon
name={
this.state.searchBarFocused ? 'md-arrow-back' : 'ios-search'
}
style={{ fontSize: 24 }}
/>
<TextInput placeholder="Search Here"
style={{ fontSize: 24, paddingLeft: 14 }}
/>
</Animate.View>
</View>
<FlatList style={{
backgroundColor: this.state.searchBarFocused
? '#6e6363'
: '#ffffff',
}}
data={listItems} renderItem={({ item }) => (
<Text style={{ padding: 21, fontSize: 19 }}>{item}</Text>
)}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
}Output:
Example #4
A Collapsible Search Bar
Code:
import React, { Component } from 'react'; import { ScrollView
, StyleSheet
, View
, Animated
, Text
, Platform, }
from 'react-native';
const Header_Maximum_Height = 150; const Header_Minimum_Height = 50;
//Minimum Height of the Header
export default class Mynewproject extends Component<{}> { constructor() {
super();
this.AnimatedHeaderValue = new Animated.Value(0);
}
render() {
const AnimateHeaderBackgroundColor = this.AnimatedHeaderValue.interpolate({
inputRange: [0, Header_Maximum_Height - Header_Minimum_Height], outputRange: ['#ba52ff', '#f522ab'],
extrapolate: 'clamp',
});
const AnimateHeaderHeight = this.AnimatedHeaderValue.interpolate({ inputRange: [0, Header_Maximum_Height - Header_Minimum_Height], outputRange: [Header_Maximum_Height, Header_Minimum_Height], extrapolate: 'clamp',
});
} },
return (
<View style={styles.MainContainer}>
<ScrollView scrollEventThrottle={16}
contentContainerStyle={{ paddingTop: Header_Maximum_Height }} onScroll={Animated.event([
{ nativeEvent: { contentOffset: { y: this.AnimatedHeaderValue }
])}>
{/* Put all of the Components here inside ScrollView */}
t;Text style={styles.TextViewStyle}>Avatar</Text>
<Text style={styles.TextViewStyle}>Icon</Text>
<Text style={styles.TextViewStyle}>Tile</Text>
<Text style={styles.TextViewStyle}>Slider</Text>
<Text style={styles.TextViewStyle}>Search Bar</Text>
<Text style={styles.TextViewStyle}>Rating</Text>
<Text style={styles.TextViewStyle}>Pricing</Text>
<Text style={styles.TextViewStyle}>List Item</Text>
<Text style={styles.TextViewStyle}>Header</Text>
<Text style={styles.TextViewStyle}>Divider</Text>
<Text style={styles.TextViewStyle}>Check Box</Text>
<Text style={styles.TextViewStyle}>Card</Text>
<Text style={styles.TextViewStyle}>Button</Text>
<Text style={styles.TextViewStyle}>Input</Text>
<Text style={styles.TextViewStyle}>Text</Text>
</ScrollView>
<Animated.View style={[
styles.Header,
{
height: AnimateHeaderHeight,
backgroundColor: AnimateHeaderBackgroundColor,
},
]}>
<Text style={styles.HeaderInsideText}> React Native Elements List
</Text>
</Animated.View>
</View>
);
}
}
const styles = StyleSheet.create({ MainContainer: {
flex: 1,
paddingTop: Platform.OS == 'ios' ? 20 : 0,
},
Header: {
justifyContent: 'center', alignItems: 'center', position: 'absolute', left: 0,
right: 0,
top: Platform.OS == 'ios' ? 20 : 0,
},
HeaderInsideText: { color: '#ffe48f', fontSize: 19, textAlign: 'center',
},
TextViewStyle: { textAlign: 'center', color: '#0a0a0a', fontSize: 19,
margin: 4,
padding: 6,
},
});Output:
Conclusion
On the basis of above discussion, we got to know the different varieties of search bar that can be developed in the it, because of this ability of it, i.e. to provide variety of options which helps in providing the best user experience. The different props of search bar in it helps in developing more interactive search bars. As we have discussed the different formats of search bar from basic search bar to animated search bar then finally to collapsible search bar, we got to know that it’s very easy to develop search bar with animations in this. So for great user experience with good graphics and animations,it is the best option to consider.
Recommended Articles
This is a guide to React Native Search Bar. Here we discuss an introduction to React Native Search Bar with respective examples and appropriate syntax. You can also go through our other related articles to learn more –
