Build WordPress App with React Native #8: building Single Post Screen
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:
- Build WordPress Client App with React Native #1: Overview
- Build WordPress Client App with React Native #2: Setting Up Your Environment
- Build WordPress Client App with React Native #3: Handle Navigation with React navigation
- Build WordPress Client App with React Native #4: Add Font Icon
- Build WordPress Client App with React Native #5 : Home Screen with React native paper
- Build WordPress Client App with React Native #6 : Using Html renderer and Moment
- Build WordPress Client App with React Native #7: Add pull to refresh and Infinite scroll
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:
javascript
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:
javascript
<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:
javascript
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:
javascript
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:
javascript
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.
