Build a WordPress App with React Native #8: building Single Post Screen

9 Feb 2020

4 min read

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

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

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 template by using TouchableOpacity component and add the navigation configuration to its onPress event as shown in the code snippet below:

    <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/’ folder.

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 state. If the isloading state is true then the ActivityIndicator template is displayed which displays the spinner loader. After the data is successfully fetched the post template is shown and the loader disappears. The overall implementation is provided in the code snippet below:

    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 component which enables the Scrolling of the screen vertically. Then, the ScrollView component wraps the template with the Card component and its sub-components.

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.

The post Build WordPress Client App with React Native #8: Implementing SinglePost Screen appeared first on Kriss.