Building a Custom React Native Search Bar from Scratch

Getting Started with React Native

React Native is a JavaScript-based framework that makes it easy to build cross-platform mobile applications. Before we dive into the code, make sure you have Expo installed on your machine. You can use Visual Studio Code or a similar editor to work on your project. Some basic knowledge of JavaScript and React/React Native will come in handy while following this tutorial.

Building the Search Bar

Let’s start by creating a new Expo project. Run the following command in your terminal:

expo init my-project

Replace my-project with your desired project name. Then, navigate to the newly created directory and run:

expo start

to start the development server.

Project Structure

To keep things organized, create a screens folder and a components folder in your project directory. The screens folder will contain only one file, as we’ll be working with a single screen. The components folder will hold two files: List.js and SearchBar.js.

Defining the Search Bar

In SearchBar.js, we’ll define a custom search bar component. This component will display the search bar and handle user input. We’ll use Expo vector icons to add some visual appeal to our search bar.

import React, { useState } from 'eact';
import { View, TextInput, StyleSheet } from 'eact-native';
import { Feather } from '@expo/vector-icons';

const SearchBar = () => {
  const [searchPhrase, setSearchPhrase] = useState('');

  return (
    
      
       setSearchPhrase(text)}
      />
    
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
    padding: 10,
    borderRadius: 10,
  },
  input: {
    flex: 1,
    fontSize: 18,
    paddingHorizontal: 10,
  },
});

export default SearchBar;

Implementing Text Input Listeners

The text input field contains some interesting props. The onChangeText property allows us to add a listener that triggers every time the text in the input field changes. We’ll use this feature to pass the text input from our child component (SearchBar.js) to its parent component (Home.js).

Filtering the Text Input

In List.js, we’ll use a React Native component called FlatList to render the data. We’ll define three cases to filter the list of programming languages according to the text input. We’ll convert both the input and the names to uppercase and remove all blank spaces to make the filtering logic more robust.

import React from 'eact';
import { FlatList, View, Text } from 'eact-native';

const List = ({ data, searchPhrase }) => {
  const filteredData = data.filter((item) => {
    const itemName = item.name.toUpperCase().replace(/\s+/g, '');
    const searchPhraseUpper = searchPhrase.toUpperCase().replace(/\s+/g, '');

    return itemName.includes(searchPhraseUpper);
  });

  return (
     (
        
          {item.name}
        
      )}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

export default List;

Finalizing the Search Bar

In Home.js, we’ll bring everything together. We’ll import our custom components List and SearchBar and define three different states: clicked, searchPhrase, and fakeData. We’ll use the useEffect Hook to fetch data from a fake API endpoint and store it in the fakeData state.

import React, { useState, useEffect } from 'eact';
import { View, ActivityIndicator } from 'eact-native';
import SearchBar from '../components/SearchBar';
import List from '../components/List';

const Home = () => {
  const [clicked, setClicked] = useState(false);
  const [searchPhrase, setSearchPhrase] = useState('');
  const [fakeData, setFakeData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('undefined.com/api/data');
      const data = await response.json();
      setFakeData(data);
    };

    fetchData();
  }, []);

  return (
    
      
      {fakeData.length > 0? (
        
      ) : (
        
      )}
    
  );
};

export default Home;