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: SinglePost ; StackNavigator = createStackNavigator({ : DashboardTabNavigator, : SinglePost,
}); createAppContainer(StackNavigator); import from './src/screens/SinglePost' const DashboardTabNavigator SinglePost export default 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 template by using component and add the navigation configuration to its onPress event as shown in the code snippet below: FlatList TouchableOpacity <TouchableOpacity
           onPress={() => .props.navigation.navigate( , { : item.id,
             })
           }> < this 'SinglePost' post_id .................................. // other code < = { , }, ' %', , ' ', ,
             }}> Card style {{ shadowOffset: width: 5 height: 5 width: 90 borderRadius: 12 alignSelf: center marginBottom: 10 </ > 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 in the folder. SinglePost.js ‘./screens/’ 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: React ; {
  Avatar,
  Button,
  Card,
  Title,
  Paragraph,
  List,
} ; HTML ; {
  View,
  ScrollView,
  ActivityIndicator,
  Dimensions
} ; moment ; { (props) { (props); .state = { : , : [],
    };
  } import from 'react' import from 'react-native-paper' import from 'react-native-render-html' import from 'react-native' import from 'moment' export default . class SinglePost extends React Component constructor super this 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: componentDidMount() { .fetchPost();
} fetchPost() { post_id = .props.navigation.getParam( ) response = fetch( ); post = response.json(); .setState({ : post, : ,
  }); this async let this 'post_id' const await `https://kriss.io/wp-json/wp/v2/posts?_embed&include= ` ${post_id} const await this 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 state. If the 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: isloading isloading render() { post = .state.post; ( .state.isloading) { ( <ActivityIndicator animating size="large" />
        </View> <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>
    );
  }
} let this if this return < = , , '# ',
          }}> View style {{ paddingVertical: 20 borderTopWidth: 1 borderColor: CED0CE );
    }
    return ( Here, for the post template, we have used different components from the react-native package as well as the package. The parent component is the component which enables the Scrolling of the screen vertically. Then, the component wraps the template with the component and its sub-components. react-native-paper ScrollView ScrollView Card 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 in order to implement the UI. We also made use of the moment and 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. react-native-paper react-native-render-html This series intends to show how I build an 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 from instamobile React Native App Templates

Fetch

Super

visit more my tutorial

Read My Stories

Too Long; Didn't Read

Making security fun one episode at a time

How To Build WordPress Client App with React Native Part #8: SinglePost View

Too Long; Didn't Read

Companies Mentioned

krissanawat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Build WordPress Client App with React Native Part #8: SinglePost View

Too Long; Didn't Read

Companies Mentioned

krissanawat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES