Build React Native WordPress App [Expo way] #4 : Home Screen

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

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

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 and moment

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

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/)._