Build React Native WordPress App [Expo way] #7 : Single Post screen

#reactnative

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

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

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

DEV Community

Build React Native WordPress App [Expo way] #7 : Single Post screen

React native paper

Add placeholder

summary

Top comments (0)

Read next

react-native duplicate class problem

Integrating Native iOS Code with React Native Using Swift: A Comprehensive Guide

20 Essential React Tricks Every Developer Must Know

How to Identify and Report Native Build Failures Effectively