Build WordPress App with React Native #6 : Html renderer package and Moment
Tags: reactnative, reactnativewordpre
Published: 2019-12-05 07:13:41

---
title: Build WordPress App with React Native #6 : Html renderer package and Moment
published: true
date: 2019-12-04 14:32:05 UTC
tags: React native,React native Wordpre,react native
canonical_url: https://kriss.io/build-wordpress-client-app-with-react-native-6-using-html-renderer-and-moment/
cover_image: https://cdn-images-1.medium.com/max/1024/1*0qWyQ1BHUL6FoFfa-uPTYg.png
series: Build Wordpress Client App with React Native
---

This series intends to show how I build 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 Mobile Templates](https://www.instamobile.io) from instamobile

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

- [Build WordPress Client App with React Native #1: Overview](https://kriss.io/build-wordpress-client-app-with-react-native-1-overview/)
- [Build WordPress Client App with React Native #2: Setting Up Your Environment](https://kriss.io/build-wordpress-client-app-with-react-native-2-setting-up-your-environment/)
- [Build WordPress Client App with React Native #3: Handle Navigation with React navigation](https://kriss.io/build-wordpress-client-app-with-react-native-3-handle-navigation-with-react-navigation/)
- [Build WordPress Client App with React Native #4: Add Font Icon](https://kriss.io/build-wordpress-client-app-with-react-native-4-add-font-icon/)
- [Build WordPress Client App with React Native #5 : Home Screen with React native paper](https://kriss.io/build-wordpress-client-app-with-react-native-5-using-react-native-paper/)

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:

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

Now, we are going to use the `HTMLRender` component and `moment` component in our Card template as shown in the code snippet below:

```javascript
<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:

 

![](https://kriss.io/wp-content/uploads/2019/12/img_5de7c270c6c13.png) ![](https://kriss.io/wp-content/uploads/2019/12/img_5de7c285d8f2f.png)

 

## 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.

The post [Build WordPress Client App with React Native #6 : Using Html renderer and Moment](https://kriss.io/build-wordpress-client-app-with-react-native-6-using-html-renderer-and-moment/) appeared first on [Kriss](https://kriss.io).