How To Build WordPress App with React Native Part #6 : Html renderer

Now, we need to display the excerpt of the overall post on the list. For that, we are going to make use of components from the react-native-render-html package. And, we need to display the published date of the article as well. For that, we are going to make use of the moment package which provides the moment.js configurations. In order to use these packages, we need to install them first. For that, we need to use the command from the following code snippet:

yarn add react-native-render-html moment

After installation, we need to remember to link them to the native project as we have done in the previous installation.

Now, we need to import both the packages in the Home.js file as shown in the code snippet below:

import HTMLRender from 'react-native-render-html'
import moment from 'moment'

Now, we are going to use the HTMLRender component and

moment

Card

<Card.Content>
   <Title>{item.title.rendered}</Title>
 <Paragraph>Published on {moment(item.date).fromNow()}</Paragraph>
 </Card.Content>
 <Card.Cover
   source={{ uri: item.jetpack_featured_media_url }}
 />
 <Card.Content>
 <Card.Content>
   <HTMLRender html={item.excerpt.rendered} />
 </Card.Content>
 </Card.Content>

Here, we have used the HTMLRender component in order to display the excerpt data using html format. Then, using the moment method, we can customize the way in which the timestamp is being displayed.

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

Summary

In this chapter, we learned how to set up the react-native-render-html and moment package in order to render the HTML tags and also format the timestamp using the moment package.

This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the React Native App Templates from instamobile