React Native Plant App UI #15: Explore and Footer Section

This tutorial is the fifteenth part of our React Native Plant App tutorial series. In the previous part, we successfully implemented the header section as well as separated out different UI sections in 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 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 fifteenth 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 fifteenth part of this tutorial series, we are going to implement the UI sections that we separated out in our last tutorial. The UI sections that we are going to implement are the Explore section and the Footer section. The Explore screen will contain the display of different images. And, the Footer section will contain the button with a gradient style. The idea is to start with building the explore section and then end with the implementation of the footer section.

So, let us begin!!  

Implementing Explore section

Here, we are going to implement the explore section that we separated as a function in the previous tutorial part. The section will contain the display of images. The clicking on the image should navigate to the new Product screen which we will implement in our upcoming tutorials. We are going to implement the template for this section in the renderExplore(). But first, we need to import the data from the theme.js file. For that, we need to use the code from the following code snippet:

Explore.defaultProps = {
  images: mocks.explore,
};

Here, we have imported the explore that from mocks data and set it to the images default prop. Now, we need to make use of the images prop in the renderExplore() function to create the template for the explore section. In order to implement the template, we need to make use of the code from the following code snippet in the renderExplore() function:

renderExplore(){
      const { images, navigation } = this.props;
      const mainImage = images[0];
  
      return (
        <Block style={{ marginBottom: height / 3 }}>
          <TouchableOpacity>
            <Image source={mainImage} />
          </TouchableOpacity>
          <Block row space="between" wrap>
          </Block>
        </Block>
      )
    }

Here, we have imported the images prop from the props data. Then, we have set the new mainImage constant to the first image data in the images array prop. Then, we have the parent Block component with some inline styles wrapping the TouchableOpacity and another child Block component. The TouchableOpacity component wraps the Image component with mainImage as the source.

We need to remember to import the TouchableOpacity and Image component from the react-native package.

Hence, we will get the following result in the emulator screen: As we can see, we have got the main image display in the Explore section. Now, we are going to add multiple images subsection below the main image  

Adding Multiple Images subsection

Here, we are going to add multiple images to the section below the main image. For that, we are going to define a new function called renderImage() which returns the template for the multiple images subsection. The overall implementation of this function is provided in the code snippet below:

renderImage(img, index) {
      const { navigation } = this.props;  
      return (
        <TouchableOpacity
          key={`img-${index}`}
        >
          <Image
            source={img}
          />
        </TouchableOpacity>
      )
    }

Here, we have defined the navigation constant from the props data. Then, we have the TouchableOpacity component wrapping Image component. This renderImage() function takes in two parameters img for image source and index value.

Now, we need to call the renderImage() function in the renderExplore() function as shown in the code snippet below:

return (
        <Block style={{ marginBottom: height / 3 }}>
          <TouchableOpacity>
            <Image source={mainImage} />
          </TouchableOpacity>
          <Block row space="between" wrap>
            {
              images.map((img, index) => this.renderImage(img, index))
            }
          </Block>
        </Block>
      )

Here, we have called the renderImage() function inside the child Block component. We have called the renderImage() function inside the map() array function which iterates each item of the images array prop. Then, each image item is sent as a parameter with index value as well.

Hence, we will get the following result in the emulator screen: As we can see, we have got the multiple images subsection in the Explore section. But, these images seem out of place and does not look appealing as well. So, we need to style and position them properly.  

Configuring styles for Explore section

Here, we are going to style the images as well as components in the explore section in order to position them accurately as well as make them look good. For that, we need to use the code from the following code snippet in the renderExplore function:

return (
        <Block style={{ marginBottom: height / 3 }}>
          <TouchableOpacity
            style={[styles.image, styles.mainImage]}
            onPress={() => navigation.navigate('Product')}
          >
            <Image source={mainImage} style={[styles.image, styles.mainImage]} />
          </TouchableOpacity>
          <Block row space="between" wrap>
            {
              images.map((img, index) => this.renderImage(img, index))
            }
          </Block>
        </Block>
      )

Here, we have added some style prop to the TouchableOpacity and the Image component. We have also configured the navigation to the Product screen in the onPress event of the TouchableOpacity component. However, the navigation will not work as we have commented out the Product screen in the index.js file of the ‘./navigation/’ folder.

Now, we need to make some style configurations in the renderImage() function as well. For that, we need to use the code from the following code snippet:

renderImage(img, index) {
      const { navigation } = this.props;
      const sizes = Image.resolveAssetSource(img);
      const fullWidth = width - (theme.sizes.padding * 2.5);
      const resize = (sizes.width * 100) / fullWidth;
      const imgWidth = resize > 75 ? fullWidth : sizes.width * 1;
  
      return (
        <TouchableOpacity
          key={`img-${index}`}
          onPress={() => navigation.navigate('Product')}
        >
          <Image
            source={img}
            style={[
              styles.image,
              { minWidth: imgWidth, maxWidth: imgWidth }
            ]}
          />
        </TouchableOpacity>
      )
    }

Here, we have made use of different size constants in order to style the image properly. The sizes constant is set to the resolveAssetSource() method of the Image component. We have also set the other size properties based on the Dimensions property as well as the sizes constant. Then, we have applied the style to the Image component. We have also configured the navigation to the Product screen in the onPress event of the TouchableOpacity component here as well.

Now, the required styles for both the renderExplore() and renderImage() functions are provided in the code snippet below:

image: {
  minHeight: 100,
  maxHeight: 130,
  maxWidth: width - (theme.sizes.padding * 2.5),
  marginBottom: theme.sizes.base,
  borderRadius: 4,
},
mainImage: {
  minWidth: width - (theme.sizes.padding * 2.5),
  minHeight: width - (theme.sizes.padding * 2.5),
},

Hence, we will get the following result in the emulator screen: As we can see, the images subsection is at an accurate position and looks appealing as well. But, the main image seems to appear two times. Hence, we need to remove the second main image.  

Slicing up the second main image

Here, we are going to remove the second main image that appears on the screen. For that, we need to use the code from the following code snippet:

<Block style={{ marginBottom: height / 3 }}>
  <TouchableOpacity
    style={[styles.image, styles.mainImage]}
    onPress={() => navigation.navigate('Product')}
  >
    <Image source={mainImage} style={[styles.image, styles.mainImage]} />
  </TouchableOpacity>
  <Block row space="between" wrap>
    {
      images.slice(1).map((img, index) => this.renderImage(img, index))
    }
  </Block>
</Block>

Here, we have used the slice() array function before the map() function in the images array prop. Hence, we will get the following result in the emulator screen: As we can see, we have successfully placed the main image as well as images subsection in the Explore section of the Explore screen. This completes our UI implementation for the explore section.  

Implementing the Footer section

Here, we are going to implement the Footer section which is fairly simple. We can see the Footer section hovering over the explore section in the previous emulator results. Now, we are going to implement the footer button with a gradient style here. For that, we need to install a new package called expo-linear-gradient. This package provides the component to implement gradient style to any other components like buttons or blocks. Now, in order to install the package, we need to run  the following command in the project command prompt:

>>expo install expo-linear-gradient

Now, we need to import this package in the Explore.js file as shown in the code snippet below:

import { LinearGradient } from 'expo-linear-gradient';

Next, we need to add the button to the Footer section. For that, we need to use the code from the following code snippet in the renderFooter() function:

renderFooter(){
      return (
          <Button gradient style={{ width: width / 2.678 }}>
            <Text bold white center>Filter</Text>
          </Button>
      )
    }

Here, we have used the Button component that wraps the Text component. Both Button and Text component has some style props bound to them. Hence, we will get the following result in the emulator screen: As we can see, we have got the gradient footer button. But, the button looks out of place. We need to place the button in the proper position with some styles.  

Adding LinearGradient component to Footer section

Here, we are going to add the LinearGradient component that we imported earlier to the renderFooter() function. For that, we need to use the code from the following code snippet:

return (
   <LinearGradient
     locations={[0.5, 1]}
     style={styles.footer}
     colors={['rgba(255,255,255,0)', 'rgba(255,255,255,0.6)']}
   >
     <Button gradient style={{ width: width / 2.678 }}>
       <Text bold white center>Filter</Text>
     </Button>
  </LinearGradient>
 )

Here, we have LinearGradient component as the parent component. This component is configured with location, style, and colors prop.

Hence, we will get the following result in the emulator screen: As we can see, we have got the button with gradient style in the Footer section hovering over the Explore section at the bottom of the Explore screen. With this, we have come to the end of this part of our tutorial.

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

Conclusion

This tutorial is the fifteenth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the fourteenth part of this tutorial series. In this part of the tutorial, we implemented the Explore and Footer section. Here, we learned how to display the images with various style configurations to the Explore section. We also learned about the expo-linear-gradient package which provides the LinearGradient component in order to create the gradient display. Hence making use of the LinearGradient component, we successfully implemented the Footer section as well.

In the next part of this tutorial series, we are going to add the animation to our Search Input field in the Header section of the Explore 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!!