How To Build a WordPress App with React Native Part #3: the Navigation

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 In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below: Build WordPress Client App with React Native #1: Overview Build WordPress Client App with React Native #2: Setting Up Your Environment Now, we need to organize our project structure with all the files and folders and also set up the navigation. For that, we are going to install the react-navigation package version 4 and all its required dependency packages. Recently, most of the components and modules delivered by the react-navigation package have been separated into different packages. Hence, we need to install other packages as well in order to make our navigation fully work. For that, we need to run the following command in our project repository: yarn add react-native-gesture-handler react-native-reanimated react-native-screens Here, we have installed the react-navigation package along with the react-navigation-stack and react-navigation-tabs package. The react-navigation-stack package enables us to create the navigator stack of our app screens. The react-navigation-tabs package enables us to create the bottom tab navigation on our main screen. Now, we also need to install the required dependencies in order to run the react-navigation package properly, Hence, we need to install the following package as well: react-native link Here, we have installed three packages required for react-navigation to run smoothly. Some of the packages need some extra configurations in the case of Android. For that, we can follow the instructions from the . And, for Android, we may need to link the packages if the version of react-native is less than 0.60. For that, we can run the following code for each package: documentation react-native link In case of iOS, we need to navigate to ‘./ios/’ folder and then run the following command: cd ios ; pod install To finalize installation of react-native-gesture-handler for Android, make the following modifications to : MainActivity.java com.reactnavigation.example; com.facebook.react.ReactActivity; + com.facebook.react.ReactActivityDelegate; + com.facebook.react.ReactRootView; + com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; { { ; } + + { + ReactActivityDelegate( , getMainComponentName()) { + + { + RNGestureHandlerEnabledRootView(MainActivity. ); + } + }; + } } package import import import import public class MainActivity extends ReactActivity @Override String protected getMainComponentName () return "Example" @Override ReactActivityDelegate protected createReactActivityDelegate () return new this @Override ReactRootView protected createRootView () return new this Then, we can re-run our project in the respective emulators. For the screens, we are going to create four screens first, which are shown in the screenshot below: Then, we need to add the default react native template to each of the screen files. The default react native code for the Bookmark.js file is provided in the code snippet below: React, {Component} ; {View, Text} ; { (props) { (props); .state = {}; } render() { ( Bookmark ); } } Bookmark; import from 'react' import from 'react-native' class Bookmark extends Component constructor super this return View View export default Likewise, we can add the default template to each of the screens just changing the class name. Next, we need to open our App.js file and make the following imports: React, { Component } ; {createAppContainer, createSwitchNavigator} ; {createBottomTabNavigator} ; {createStackNavigator} ; Home ; Categories ; Setting ; Bookmark ; import from 'react' import from 'react-navigation' import from 'react-navigation-tabs' import from 'react-navigation-stack' import from './src/screens/Home' import from './src/screens/Categories' import from './src/screens/Setting' import from './src/screens/Bookmark' Here, we have imported the respective components required to configure our navigation from the packages we installed below. We have also imported the screen files as well. Then, we are going to create the bottom tab navigator using function from the package. The overall implementation is provided in the code snippet below: createBottomTabNavigator react-navigation-tabs DashboardTabNavigator = createBottomTabNavigator( { : { : Home, : { : , }, }, : { : Categories, : { : , }, }, : { : Bookmark, : { : , }, }, : { : Setting, : { : , }, }, }, { : { {routeName} = navigation.state.routes[navigation.state.index]; { : routeName }; }, }, ); const HomePage screen navigationOptions tabBarLabel 'Home' Categories screen navigationOptions tabBarLabel 'Categories' Bookmark screen navigationOptions tabBarLabel 'BookMark' Setting screen navigationOptions tabBarLabel 'Setting' navigationOptions ( ) => {navigation} const return headerTitle Here, we have defined each screen in the bottom tab navigator along with icons as well. Then, we have also configured each route with header title in the object. navigationOptions Now, we need to create the stack navigator and add our bottom navigator to it. For that, we need to make use of function provided by the package as shown in the code snippet below: createStackNavigator react-navigation-stack StackNavigator = createStackNavigator({ : DashboardTabNavigator, }); createAppContainer(StackNavigator); const DashboardTabNavigator export default Then, lastly we need to register our stack navigator to method from the package and export it. createAppContainer react-navigation Hence, we will get the following result in the emulator screens: Summary In this chapter, we learned how to set up the package with all it’s dependencies packages. Then, using these packages we learned how to set up the bottom tab navigation in our project. react-navigation