Adding mock-up data for the result

In this step, we need to add mock-up data for our search bar result. The instances and modules we need to import from the react-native package are given below. You can simply copy the following code:

import { View, Text, StyleSheet, TextInput, FlatList, Keyboard} from 'react-native';

Then, we seed data by creating an array named listItems and fill the array with a mock-up list of data. You can use your own array list as needed.

Here, we add a FlatList component imported for the react-native package to our view with our data list array listItems . You can do that by using the code in the following snippet:

Hence, you get the following result, as shown below:

Focus search bar

In this step, we modify the search bar to produce a focused view of the search bar. Therefore, when a user clicks on the search bar it is highlighted to separate it from the rest of the components in view so that it becomes easy and efficient to use.

For that, first, we need to create a state to handle our search bar state. You can do so by using the following piece of code:

Then, we add CSS styles to our FlatList component result by checking the search bar state to see if it’s true or false. You can use the following piece of code for this purpose:

As a result, you will see the following result in simulation:

Handle focus to search bar by keyboard

In this step, we handle the search bar focus element using the keyboard component from our react-native package.

First, import the keyboard component from the react-native package as follows:

Then, we add the keyboard listener to handle the focusing of the search bar so that each time a key is pressed on the keyboard, the search bar is focused or highlighted. The following piece of code can be used to do this:

We should get the following result:

Changing icon when search bar is focused

This is a simple and final step in which we change the search bar icon to a backward arrow when focused. The backward arrow brings users back out of the focused search bar and into the main view.

You can implement this by adding the following piece of code to your view:

Finally, we can see our final search animation made using the react-native-animatable package below:

Recap

In this tutorial, we learned how to use basic animations in our React Native project using the react-native-animatable package. The steps are very simple and easy to understand. We also looked at a simple implementation of handlers to focus on the search bar. Using the same package, you can also create other types of animations like swipes, bounces, etc. You can view the live demo on snack.

credit

Udemy Searchbar Animation Tutorial from unsure programmer