Build React Native WordPress App [Expo way] #7 : Single Post screen
Tags: reactnative
Published: 2020-02-17 15:50:10

---
title: Build React Native WordPress App [Expo way] #7 : Single Post screen
published: true
date: 2020-02-16 09:13:38 UTC
tags: react-native
canonical_url: http://kriss.io/build-react-native-wordpress-app-expo-way-7-single-post-screen/
cover_image: https://cdn-images-1.medium.com/max/1024/0*_N94tO64uvOOHk-q.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 wrap around card item with TouchableOpacity when user touch this post will navigate to single post with post id

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

for now, we already have blank scree that we create from the last chapter

#### React native paper

first, we import react-native-paper component and set

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

then add function for call data from API

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

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

    componentDidMount() {
        this.fetchPost();
    }
    async fetchPost() {
        let post\_id = this.props.route.params?.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,
        });
    }
```

if you using react-navigation version 4 before will spot on params? is a new method for getting param

then we construct screen with react native paper component again

```
render() {
        let post = this.state.post;
        }
        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 value={post[0].content.rendered} addLineBreaks={false} />
                    </Card.Content>
                </Card>
            </ScrollView>
        );
}
```

here for result

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

#### Add placeholder

for the last feature, we add placeholder like Home screen first import content placeholder component

```
render() {
    let post = this.state.post;
    if (this.state.isloading) {
        return <ContentPlaceholder />;
    }
    return (
        <ScrollView> .....
    );
}
```

here will see result same Home screen

![Animated GIF](https://cdn-images-1.medium.com/max/270/0*pxIBpLdmxCqTIWaq.gif)

#### 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-htmlview 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.last thing we wrap screen with Content placeholder same Home screen again

_Originally published at _[_Kriss_](https://kriss.io/build-react-native-wordpress-app-expo-way-7-single-post-screen/)_._

* * *