How To Build WordPress Client App with React Native Part #8: SinglePost View

Since we have the list of articles in the Home Screen, we need to display full articles as well. For that, we are going to create the SinglePost screen which will display the overall article. Here, we will learn how to fetch a single article from the WordPress API.

First, we need to add the SinglePost screen to our navigator in the App.js file. For that, we need to import the SinglePost screen and add it to the stack navigator as shown in the code snippet below:

import SinglePost from './src/screens/SinglePost';


const StackNavigator = createStackNavigator({
  DashboardTabNavigator: DashboardTabNavigator,
  SinglePost: SinglePost,
});

export default createAppContainer(StackNavigator);

Then, we need to add the navigation from Home Screen to the SinglePost screen. The idea is to navigate to the SinglePost screen when we click on any article card in the Home screen article list. As a result, the full information in the article is displayed in the SinglePost screen. For that, we need to wrap the 

FlatList

TouchableOpacity 

<TouchableOpacity
           onPress={() =>
             this.props.navigation.navigate('SinglePost', {
               post_id: item.id,
             })
           }>
           <Card
             style={{
               shadowOffset: {width: 5, height: 5},
               width: '90%',
               borderRadius: 12,
               alignSelf: 'center',
               marginBottom: 10,
             }}>
            .................................. // other code
           </Card>
           </TouchableOpacity>

Implementing SinglePost Screen

Now, we are going to implement the UI of the SinglePost screen. For that, we need to create a new file called SinglePost.js in the

‘./screens/’

In the SinglePost screen, we want to display the cover image of the article and full content of the article along with the author avatar, name and published date of the article.

The overall implementation of the SinglePost screen is provided in the code snippet below:

import React from 'react';
import {
  Avatar,
  Button,
  Card,
  Title,
  Paragraph,
  List,
} from 'react-native-paper';
import HTML from 'react-native-render-html';
import {
  View,
  ScrollView,
  ActivityIndicator,
  Dimensions
} from 'react-native';
import moment from 'moment';

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

    this.state = {
      isloading: true,
      post: [],
    };
  }

Here, we have imported the necessary packages which are required to build the SinglePost screen. We have also defined the required states that are isloading and post.

Now, we need to fetch the respective post from the WordPress API using fetch method. First, we need to get the post id that we sent from the Home Screen page as a prop. And then, use it to fetch the particular post from the API as shown in the code snippet below:

componentDidMount() {
  this.fetchPost();
}
async fetchPost() {
  let post_id = this.props.navigation.getParam('post_id')

  const response = await fetch(
    `https://kriss.io/wp-json/wp/v2/posts?_embed&include=${post_id}`
  );
  const post = await response.json();
  this.setState({
    post: post,
    isloading: false,
  });

Here, we have fetched the single post using the API and parsed it in JSON format as well. Then, we have set the fetched post to the post state variable and changed the isloading state to false.

Now, we need to show the post template based on the 

isloading

isloading

render() {
    let post = this.state.post;
    if (this.state.isloading) {
      return (
        <View
          style={{
            paddingVertical: 20,
            borderTopWidth: 1,
            borderColor: '#CED0CE',
          }}>
          <ActivityIndicator animating size="large" />
        </View>
      );
    }
    return (
      <ScrollView>
          <Card>
            <Card.Content>
              <Title>{post[0].title.rendered} </Title>
              <List.Item
                title={`${post[0]._embedded.author[0].name}`}
                description={`${post[0]._embedded.author[0].description}`}
                left={props => {
                  return (
                    <Avatar.Image
                      size={55}
                      source={{
                        uri: `${post[0]._embedded.author[0].avatar_urls[96]}`,
                      }}
                    />
                  );
                }}
              />
              <List.Item
                title={`Published on ${moment(
                  post[0].date,
                  'YYYYMMDD'
                ).fromNow()}`}
              />
              <Paragraph />
            </Card.Content>
            <Card.Cover source={{ uri: post[0].jetpack_featured_media_url }} />
            <Card.Content>
              <HTML html={post[0].content.rendered} 
                    imagesInitialDimensions={{
                        width: Dimensions.get('window').width,
                        height: Dimensions.get('window').width * 2,
                    }
               }/>
            </Card.Content>
          </Card>
        )}
      </ScrollView>
    );
  }
}

Here, for the post template, we have used different components from the react-native package as well as the react-native-paper package. The parent component is the 

ScrollView

ScrollView

Card

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

As we can see, we have successfully implemented the overall UI for the SinglePost screen as well.

Summary

In this chapter, we learned how to implement the overall UI of the SinglePost screen. First, we learned how to set up the navigation to the SinglePost screen by clicking on any article post from the home screen list. The SinglePost screen displays the overall content of the single article. We used different components from react-native-paper in order to implement the UI. We also made use of the moment and react-native-render-html package on this screen. Lastly, we learned how to fetch the data of the single article post from the WordPress API using the fetch function.

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