React Native Plant App UI #17: Implementing Product Screen

This tutorial is the seventeenth part of our React Native Plant App tutorial series. In the previous part, we successfully added enlarging animation to the Search input field 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 inspiration 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 seventeenth 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 seventeenth part of this tutorial series, we are going to start implementing the Product screen. The idea is to start by adding navigation from the Explore screen to the Product screen. Then, we are going to add the simple React Native template to the Product Screen. Lastly, we will implement the custom header section in the Product Screen. So, this tutorial is also going to be short and sweet so that the learners are not overloaded with excess information in a single article.

So, let us begin!!  

Navigation to Product Screen

Here, we are going to add the navigation to the Product screen from the Explore screen. The idea is to execute navigation to Product Screen while clicking the images in the explore section of the Explore screen.

But first, we need to uncomment the Product screen from the index.js file of the ‘./navigation/’ folder.

And, we have already added the navigation configuration from Explore screen to the Product screen in the renderExplore() and renderImage() function of the Explore.js file. So, all that is left to do is adding a simple React Native template to the Product.js file.  

Adding Simple React Native Template to Product Screen

Here, we are going to add a simple template so that we can navigate to the Product screen. For that, we need to use the code from the following code snippet in the Product.js file:

import React from 'react';
import { StyleSheet } from 'react-native';
import { Button, Block, Text} from '../components';
import { theme, mocks } from '../constants';

export default class Explore extends React.Component {
    render(){
        return (
            <Block>
                <Text>Product Screen</Text>
            </Block>
        );
    }
  }
const styles = StyleSheet.create({   
});

Here, we have done some minimal imports. We have imported some components from the react-native package as well as from the predefined custom components. Then, we have also imported theme data and mocks data from the ‘./constants/’ folder. The data from these modules will be used in the upcoming tutorial parts. Then, we have set up a simple template having a Block component wrapping the Text component.

Hence, we will get the following result in the emulator screen: As we can see, we can now navigate to the Product Screen while taping on images in the Explore screen.  

Adding custom header to Product Screen

Here, we are going to add a custom header to the Product screen which is going to be very simple. The custom header will contain the horizontal dot icon button at the right side of the header. Now, in order to implement the custom header, we need to use the code from the following code snippet:

static navigationOptions = ({navigation}) => {
        return {
          headerRight: (
            <Button onPress={() => {}}>
              <Text>dots</Text>
            </Button>
          )
        }
    }

Here, we have made use of navigationOptions config in order to implement the custom header. The navigationOptions config is available by default to all the screens if they are included in the navigator config. In the navigationOptions config, we have returned the headerRight option. The headerRight option allows us to add a custom template to the right side of the header. Here, the headerRight option returns a Button component wrapping the Text component.

Hence, we will get the following result in the emulator screen: As we can see, we have got the text mentioning ‘dots’ at the right side of the header. But, we cannot leave it as it is. We need to replace it with the actual icon. Hence, we are going to add the icon in the place of text now.  

Adding Icon to Header

Here, we are going to replace the Text component in the header section with the actual horizontal dots icon. For that, we need to import the required icon from the react-native-vector-icons package as shown in the code snippet below:

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

Here, we have imported the Entypo icon bundle and stored it into the Entypo component. Now, we need to use the Entypo component to replace the Text component in the header section. For that, we need to use the code from the following code snippet:

static navigationOptions = ({navigation}) => {
        return {
          headerRight: (
            <Button onPress={() => {}}>
              <Entypo name="dots-three-horizontal" color={theme.colors.gray} />
            </Button>
          )
        }
    }

Here, we have wrapped the Entypo component inside the Button component in place of the Text component. We have also provided some color props to the Entypo component.

Hence, we will get the following result in the emulator screen: As we can see, we have got the horizontal dots icon on the right side of the header section of the Product Screen. With this, we have come to the end of this short tutorial.

Finally, we have successfully implemented the navigation to Product Screen as well as the custom header to the Product Screen in our React Native Plant UI app.  

Conclusion

This tutorial is the seventeenth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the sixteenth part of this tutorial series. In this tutorial part, we successfully implemented the navigation to the Product Screen. Then, we learned how to add the custom header to the header section of the Product Screen. In doing so, we learned how to use the navigationOptions config in our to manipulate the header template.

In the next part of this tutorial series, we are going to start implementing the other sections of the Product Screen such as the Description section, Main Gallery section and the Sub-gallery section.

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