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 package. And, we need to display the published date of the article as well. For that, we are going to make use of the package which provides the 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: react-native-render-html moment moment.js 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: HTMLRender moment import from 'react-native-render-html' import from 'moment' Now, we are going to use the HTMLRender component and component in our template as shown in the code snippet below: moment Card <Card.Content> <Paragraph>Published on {moment(item.date).fromNow()}< Card.Content> <Card.Content>
 <Card.Content>
   <HTMLRender html={item.excerpt.rendered} />
 </Card.Content>
 </Card.Content> {item.title.rendered} < > Title </ > Title /Paragraph>
 </ < = }}
 /> Card.Cover source {{ uri: item.jetpack_featured_media_url 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 and moment package in order to render the HTML tags and also format the timestamp using the moment package. react-native-render-html 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 from instamobile React Native App Templates

visit more my tutorial

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

krissanawat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

krissanawat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES