My Challenges with React Native: Blog post 4

For this blog post, I wanted to focus on the tips and challenges when implementing navigation in react native.

Recap: My last post explored the challenges with using MapView to render google maps in a native application

Navigation

Navigation within mobile applications is reflection of the functionality that the app can provide. The npm website has more details on react navigation. To install, use the command:

npm install — save react-navigation.

We will only be learning how to use Stack and Tab Navigation and hence, to use them in your file add the following:

import { TabNavigator, StackNavigator } from ‘react-navigation’;

Stack Navigation

The StackNavigator is a function in Native that takes route configuration objects and returns a React component.

We want our first screen to be the Home screen that has a button that leads to Google Maps. Thus, we wrote a HomeStack which contains two routes — the home route and the map route. The Home route corresponds to the HomeScreen component, and the Maps route corresponds to the MapsScreen component. The initial route for the stack is the Home route.

The HomeStack Navigator which contains all the routes within the Home Screen

Our second screen is the settings screen and it does not have any content on it yet, Thus, we wrote a SettingsStack which contains only the Settings route.

The SettingsStack Navigator which contains all the routes within the Settings Screen

I also added a third screen using everything we’ve done so far. This is the TripsPage screen that contains three buttons that each launch the google maps for Washington DC, Philadelphia and New York City.

The TripsPage Class with the code for navigating the buttons to the appropriate TripsStack Screen

Above you can see the onPress statements such as -

onPress={() => this.props.navigation.navigate(‘Washington’)}

This line of code decides where the application will navigate to when the button is pressed. ‘Washington’ is a title of a screen within TripsStack that links the TripsPage with the classes of the different cities.

The class for launching Google Maps to the coordinates of Washington D.C.

The TripsStack Navigator which contains all the routes within the Trips Screen. The titles used here for the screens belonging to the cities are also used above in OnPress to navigate to the correct classes

Tab Navigation

The customization is similar to the StackNavigator. There are some properties such as the title of the tabs that are initialized within the default TabNavigator. We have to use the TabNavigator to align the appropriate tab titles with the appropriate StackNavigator. Make sure to export your TabNavigator so as to be able to import them in other files as you expand your application.

The TabNavigator that contains all the major tabs in our application

Once we have written the classes for all the cities, setup our StackNavigators and our TabNavigators, we have the following results —

The screen containing the buttons that launch the maps for the cities of Washington D.C., New York City and Philadelphia

If you click the button for Washington, it will lead you to the specified coordinates within D.C.

Links that were useful in building this mini-application —

Tab navigation · React Navigation (v2)

How to add screen from a different file? · Issue #1241 · react-navigation/react-navigation

Nesting Navigators tutorial - 'Home' should declare a screen · Issue #571 ·…

Getting Started with React Navigation, the Navigation Solution for React Native

For our next post, we’ll explore using GPS to launch google maps to your current location and introduction to Native Base.