Build React Native WordPress App [Expo way] #4 : Home Screen 
Tags: reactnativepaperc, reactnativepaperd, reactnativepapera
Published: 2020-02-15 17:02:14

---
title: Build React Native WordPress App [Expo way] #4 : Home Screen 
published: true
date: 2020-02-15 08:51:17 UTC
tags: react-native-paper-c,react-native-paper-d,react-native-paper-a,react-native-paper-c
canonical_url: https://kriss.io/build-react-native-wordpress-app-expo-way-4-home-screen/
cover_image: https://cdn-images-1.medium.com/max/1024/0*VC6dnQZCdNcO7nAD.png
series: Build React native Wordpress client app with Expo 
---


This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since we successfully build an app on the React Native CLI path., for the next step, we try to develop this app again but using Expo. We will discover the Expo ecosystem that makes our lives comfortable and help us avoid dealing with Native modules to 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, in-app purchase, and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the [React Native Templates](http://instamobile.io) from instamobile

this chapter we are going to interact with Wordpress Rest API and try to use react native paper another UI component from Expo team then we want to add Loading place holder for inform user our application is on loading status

#### Try React Native Paper

first, we install react native paper this package provides many useful UI components

```
yarn add react-native-paper
```

this package no need required any link. Next, we import component to Home.js

```
import {
  Avatar,
  Button,
  Card,
  Title,
  Paragraph,
  List,
  Headline,
} from 'react-native-paper';
```

next, we try to construct card item for contain post data that we will be fetched

```
render() {
    return (
      <View>
        <Card
          style={{
            shadowOffset: {width: 5, height: 5},
            width: '90%',
            borderRadius: 12,
            alignSelf: 'center',
            marginBottom: 10,
          }}>
          <Card.Content>
          <Title>Blog post</Title>
            <Card.Cover
              style={{
                width: 350,
                height: 190,
                alignSelf: 'center',
              }}
              source={{
                uri:
                  'https://images.unsplash.com/photo-1580111116173-171ccf58fe3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
              }}
            />
            <Paragraph>just a blog post</Paragraph>
          </Card.Content>
        </Card>
      </View>
    );
  }
```

here we use card component wrap another component the style is so clean and minimal

![](https://cdn-images-1.medium.com/max/578/0*xXHUUtQ-lT0jUBwV.jpg)

#### Interact with Wordpress REST API

Wordpress site allows us to get data from API for more all every endpoint and info your can view on an [official document](https://developer.wordpress.org/rest-api/) for fetching data from API we using fetch for getting data from this blog and using componentDidMount run every time when we reload screen

```
componentDidMount() {
  this.fetchLastestPost();
}
 
async fetchLastestPost() {
  const response = await fetch(
    'https://kriss.io/wp-json/wp/v2/posts?per\_page=5'
  );
  const posts = await response.json();
  this.setState({posts});
}
```

next, we create a state for contain response data

```
export default class Home extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: []
    };
```

next, we need to render post on Flat list by first import Flatlist in React native

```
import {View, Text, FlatList} from 'react-native';
```

here we wrap card with Flalist and and make a card like one of Flatlist item

```
<Headline style={{ marginLeft: 30 }}>Lastest Post</Headline>
<FlatList
  data={this.state.posts}
  renderItem={({ item }) => (
      <Card
        style={{
          shadowOffset: { width: 5, height: 5 },
          width: '90%',
          borderRadius: 12,
          alignSelf: 'center',
          marginBottom: 10,
        }}>
        <Card.Content>
          <Title>{item.title.rendered}</Title>
        </Card.Content>
        <Card.Cover
          source={{ uri: item.jetpack\_featured\_media\_url }}
        />
      </Card>
  )}
  keyExtractor={item,index => index.toString()}
/>
```

Now we will result here

![](https://cdn-images-1.medium.com/max/462/0*wabaXRGSVbQUeGVm.png)

**TIp** : if your did not see the result just reload the app

#### Render HTML in Native view

next, we add another component that makes a card like a post that view on mobile site, so we need excerpt and published data for excerpt is HTML raw data and using moment for display DateTime in human-readable friendly

install two package [HTML view](https://github.com/jsdf/react-native-htmlview) and [moment](https://momentjs.com/)

![](https://cdn-images-1.medium.com/max/989/0*khDeCxZ7r0fe4xa7.png)

stop packager then install package

```
yarn add react-native-htmlview moment
```

next run expo start again

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-htmlview'
import moment from 'moment'
```

then add the package to card item

![](https://cdn-images-1.medium.com/max/462/0*RuHltF8J37Dn2h8P.png)

here we can see a post like on the mobile browser view

#### Conclusion

In this chapter, we successfully implement a Home screen by fetching posts from Wordpress API that fairy simple and using react native paper make a card like a view from mobile view. Next chapter we will implement pull to refresh, and infinite scroll stay tuned

_Originally published at _[_Kriss_](https://kriss.io/build-react-native-wordpress-app-expo-way-4-home-screen-and-place-holder-loader/)_._

* * *