How to add SearchBar in React Native ?
In this article, we'll add search functionality in React-Native. This can be regarded as a continuation of the React native flatlist component. In the article above, we created a flatlist using the Flatlist component. Let's make it searchable using the SearchBar component. To add a SearchBar to your Flatlist, the basic syntax looks like the following. Let's watch a demo video of what we are going to develop.
Demo Video
Syntax
<SearchBar
placeholder="Type Here..."
onChangeText={this.updateSearch}
value={search}
/>
Approach
The above syntax adds a standard platform-specific search bar in your application, which is usually a rectangular box with space for input. Upon scrolling to the implementation section, you'd notice that we add a prop placeholder that specifies the default value that the search bar displays when opened. Also, we want the search bar to be light-themed with rounded edges, hence the following props. Now, when we want to search a value, we'd want to display that value being entered in the search bar, for that we add an object search value from the Search class, by default it is empty, but as we type, it is modified and stores our present text input. Since the search values are custom, we turn off the auto Correct option and invoke the search Function as soon as the text is entered in the search field.
Props in SearchBar
Prop | Description |
|---|---|
cancelButtonProps | It specifies various props passed to cancel Button, which can customize its color, button style, text color, etc. |
cancelButtonTitle | It is used to customize the title of the cancel button present on the right side. |
cancelIcon | This prop allows you to override the Icon props or use a custom component, also, this is specific to the Android platform. |
clearIcon | This prop allows you to override the Icon props or use a custom component. Values such as null or false can be used to hide the icon. |
containerStyle | The container of the SearchBar can be stylised using this prop. |
inputContainerStyle | This prop is used to style the container where the text is input. |
inputStyle | This prop is used to stylize the input text. |
leftIconContainerStyle | Style the icon container on the left side. |
lightTheme | This prop changes the theme to light theme. |
loadingProps | This prop is passed to ActivityIndicator. |
onCancel | This prop lets the callback fire when pressing the cancel button (IOS) or the back icon (Android). |
onChangeText | This prop invokes the method that should fire when text is changed. |
onClear | This specifies the method to fire when input is cleared. |
placeholder | This prop is used to set the placeholder text. |
placeholderTextColor | This prop sets the color of the placeholder text. |
platform | This prop specifies the look and feel of the search bar. The values to choose from are "default", "IOS", "Android". |
rightIconContainerStyle | We can style the icon container on the right side using this prop. |
round | This prop is used to change the TextInput styling to rounded corners. |
searchIcon | This prop allows you to override the Icon props or use a custom component. Use null or false to hide the icon. |
showCancel | If this propis set to true, the cancel button will stay visible even after blur events. |
showLoading | This propshows the loading ActivityIndicator effect. |
underlineColorAndroid | This prop specifies a transparent underline color, other than the default one. |
Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --template
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.
It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.
Now go into your project folder, i.e., react-native-demo
cd app-nameProject Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo startThen, the application will display a QR code.
- For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
- For iOS users, simply scan the QR code using the Camera app.
- If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
Step 3: Start Coding
Now let's see the implementation of how to add a search bar using the above approach.
- Import libraries: Import required libraries at the top of the file.
// Import React and Component from react library
import React from "react";
// Import necessary components from react-native
import { StyleSheet, Text, View, FlatList } from "react-native";
// Import SearchBar component from react-native-elements library
import { SearchBar } from "react-native-elements";
- StyleSheet: Create a StyleSheet to style components like container, item, and itemText.
// Styles for the components
const styles = StyleSheet.create({
container: {
flex: 1, // Take up the full screen
marginTop: 30, // Margin from the top
padding: 10, // Padding inside the container
},
item: {
backgroundColor: "green", // Background color for each item
padding: 20, // Padding inside each item
marginVertical: 8, // Vertical margin between items
marginHorizontal: 16, // Horizontal margin between items
borderRadius: 8, // Rounded corners for each item
},
itemText: {
color: "white", // Text color
fontSize: 18, // Font size for the text
},
});
- Sample Data: This is the list of data that is displayed on the screen using FlatList.
// Sample data to display in the FlatList
const DATA = [
{ id: "1", title: "Data Structures" },
{ id: "2", title: "STL" },
{ id: "3", title: "C++" },
{ id: "4", title: "Java" },
{ id: "5", title: "Python" },
{ id: "6", title: "CP" },
{ id: "7", title: "ReactJs" },
{ id: "8", title: "NodeJs" },
{ id: "9", title: "MongoDb" },
{ id: "10", title: "ExpressJs" },
{ id: "11", title: "PHP" },
{ id: "12", title: "MySql" },
];
- SearchBar: This Component is used to take input from the user and search for the user's requested item in the list.
{/* SearchBar component for user input */}
<SearchBar
placeholder="Search Here..." // Placeholder text for the search bar
lightTheme // Use light theme for the search bar
round // Make the search bar round
value={searchValue} // Bind the search value to the state
onChangeText={searchFunction} // Call searchFunction on text change
autoCorrect={false} // Disable auto-correct
backgroundColor="white" // Background color of the search bar
containerStyle={{
backgroundColor: "white", // Background color of the container
borderTopWidth: 0, // Remove top border
borderBottomWidth: 0, // Remove bottom border
padding: 10, // Padding around the container
borderColor: "black", // Border color
}}
inputContainerStyle={{
backgroundColor: "lightgrey", // Background color of the input container
borderRadius: 10, // Rounded corners for the input container
}}
inputStyle={{
backgroundColor: "white", // Background color of the input field
borderRadius: 10, // Rounded corners for the input field
padding: 10, // Padding inside the input field
}}
searchIcon={{ size: 24, color: "black" }} // Style for the search icon
clearIcon={{ size: 24, color: "black" }} // Style for the clear icon
cancelIcon={{ size: 24, color: "black" }} // Style for the cancel icon
/>
- FlatList: This Component is used to display a list of data in a vertically or horizontal scrollable list.
{/* FlatList to display the filtered data */}
<FlatList
data={data} // Data to display in the list
renderItem={({ item }) => <Item title={item.title} />} // Render each item using the Item component
keyExtractor={(item) => item.id} // Unique key for each item
/>
- Item: This functional component is used to render each item in Flatlist with respective style like background color, padding, border radius ,text color, etc.
// Functional component to render each item in the FlatList
const Item = ({ title }) => (
<View style={styles.item}> {/* Style for each item */}
<Text style={styles.itemText}>{title}</Text> {/* Display the title */}
</View>
);
- arrayholder: It holds the original data so that we can filter it based on the search input.
const arrayholder = React.useRef(DATA);
- searchFunction: This function is the business logic for search functionality.
// Function to handle search functionality
const searchFunction = (text) => {
const updatedData = arrayholder.current.filter((item) => {
const itemData = item.title.toUpperCase(); // Convert item title to uppercase
const textData = text.toUpperCase(); // Convert search text to uppercase
return itemData.includes(textData); // Check if item title includes the search text
});
setData(updatedData); // Update the filtered data
setSearchValue(text); // Update the search value
};
- useState: This is used to manage the state of the filter Data and the search input value.
// State to manage the filtered data and search input
const [data, setData] = React.useState(DATA);
// State to manage the search input value
const [searchValue, setSearchValue] = React.useState("");
- App Component: Wrap the SearchBar and FlatList with a View and return that inside the App function to render and place the useState, arrayholder inside the App function, also make sure to export the App.
export default Search = () => {
// State to manage the filtered data and search input
const [data, setData] = React.useState(DATA);
// State to manage the search input value
const [searchValue, setSearchValue] = React.useState("");
// Ref to hold the original data
const arrayholder = React.useRef(DATA);
// Function to handle search functionality
const searchFunction = (text) => {
const updatedData = arrayholder.current.filter((item) => {
const itemData = item.title.toUpperCase(); // Convert item title to uppercase
const textData = text.toUpperCase(); // Convert search text to uppercase
return itemData.includes(textData); // Check if item title includes the search text
});
setData(updatedData); // Update the filtered data
setSearchValue(text); // Update the search value
};
return (
<View style={styles.container}> {/* Main container style */}
{/* SearchBar component for user input */}
<SearchBar
placeholder="Search Here..." // Placeholder text for the search bar
lightTheme // Use light theme for the search bar
round // Make the search bar round
value={searchValue} // Bind the search value to the state
onChangeText={searchFunction} // Call searchFunction on text change
autoCorrect={false} // Disable auto-correct
backgroundColor="white" // Background color of the search bar
containerStyle={{
backgroundColor: "white", // Background color of the container
borderTopWidth: 0, // Remove top border
borderBottomWidth: 0, // Remove bottom border
padding: 10, // Padding around the container
borderColor: "black", // Border color
}}
inputContainerStyle={{
backgroundColor: "lightgrey", // Background color of the input container
borderRadius: 10, // Rounded corners for the input container
}}
inputStyle={{
backgroundColor: "white", // Background color of the input field
borderRadius: 10, // Rounded corners for the input field
padding: 10, // Padding inside the input field
}}
searchIcon={{ size: 24, color: "black" }} // Style for the search icon
clearIcon={{ size: 24, color: "black" }} // Style for the clear icon
cancelIcon={{ size: 24, color: "black" }} // Style for the cancel icon
/>
{/* FlatList to display the filtered data */}
<FlatList
data={data} // Data to display in the list
renderItem={({ item }) => <Item title={item.title} />} // Render each item using the Item component
keyExtractor={(item) => item.id} // Unique key for each item
/>
</View>
);
};
Complete Source Code
App.js
// Import React and Component from react library
import React from "react";
// Import necessary components from react-native
import { StyleSheet, Text, View, FlatList } from "react-native";
// Import SearchBar component from react-native-elements library
import { SearchBar } from "react-native-elements";
// Sample data to display in the FlatList
const DATA = [
{ id: "1", title: "Data Structures" },
{ id: "2", title: "STL" },
{ id: "3", title: "C++" },
{ id: "4", title: "Java" },
{ id: "5", title: "Python" },
{ id: "6", title: "CP" },
{ id: "7", title: "ReactJs" },
{ id: "8", title: "NodeJs" },
{ id: "9", title: "MongoDb" },
{ id: "10", title: "ExpressJs" },
{ id: "11", title: "PHP" },
{ id: "12", title: "MySql" },
];
// Functional component to render each item in the FlatList
const Item = ({ title }) => (
<View style={styles.item}> {/* Style for each item */}
<Text style={styles.itemText}>{title}</Text> {/* Display the title */}
</View>
);
export default Search = () => {
// State to manage the filtered data and search input
const [data, setData] = React.useState(DATA);
// State to manage the search input value
const [searchValue, setSearchValue] = React.useState("");
// Ref to hold the original data
const arrayholder = React.useRef(DATA);
// Function to handle search functionality
const searchFunction = (text) => {
const updatedData = arrayholder.current.filter((item) => {
const itemData = item.title.toUpperCase(); // Convert item title to uppercase
const textData = text.toUpperCase(); // Convert search text to uppercase
return itemData.includes(textData); // Check if item title includes the search text
});
setData(updatedData); // Update the filtered data
setSearchValue(text); // Update the search value
};
return (
<View style={styles.container}> {/* Main container style */}
{/* SearchBar component for user input */}
<SearchBar
placeholder="Search Here..." // Placeholder text for the search bar
lightTheme // Use light theme for the search bar
round // Make the search bar round
value={searchValue} // Bind the search value to the state
onChangeText={searchFunction} // Call searchFunction on text change
autoCorrect={false} // Disable auto-correct
backgroundColor="white" // Background color of the search bar
containerStyle={{
backgroundColor: "white", // Background color of the container
borderTopWidth: 0, // Remove top border
borderBottomWidth: 0, // Remove bottom border
padding: 10, // Padding around the container
borderColor: "black", // Border color
}}
inputContainerStyle={{
backgroundColor: "lightgrey", // Background color of the input container
borderRadius: 10, // Rounded corners for the input container
}}
inputStyle={{
backgroundColor: "white", // Background color of the input field
borderRadius: 10, // Rounded corners for the input field
padding: 10, // Padding inside the input field
}}
searchIcon={{ size: 24, color: "black" }} // Style for the search icon
clearIcon={{ size: 24, color: "black" }} // Style for the clear icon
cancelIcon={{ size: 24, color: "black" }} // Style for the cancel icon
/>
{/* FlatList to display the filtered data */}
<FlatList
data={data} // Data to display in the list
renderItem={({ item }) => <Item title={item.title} />} // Render each item using the Item component
keyExtractor={(item) => item.id} // Unique key for each item
/>
</View>
);
};
// Styles for the components
const styles = StyleSheet.create({
container: {
flex: 1, // Take up the full screen
marginTop: 30, // Margin from the top
padding: 10, // Padding inside the container
},
item: {
backgroundColor: "green", // Background color for each item
padding: 20, // Padding inside each item
marginVertical: 8, // Vertical margin between items
marginHorizontal: 16, // Horizontal margin between items
borderRadius: 8, // Rounded corners for each item
},
itemText: {
color: "white", // Text color
fontSize: 18, // Font size for the text
},
});
