Build React Native WordPress App [Expo way] #11 : Categories Screen - Kriss

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

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:

import React from 'react';
import {
  FlatList,
  ScrollView,
  View,
  TouchableOpacity,
} from 'react-native'; 
import { Card, Title } from 'react-native-paper'
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:

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:

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:

Conclusion

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. in next chapter we will implement Screen for display post from individual categories

Also published on Medium.