fbpx

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

Animated 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

 


Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.