Search-bar in React-Native

Custom search bar in react-native.

We’ll make something like this from scratch but twist is we can customize it however we like to whatever state we prefer.

In this tutorial we’ll add:

1- Basic search bar

2- Search icon on left

3- Clear icon on right (but only when query is not null)

4- Error indicator + Error message on bottom of bar.

Oh & if you prefer video tutorials more than articles I’ve linked youtube link down below.

Let’s get coding…

Here’s a quick to-do, make a folder name it screen or smt like that and put your screens in there & put your search-bar component in something like shared or any such folder so it’s easier for other devs to know it’s a shared component and can be used in multiple screens. I mean I like to work like that you should too.

Searchbar.js

export default function Searchbar({ value, updateSearch, style }) {

    const [query, setQuery] = useState(value);
    const [error, setError] = useState()
    return (
        <View style={[styles.container, style]}>
          
        </View >
    )
}

So, very simple just export a function named searchbar, it takes in three arguments, styles are optional here it’s just there to give your screen access to give margins or such things to adjust their bar.

Next we made two states one holds query initiated it with value from parent if we want to make it dynamic & other holds any generated errors.

<View style={styles.searchContainer}>
                <View style={styles.vwSearch}>
                    <Image
                        style={styles.icSearch}
                        source={require('../../assets/images/ic_search.png')} />
                </View>
</View>

Our search bar basically consists of four parts:

Left icon, right icon, text-input in center & an error message at bottom. So we’re started with left icon.

You’ll find stylesheet in Github link below I want to keep articles to-point and clutter-free.

     <TextInput
                    value={query}
                    placeholder="Search"
                    style={styles.textInput}
                    
                />

Next is our textinput which is main component of our search bar & we’re initiating with our query state so later after we can update query state and get results:

onChangeText={(text) => {
                        var letters = /^$|^[a-zA-Z._\b ]+$/;
                        if (text.match(letters)) {
                            setQuery(text)
                            updateSearch(text)
                            if (error)
                                setError(false)
                        }
                        else setError("Please only enter alphabets")
                    }}

In your onChangeText function of searchbar you can put your logics & stuff.

I’m checking my query against a regular expression which basically validates Alphabets, spaces & backspaces, any other thing & we’ll throw an error.

If query matches my regex than we can update out state, call our function to update search & set error message to false if it was previously set true.

That’s pretty much our logic part, back to designing:

{
     query ?
      <TouchableOpacity
         onPress={() => setQuery('')}
         style={styles.vwClear}>
         <Image style={styles.icClear}
            source={require('../../assets/images/ic_clear.png')} />
      </TouchableOpacity>
     : 
     <View style={styles.vwClear} />
}

Now if something is typed in our search-bar we want to allow our user to clear search-bar, for that we’ll show a clear button, this code above checks query state and shows button according to that & onPress of that button we simply set query to null.

Here a thing to note is I added a simple <View/> with same styles as our Button, it’s there to reduce fluctuation if user enters and removes a character.

{
    error &&
       <Text style={styles.txtError}>
         {error}
       </Text>
}

If there’s an error set in onChangeText function then we’ll show error message to user otherwise nothing.

That’s it, our Textinpu…. our search-bar is ready, now we can easily use it anywhere in our code.

I’m using this search-bar in my Home.js file by simply accessing it from shared folder:

I used my search-bar component & passed it updateSearch function, you can put your logic here however you want to filter your day or anything according to every screen requirement.

That’s all folks!
Here’s the video tutorial for this thing if you understand better with videos rather than articles:

Andddd if you just a copy-paste person like me, here’s the code:
Github: https://github.com/swairAQ/searchbar-reacnative

Now it’s all worth a clap, isn’t it?

Oh & if you want to customize this search-bar as a dropdown search-bar, I’ve already done that hahh checkmate:
https://swairaq.medium.com/react-native-dropdown-searchbar-adc4532f7535