fbpx

React Native Plant App UI #14: Implementing Explore Screen

This tutorial is the fourteenth part of our React Native Plant App tutorial series. In the previous part, we successfully implemented the handling of inputs and tabs of the Settings and Browse screen as well as set up the navigation to 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 stated in the previous parts, this tutorial series was inspired by 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 fourteenth part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kit for 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 fourteenth part of this tutorial series, we are going to implement some of the UI sections of the Explore screen. The Explore Screen will contain three UI sections. The three UI sections are the header section, the explore section and the footer section. In this tutorial part, we are going to implement the header section. The header section will contain the screen title and the search input field. Then, we are also going to separate the UI sections in terms of functions.

So, let us begin!!

 

Implementing Header Section

Here, we are going to implement the header section of the Explore screen. The header section will contain the screen title and the search input style. For now, we are just going to put in the simple template consisting of text only. For that, we need to use the code from the following code snippet in the render() function of Explore.js file:

render(){
        return (
            <Block flex={false} row center space="between" style={styles.header}>
                 <Text h1 bold>Explore</Text>
                 <Text h1 bold>Input</Text>
            </Block>
        
        );
    }

Here, we have a parent Block component wrapping the Text components. The Block component, as well as the Text components, are bound to some style props. The required style is provided in the code snippet below:

header: {
  paddingHorizontal: theme.sizes.base * 2,
  paddingBottom: theme.sizes.base * 2
},

Hence, we will get the following result in the emulator screen:

As we can see, we have got the Explore screen title text and the location where we need to place the search input.

 

Implementing search input field

Now, we are going to implement the search input in the place of the input Text component. But first, we need to import the Input component from the predefine custom components into our Explore.js file as shown in the code snippet below:

import { Button, Block, Text, Input} from '../components';

Now, we are going to define a new function called renderSearch(). This function will return the template for the search input in the Explore screen header section. The overall implementation of this function is provided in the code snippet below:

renderSearch(){
        return(
            <Block middle flex={0.6}>
                <Input 
                    placeholder="Search"
                    placeholderTextColor={theme.colors.gray}
                />
            </Block>
        )
    }

The function returns the template with the parent Block component with some style props. The Block component wraps the Input component with placeholder prop configurations. 

Now, we need to call the renderSearch() function in our render() function as shown in the code snippet below:

render(){
        return (
            <Block flex={false} row center space="between" style={styles.header}>
                 <Text h1 bold>Explore</Text>
                 {this.renderSearch()}
            </Block>
        
        );
    }

Hence, we will get the following result in the emulator screen:

As we can see, we have got the search input field on the right side of the header section. But, the input field does not look appealing at all. So, we need to apply some style configurations to it in order to make it look good.

 

Configuring styles

Here, we are going to style the search input template in order to make it look nice. For that, we are going to make use of the Dimensions component from the react-native package. First, we need to import the Dimensions component into our Explore.js file as shown in the code snippet below:

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

Now, we need to define the height and width dimension constant and set it to the get() function of the Dimensions component with the ‘window’ parameter. For this, we need to use the code from the following code snippet:

const { width, height } = Dimensions.get('window');

Now, we need to define a new state in order to handle the input string in the search input field. The new state variable is called searchString. In order to define it, we need to use the code from the following code snippet:

state = { 
        searchString: null,
   }

Next, we need to initialize the searchString state variable inside the renderSearch() function as shown in the code snippet below:

renderSearch(){
        const {searchString} = this.state;

Now, we are going to add some style configurations as well as prop configurations to the Input component in the renderSearch() function. For that, we need to use the code from the following code snippet:

return(
           <Block middle flex={0.6} style={styles.search}>
               <Input 
                   placeholder="Search"
                   placeholderTextColor={theme.colors.gray}
                   style={styles.searchInput}
                   onChangeText={text => this.setState({searchString : text})}
                   value={searchString}
                   rightStyle={styles.searchRight}
               />
           </Block>
       )

Here, we have added the onChangeText event which is used to change the state of searchString state variable based on the characters that will be typed in the search input field. The value prop is set to searchString state. Then, we have some styles configured to the Input field which are provided in the code snippet below:

searchInput: {
  fontSize: theme.sizes.caption,
  height: theme.sizes.base * 2,
  backgroundColor: 'rgba(142, 142, 147, 0.06)',
  borderColor: 'rgba(142, 142, 147, 0.06)',
  paddingLeft: theme.sizes.base / 1.333,
  paddingRight: theme.sizes.base * 1.5,
},
searchRight: {
  top: 0,
  marginVertical: 0,
  backgroundColor: 'transparent'
},

Hence, we will get the following result in the emulator screen:

As we can see, we have got the search input field with proper style now.  But, it seems that something is still missing in the search input field. The thing that is missing is the search icon. Now, we are going to place the search icon in the search input field

 

Adding Search Icon

Here, we are going to add the Search icon to the search input field of the Explore screen. For that, we need to install the package called react-native-vector-icons. This package supplies us with numerous icons from different icon packages like Ionicons, MaterialDesign, FontAwesome, etc. Now, in order to install this package into our project, we need to run the following command in our project command prompt:

>>>expo install react-native-vector-icons

After the completion of the installation, we need to import this package into our Explore.js screen as shown in the code snippet below:

import FontAwesome from 'react-native-vector-icons/FontAwesome';

Here, we have imported the FontAwesome icon package from the react-native-vector-icons package as the FontAwesome component.

Now, we need to make use of the FontAwesome component in the renderSearch() function as shown in the code snippet below:

<Input 
    placeholder="Search"
    placeholderTextColor={theme.colors.gray}
    style={styles.searchInput}
    onChangeText={text => this.setState({searchString : text})}
    value={searchString}
    rightStyle={styles.searchRight}
    rightLabel={
        <FontAwesome
          name="search"
          size={theme.sizes.base / 1.6}
          color={theme.colors.gray2}
          style={styles.searchIcon}
        />
    }
/>

Here, we have added the rightLabel prop to the Input component. The rightLabel prop takes the template for the icon component which is FontAwesome. The FontAwesome component is bound to some icon props for the search and also some style props. The required style is provided in the code snippet below:

searchIcon: {
  position: 'absolute',
  right: theme.sizes.base / 1.333,
  top: theme.sizes.base / 1.6,
},

Hence, we will get the following result in the emulator screen:

As we can see, we have got the search input field with the proper style and search icon in the header section of the Explore screen. This completes our implementation of the Header UI section in the Explore screen.

 

Separating UI sections in Explore screen

Here, we are going to section out the remaining UI sections of the Explore screen in terms of methods. The remaining two UI sections are the Explore section and the Footer section. Here, we are going to create two functions that will return the templates for their respective sections.

First, we are going to create the function for the Explore section called renderExplore(). This function will return the template for the Explore section which will contain the display of images. For now, we are just going to place a simple text inside as a template. For that, we need to use the code from the following code snippet:

renderExplore(){
     return(
         <Block>
             <Text>Explore Section</Text>
         </Block>
     )
 }

Now, we are going to create the function for the Footer section called renderFooter(). This function will return the template for the Footer section which will contain a button with a linear gradient style. For now, we are just going to place a simple text inside as a template. For that, we need to use the code from the following code snippet:

renderFooter(){
    return(
        <Block style={styles.footer}>
            <Text>Footer section</Text>
        </Block>
    )
}

Now, we need to call both of these functions into the render() function of our Explore.js file as shown in the code snippet below:

render(){
        return (
            <Block>
                <Block flex={false} row center space="between" style={styles.header}>
                    <Text h1 bold>Explore</Text>
                    {this.renderSearch()}
                </Block>

                <ScrollView showsVerticalScrollIndicator={false} style={styles.explore}>
                    {this.renderExplore()}
                </ScrollView>

                {this.renderFooter()}
            </Block>
        );
    }

Here, we have called the renderExplore() function inside the ScrollView component. And just below the ScrollView component, we have called the renderFooter() function. The required styles are provided in the code snippet below:

explore: {
  marginHorizontal: theme.sizes.padding * 1.25,
},
footer: {
  position: 'absolute',
  bottom: 0,
  right: 0,
  left: 0,
  overflow: 'visible',
  alignItems: 'center',
  justifyContent: 'center',
  height: height * 0.1,
  width,
  paddingBottom: theme.sizes.base * 4,
}  

Hence, we will get the following result in the emulator screen:

As we can see, we have separated out the Explore section and the Footer section of the Explore screen. Here, the Footer section will overall lap the Explore section after will implement these sections completely in upcoming tutorials. For now, we are going to end this tutorial part here.

Finally, we have successfully implemented the overall UI of the header section in the Explore screen of React Native Plant UI App.

 

Conclusion

This tutorial is the fourteenth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the thirteenth part of this tutorial series. In this part of the tutorial, we implemented the header section of the Explore screen. Doing so, we learned how to implement the search input as well as configure style to it. We also learned how to add a search icon to it. Lastly, we also sectioned out the remaining UI portions of the Explore screen in terms of functions. The remaining portions are the Explore section and the Footer section.

In the next part of this tutorial series, we are going to complete the implementation of the remaining UI sections that we separated out in this tutorial part.

 

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

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shares