React Native Plant App UI #18: Description Section - Kriss

This tutorial is the eighteenth part of our React Native Plant App tutorial series. In the previous part, we successfully added the navigation to the Product Screen as well as implemented the custom header section. 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 eighteenth 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 eighteenth part of this tutorial series, we are going to implement the description section of the Product Screen. This section will contain the Product title, short description, and the tags sub-section. First, we will implement the title and description section which are comparatively simple. Then, we will also add the tags section between the title and description.

So, let us begin!!  

Implementing the Description section

Here, we are going to start implementing the description section of the Product screen. But first, we need to define the default prop data from our mocks import. For that, we need to use the code from the following code snippet:

Product.defaultProps = {
  product: mocks.products[0],
}

Here, we have defined a default prop as product which is set to the first item of the products array in the mocks data object. Now, we need to define our props in the render() function as well For that, we need to use the code from the following code snippet:

render() {
     const { product } = this.props;

Now, we are going to implement the template for the description section. For now, we are just going to add the product title and description. For that, we need to use the code from the following code snippet:

return (
        <ScrollView showsVerticalScrollIndicator={false}>  
          <Block>
            <Text h2 bold>{product.name}</Text>
            <Text gray light height={22}>{product.description}</Text>
          </Block>
        </ScrollView>
      )

Here, we have a parent ScrollView component that wraps a Block component. The ScrollView component has a prop called showsVerticalScrollIndicator which is set to false. The Block component wraps the Text components for product title and name.

Hence, we will get the following result in the emulator screen: As we can see, we have got the title and the short description. But, the template seems out of place and requires styles to get it to the proper position.  

Adding styles

Here, we are going to add some style to the Description section template in order to get it to the proper position. For that, we need to use the code from the following code snippet:

return (
        <ScrollView showsVerticalScrollIndicator={false}>  
          <Block style={styles.product}>
            <Text h2 bold>{product.name}</Text>
            <Text gray light height={22}>{product.description}</Text>
          </Block>
        </ScrollView>
      )

The required style is provided in the code snippet below:

product: {
  paddingHorizontal: theme.sizes.base * 2,
  paddingVertical: theme.sizes.padding,
},

Hence, we will get the following result in the emulator screen: As we can see, we have got the title and description of the product in the proper position. Now, we are going to add the tags subsection between title and description.  

Implementing Tags Section

Here, we are going to implement the tags subsection between the product title and the description section. For that, we need to use the code from the following code snippet:

return (
        <ScrollView showsVerticalScrollIndicator={false}>  
          <Block style={styles.product}>
            <Text h2 bold>{product.name}</Text>
            <Block flex={false} row margin={[theme.sizes.base, 0]}>
              {product.tags.map(tag => (
                <Text key={`tag-${tag}`} caption gray>
                  {tag}
                </Text>
              ))}
            </Block>
            <Text gray light height={22}>{product.description}</Text>
          </Block>
        </ScrollView>
      )

Here, we have added another child Block component between the Text components for title and description. The Block component is bound to some style props. Then, we have used the map() array function to iterate through the tags array provided by the product data. The map() function allows us to iterate through each item in the tags array and return the required template. The template inside the map() function contains a Text component for the tag name.

Hence, we will get the following result in the emulator screen: As we can see, we have got the tags subsection between the title and the description. But the tags are all jumbled up which does not look nice. We need to add proper style to tags in order to make them look appealing.

Adding style to tags

Here, we are going to add the style to tags in order to make it look better. For that, we need to use the code from the following code snippet:

return (
        <ScrollView showsVerticalScrollIndicator={false}>  
          <Block style={styles.product}>
            <Text h2 bold>{product.name}</Text>
            <Block flex={false} row margin={[theme.sizes.base, 0]}>
              {product.tags.map(tag => (
                <Text key={`tag-${tag}`} caption gray style={styles.tag}>
                  {tag}
                </Text>
              ))}
            </Block>
            <Text gray light height={22}>{product.description}</Text>
          </Block>
        </ScrollView>
      )

The required style is provided in the code snippet below:

tag: {
  borderColor: theme.colors.gray2,
  borderWidth: StyleSheet.hairlineWidth,
  borderRadius: theme.sizes.base,
  paddingHorizontal: theme.sizes.base,
  paddingVertical: theme.sizes.base / 2.5,
  marginRight: theme.sizes.base * 0.625,
},

Hence, we will get the following result in the emulator screen: As we can see, we have got the proper tags in the tags subsection of the Description section. With this, we have come to the end of this tutorial part.

Finally, we have successfully implemented the Description section in our Product Screen of React Native Plant UI App.  

Conclusion

This tutorial is the eighteenth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the seventeenth part of this tutorial series. In this tutorial part, we successfully implemented the Description section of the Product Screen. We also learned how to add the tags UI to the Product Screen. Here, the main takeaway is the styles that are being used to configure the Description section UI.

In the next part of this tutorial series, we are going to start implementing the Gallery Section in 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!!