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 component. And by using the component, we will navigate to the new list screen which will display the list of article posts based on that category. FlatList TouchableOpacity First, we need to open the file and import necessary components and define some required state as well as shown in the code snippet below: Categories.js React ; {
  FlatList,
  ScrollView,
  View,
  TouchableOpacity,
} ; { (props) { (props); .state = { : , : [],
    };
  } import from 'react' import from 'react-native' export default . class Categories extends React Component constructor super this 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 which will fetch all the categories data from the WordPress API as shown in the code snippet below: fetchCategorie() componentDidMount() { .fetchCategorie();
  } fetchCategorie() { .setState({ : }); response = fetch( ); categories = response.json(); .setState({ : categories
    });
  } this async this loading true const await `https://kriss.io/wp-json/wp/v2/categories` const await this 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 hook. componentDidMount Now, we need to add the data to in the function of Categories screen as shown in the code snippet below: FlatList render() render() { ( <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>
    );
  }
} return < > ScrollView Here, we have the template in the component. The is configured with data from for and prop for the key data. Then, the renderItem prop returns the template for the categories list. The template has the as the parent component which has navigation configured to the screen. We are going to implement the CategorieList screen later. Then, we have used the component and its subcomponents to display the category name. FlatList FlatList categories data keyExtractor TouchableOpacity CategorieList Card Hence, we will get the following result in the emulator screens: 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 file in the folder. CategoriesList.js ‘./screens/’ Then, we need to make the imports and also define state as shown in the code snippet below: React ; {View, FlatList, TouchableOpacity} ; {Card, Title, Paragraph} ; moment ; HTML ; { (props) { (props); .state = { : [],
    };
  } import from 'react' import from 'react-native' import from 'react-native-paper' import from 'moment' import from 'react-native-render-html' export default . class CategorieList extends React Component constructor super this 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 file. For that, we need to make use of the code from the following code snippet: App.js CategorieList ; StackNavigator = createStackNavigator({ : DashboardTabNavigator, : SinglePost, : CategorieList
}); import from './screens/CategoriesList' const DashboardTabNavigator SinglePost CategorieList Then, we need to implement the function called 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: fetchPost componentDidMount() { .fetchPost();
 } fetchPost() { categorie_id = .props.navigation.getParam( ); response = fetch( ,
   ); post = response.json(); .setState({ : post});
 } this async let this 'categorie_id' const await `https://kriss.io/wp-json/wp/v2/posts?categories= ` ${categorie_id} const await this posts Here, we have fetched the posts using 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 hook of the CategorieList screen. fetch() componentDidMount 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 function render() render() {
    categorie_title = .props.navigation.getParam( ); ( <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>
    );
  }
} this 'title' return < > View Here, we have used the 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 as the parent component. FlatList TouchableOpacity Hence, we will get the following result in the emulator screens: 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 and display them as a list. Then, by clicking on the article posts we navigated to the SinglePost screen. category id 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

How To Build WordPress Client App with React Native Part #13: Configuring Firebase Database

How To Build WordPress Client App with React Native Part #12: Creating Categories Screen

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

119 Stories To Learn About Apps

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

119 Stories To Learn About Apps

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps