React Native Plant App UI #16: Search bar Animation

This tutorial is the sixteenth part of our React Native Plant App tutorial series. In the previous part, we successfully implemented the Explore and Footer sections of the Explore screen. Hence, completing the overall UI of the Explore screen. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous part in order to get insight and knowledge of the overall project.

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

As mentioned in the previous parts, this motivation to do this tutorial series came from the React Native App Templates that provide a wide variety of mobile application templates written in React Native and powered by universal features and design. These app templates allow us to implement our own apps and even start our own startups. And, this sixteenth part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kitfor the Plant App. The video tutorial delivers the coding implementation of the overall app very thoroughly. However, there is no verbal guidance for coding and implementation. Hence, this tutorial series is the implementation of the same coding style and designs in the form of the article.

Overview

In this sixteenth part of this tutorial series, we are going to add enlarging animation to the Search input field of the Explore Screen. The idea is to enlarge the search input field when we click on it. Then, we are also going to toggle between the search icon and remove icon based on if there are some characters in the search input. This part is going to be sort and sweet.

So, let us begin!!

Implementing an Animated Search Input field

Here, we are going to add an animation to the search input field in the header section of the Explore screen. We are going to enlarge or expand the search input when we tap on it. But first, we need to import the Animated component from the react-native package. The Animated component allows us to make different animation configuration and also bind it to different components. In order to import the Animated component, we have to use the code from the following code snippet:

import { StyleSheet, Dimensions, TouchableOpacity, Image, Animated } from 'react-native';

Now, we need to define a state variable which will be set to the value from the Animated component. The state variable is called searchFocus. It is defined as state as shown in the following code snippet:

state = { 
      searchFocus: new Animated.Value(0.6),
      searchString: null,
    }

Here, we have initialized the searchFocus state to Animated value of 0.6. Now, we need to define this state in the renderSearch() method. For this, we need to use the code from the following code snippet:

renderSearch() {
    const { searchString, searchFocus } = this.state;
    const isEditing = searchFocus && searchString;

Here, we have defined the searchFocus variable from the state data. Then, based on the searchFocus value and searchString value, we have defined a new variable called isEditing whose value will be either true or false.  

Configuring Input with additional props

Here, we are going to add some additional props to the Input component of the renderSearch() method. For that, we need to use the code from the following code snippet in the renderSearch() method:

return(
    <Block animated middle flex={searchFocus} style={styles.search}>
      <Input
        placeholder="Search"
        placeholderTextColor={theme.colors.gray2}
        style={styles.searchInput}
        onChangeText={text => this.setState({ searchString: text })}
        value={searchString}
        onRightPress={() => isEditing ? this.setState({ searchString: null }) : null}
        rightStyle={styles.searchRight}
        rightLabel={
          <FontAwesome
            name={isEditing ? "close" : "search"}
            size={theme.sizes.base / 1.6}
            color={theme.colors.gray2}
            style={styles.searchIcon}
          />
        }
      />
    </Block>
  )

Here, we have added the onRightPress event whose trigger depends on the isEditing value. On the basis of isEditing value, we can either change the searchString state to null or do nothing. Then, we have also added the icon on the basis of isEditing value.

Hence, we will get the following result in the emulator screen: As we can see, when we type something on the Search input field the icon on the search bar changes to close icon. And, by pressing the close icon we can erase the text in the search input.  

Adding Animation

Now, we are going to add the animation to the Search input field. For that, we need to define a new function called handleSearchFocus(). This function will handle the overall enlarging animation of the search bar. The overall implementation of this function is provided in the code snippet below:

handleSearchFocus(status) {
    Animated.timing(
      this.state.searchFocus,
      {
        toValue: status ? 0.8 : 0.6, // status === true, increase flex size
        duration: 150, // ms
      }
    ).start();
  }

Here, we have used the timing function of the Animated component. When the function is triggered, the animation is started using start() function. In the timing function, we have taken the value of searchFocus state and also set the value of the animation in the toValue option and animation duration as well in the duration option. This function takes a parameter called status on the basis of use toValue config is changed to increase or decrease the flex size of the search input.

Now, we need to call this function in the Input component of the renderSearch() function as shown in the code snippet below:

<Input
   placeholder="Search"
   placeholderTextColor={theme.colors.gray2}
   style={styles.searchInput}
   onFocus={() => this.handleSearchFocus(true)}
   onBlur={() => this.handleSearchFocus(false)}
   onChangeText={text => this.setState({ searchString: text })}
   value={searchString}
   onRightPress={() => isEditing ? this.setState({ searchString: null }) : null}
   rightStyle={styles.searchRight}
   rightLabel={
     <FontAwesome
       name={isEditing ? "close" : "search"}
       size={theme.sizes.base / 1.6}
       color={theme.colors.gray2}
       style={styles.searchIcon}
     />
   }
 />

Here, we have called the handleSearchFocus() function in the onFocus and onBlur event of the Input component. Based on the type of event, the parameters are set as a boolean value.

Hence, we will get the following result in the emulator screen: As we can see, the search input field enlarges itself when we tap on it. And, when we end the typing the search bar goes back to its original size. With this, we have come to the end of this short tutorial part.

Finally, we have successfully implemented the animation to the search input field of the Header section in the Explore Screen of the React Native Plant UI App.  

Conclusion

This tutorial is the sixteenth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the fifteenth part of this tutorial series. In this tutorial part, we got to learn about the props that we can use in the Input component in order to give it more functions. Using those props, we learned how to add the icons based on conditions. Then, we got detail insight into how to add the enlarging animation to the search bar in the Explore screen.

In the next part of this tutorial series, we are going to start implementing the Product Screen.

  If you like this article post, please like it and share it. And, if you have any problem or issue, please comment below. Thanks!!