Intro to React Navigation
For any questions relating to the Expo CLI, please reference their excellently maintained documentation. I will also be posting about how/why to use Expo in the near future.
When you start your project and open the simulator (our project, will be using the iOS simulator for iPhone 11 Pro Max), you’ll see this:
This is the default view, with no bells or whistles. From here we can fully develop our own screens and navigation, from scratch.
To get started with React Navigation, we will need to install the additional dependencies that aren’t generated by the blank Expo template.
Run the following command in your main project directory:
expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens
Because this example is being done with a tab navigator, we also need to run the following command:
expo install react-navigation-tabs
By default, your file tree should look like this:
We need to make some changes to this structure and add some directories and files to better organize the app. This will make it more readable and easier to manage as your application grows.
We will need to add three new folders under the main project directory.
Your file tree should now look like this:
components/ folder, we will create a component to be displayed within each of the screens. The
ScreenName.js file will look like this:
screens/ folder, we create two files:
The last two files we create are
BottomTabNavigator.js in the
First we will create the tab navigator in the
BottomTabNavigator.js file. Here we import the
createBottomTabNavigator method from the React navigation tabs:
We create a switch navigator within the app container that will encompass our entire app. Additional routes, such as a login route could be added. By default, the switch navigator will first render the first route listed:
Finally in the
App.js file, update it’s contents with your App Navigator, instead of the default ‘Hello World’ text:
Your screen should now have two tabs and be navigable! The view on your simulator should look something like this:
Now that we have our main Tab Navigator set up, we have the ability to edit and style each view. I will delve deeper into customization and navigation types in future posts.
To see more than just the GitHub gists for this project (all of which are linked to below code examples), the full repository is here.