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 are going to interact with Wordpress Rest API and try to use react native paper another UI component from Expo team then we want to add Loading place holder for inform user our application is on loading status
Try React Native Paper
first, we install react native paper this package provides many useful UI components
yarn add react-native-paper
this package no need required any link. Next, we import component to Home.js
import {
Avatar,
Button,
Card,
Title,
Paragraph,
List,
Headline,
} from 'react-native-paper';
next, we try to construct card item for contain post data that we will be fetched
render() {
return (
<View>
<Card
style={{
shadowOffset: {width: 5, height: 5},
width: '90%',
borderRadius: 12,
alignSelf: 'center',
marginBottom: 10,
}}>
<Card.Content>
<Title>Blog post</Title>
<Card.Cover
style={{
width: 350,
height: 190,
alignSelf: 'center',
}}
source={{
uri:
'https://images.unsplash.com/photo-1580111116173-171ccf58fe3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
}}
/>
<Paragraph>just a blog post</Paragraph>
</Card.Content>
</Card>
</View>
);
}
here we use card component wrap another component the style is so clean and minimal
Interact with Wordpress REST API
Wordpress site allows us to get data from API for more all every endpoint and info your can view on an official document for fetching data from API we using fetch for getting data from this blog and using componentDidMount run every time when we reload screen
componentDidMount() {
this.fetchLastestPost();
}
async fetchLastestPost() {
const response = await fetch(
'https://kriss.io/wp-json/wp/v2/posts?per\_page=5'
);
const posts = await response.json();
this.setState({posts});
}
next, we create a state for contain response data
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
next, we need to render post on Flat list by first import Flatlist in React native
import {View, Text, FlatList} from 'react-native';
here we wrap card with Flalist and and make a card like one of Flatlist item
<Headline style={{ marginLeft: 30 }}>Lastest Post</Headline>
<FlatList
data={this.state.posts}
renderItem={({ item }) => (
<Card
style={{
shadowOffset: { width: 5, height: 5 },
width: '90%',
borderRadius: 12,
alignSelf: 'center',
marginBottom: 10,
}}>
<Card.Content>
<Title>{item.title.rendered}</Title>
</Card.Content>
<Card.Cover
source={{ uri: item.jetpack\_featured\_media\_url }}
/>
</Card>
)}
keyExtractor={item,index => index.toString()}
/>
Now we will result here
TIp : if your did not see the result just reload the app
Render HTML in Native view
next, we add another component that makes a card like a post that view on mobile site, so we need excerpt and published data for excerpt is HTML raw data and using moment for display DateTime in human-readable friendly
install two package HTML view and moment
stop packager then install package
yarn add react-native-htmlview moment
next run expo start again
Now, we need to import both the packages in the Home.js file, as shown in the code snippet below:
import HTMLRender from 'react-native-htmlview'
import moment from 'moment'
then add the package to card item
here we can see a post like on the mobile browser view
Conclusion
In this chapter, we successfully implement a Home screen by fetching posts from Wordpress API that fairy simple and using react native paper make a card like a view from mobile view. Next chapter we will implement pull to refresh, and infinite scroll stay tuned
Originally published at [_Kriss](https://kriss.io/build-react-native-wordpress-app-expo-way-4-home-screen-and-place-holder-loader/)._
Top comments (0)