Build WordPress App with React Native #12: Categories index
Tags: reactnativewordpre
Published: 2019-12-05 08:12:37

---
title: Build WordPress App with React Native #12: Categories index
published: true
date: 2019-12-04 16:14:39 UTC
tags: React native Wordpre
canonical_url: https://kriss.io/build-wordpress-client-app-with-react-native-12-categories-screen/
cover_image: https://cdn-images-1.medium.com/max/1024/1*0qWyQ1BHUL6FoFfa-uPTYg.png
series: Build Wordpress Client App with React Native
---

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](https://www.instamobile.io/) 

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

1. [Build WordPress Client App with React Native #1: Overview](https://kriss.io/build-wordpress-client-app-with-react-native-1-overview/)
2. [Build WordPress Client App with React Native #2: Setting Up Your Environment](https://kriss.io/build-wordpress-client-app-with-react-native-2-setting-up-your-environment/)
3. [Build WordPress Client App with React Native #3: Handle Navigation with React navigation](https://kriss.io/build-wordpress-client-app-with-react-native-3-handle-navigation-with-react-navigation/)
4. [Build WordPress Client App with React Native #4: Add Font Icon](https://kriss.io/build-wordpress-client-app-with-react-native-4-add-font-icon/)
5. [Build WordPress Client App with React Native #5 : Home Screen with React native paper](https://kriss.io/build-wordpress-client-app-with-react-native-5-using-react-native-paper/)
6. [Build WordPress Client App with React Native #6 : Using Html renderer and Moment](https://kriss.io/build-wordpress-client-app-with-react-native-6-using-html-renderer-and-moment/)
7. [Build WordPress Client App with React Native #7: Add pull to refresh and Infinite scroll](https://kriss.io/build-wordpress-client-app-with-react-native-7-add-pull-to-refresh-and-infinite-scroll/)
8. [Build WordPress Client App with React Native #8: Implementing SinglePost Screen](https://kriss.io/build-wordpress-client-app-with-react-native-8-implementing-singlepost-screen/)
9. [Build WordPress Client App with React Native #9: implement simple share](https://kriss.io/build-wordpress-client-app-with-react-native-9-implement-simple-share/)
10. [Build WordPress Client App with React Native #10: Setup and save bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-10-setup-and-save-bookmark/)
11. [Build WordPress Client App with React Native #11: Remove and Render Bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-11-remove-and-render-bookmark/)

Here, we are going to implement the Categories screen. This screen will contain the list of categories related to the article posts. And on clicking on these categories, we will navigate to the posts which are based on that respective category.

The implementation is simple. We are going to fetch the categories data and display it with the `FlatList` component. And by using the `TouchableOpacity` component, we will navigate to the new list screen which will display the list of article posts based on that category.

First, we need to open the Categories.js file and import necessary components and define some required state as well as shown in the code snippet below:

```javascript
    import React from 'react';
    import {
      FlatList,
      ScrollView,
      View,
      TouchableOpacity,
    } from 'react-native';
    export default class Categories extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          loading: false,
          categories: [],
        };
      }
```
Here, we have defined the `loading` state to display the loader on fetching of
data and `categories` to store the categories list data. Now, we need to create
a function called `fetchCategorie()` which will fetch all the categories data
from the WordPress API as shown in the code snippet below:
```javascript
    componentDidMount() {
        this.fetchCategorie();
      }
      async fetchCategorie() {
        this.setState({ loading: true });
        const response = await fetch(`https://kriss.io/wp-json/wp/v2/categories`);
        const categories = await response.json();
        this.setState({
          categories: categories
        });
      }
```
Here, we have fetched the categories data using the `fetch` function. Then, we
parse it to JSON and store it in the `categories` state. Then, we have called
the function in the `componentDidMount` hook.

Now, we need to add the data to `FlatList` in the `render()` function of
Categories screen as shown in the code snippet below:
```javascript
    render() {
        return (
          <ScrollView>
            <FlatList
              data={this.state.categories}
              renderItem={({item}) => (
                <TouchableOpacity
                  onPress={() =>
                    this.props.navigation.navigate('CategorieList', {
                      categorie_id: item.id,
                      categorie_name: item.name
                    })
                  }>
                  <Card>
                    <Card.Content>
                      <Title>{item.name}</Title>
                    </Card.Content>
                  </Card>
                </TouchableOpacity>
              )}
              keyExtractor={(item, index) => index}
            />
          </ScrollView>
        );
      }
    }
```
Here, we have the template in the `FlatList` component. The `FlatList` is
configured with data from for `categories` data and `keyExtractor` prop for the
key data. Then, the `renderItem` prop returns the template for the categories
list. The template has the `TouchableOpacity` as the parent component which has
navigation configured to the CategorieList screen. We are going to implement the
CategorieList screen later. Then, we have used the `Card` component and its
subcomponents to display the category name.

Hence, we will get the following result in the emulator screens:

![](https://cdn-images-1.medium.com/max/800/0*6vkLMBJpqIbBjwVv.png)

![](https://cdn-images-1.medium.com/max/800/0*9vfiooN7S9frrAXh.png)

As we can see, we have got the categories list in the Categories list. By
tapping on any list item, we need to navigate to the CategorieList screen which
will display the articles related to that category. But, we get error because we
have not yet implemented the screen.

For that, we need to create a new screen called CategoriesList.js file in the
‘./screens/’ folder.

Then, we need to make the imports and also define state as shown in the code
snippet below:
```javascript
    import React from 'react';
    import {View, FlatList, TouchableOpacity} from 'react-native';
    import {Card, Title, Paragraph} from 'react-native-paper';
    import moment from 'moment';
    import HTML from 'react-native-render-html';
    export default class CategorieList extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          posts: [],
        };
      }
```
Here, we have defined the posts state which will store the posts fetched based
in the category id.

Next, we need to add the CategorieList screen to the stack navigator in the
App.js file. For that, we need to make use of the code from the following code
snippet:
```javascript
    import CategorieList from './screens/CategoriesList';
    const StackNavigator = createStackNavigator({
      DashboardTabNavigator: DashboardTabNavigator,
      SinglePost: SinglePost,
      CategorieList : CategorieList
    });
```
Then, we need to implement the function called `fetchPost` which is used to
fetch the article posts based on the particular category. The overall
implementation of the function is provided in the code snippet below:
```javascript
    componentDidMount() {
       this.fetchPost();
     }
     async fetchPost() {
       let categorie_id = this.props.navigation.getParam('categorie_id');
       const response = await fetch(
         `https://kriss.io/wp-json/wp/v2/posts?categories=${categorie_id}`,
       );
       const post = await response.json();
       this.setState({posts: post});
     }
```
Here, we have fetched the posts using `fetch()` function from the WordPress API
with category id value. Then, we parsed it and stored it in the `posts` state
variable. Lastly, we called the function in the `componentDidMount` hook of the
CategorieList screen.

Now, we need to set up the template of the CategorieList screen to display the
list of article post based on the particular category. For that, we need to use
the code from the following code snippet in the `render()` function
```javascript
    render() {
        categorie_title = this.props.navigation.getParam('title');
        return (
          <View>
            <Title style={{marginLeft: 30}} >{categorie_title}</Title>
            <FlatList
              data={this.state.posts}
              renderItem={({item}) => (
                <TouchableOpacity
                  onPress={() =>
                    this.props.navigation.navigate('SinglePost', {
                      post_id: item.id,
                    })
                  }>
                  <Card>
                    <Card.Content>
                      <Title>{item.title.rendered}</Title>
                      <Paragraph>
                        Published on {moment(item.date, 'YYYYMMDD').fromNow()}
                      </Paragraph>
                    </Card.Content>
                    <Card.Cover source={{uri: item.jetpack_featured_media_url}} />
                    <Card.Content>
                      <HTML html={item.excerpt.rendered} />
                    </Card.Content>
                  </Card>
                </TouchableOpacity>
              )}
              keyExtractor={item => item.id}
            />
          </View>
        );
      }
    }
```
Here, we have used the `FlatList` component to list the List of articles just as in the Home screen. Then, we have added the navigation to the SinglePost screen using the `TouchableOpacity` as the parent component.

Hence, we will get the following result in the emulator screens:

 

![](https://kriss.io/wp-content/uploads/2019/12/img_5de7db2fed7ad.png) ![](https://kriss.io/wp-content/uploads/2019/12/img_5de7db3b43d68.png)

As we can see, we can successfully navigate to the CategorieList screen from the Categories screen. And by tapping on articles, we can navigate to the SinglePost screen.

## Summary

In this chapter, we learned how to implement the overall UI of the Categories screen as well as the CategorieList screen. We learned how to fetch the categories of different posts from the WordPress API. Then, we implemented the navigation to the CategorieList screen where we learned how to fetch the articles post based on the category id and display them as a list. Then, by clicking on the article posts we navigated to the SinglePost screen.

The post [Build WordPress Client App with React Native #12: Categories screen](https://kriss.io/build-wordpress-client-app-with-react-native-12-categories-screen/) appeared first on [Kriss](https://kriss.io).