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.
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.
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.
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.
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.
Once we have written the classes for all the cities, setup our StackNavigators and our TabNavigators, we have the following results —
Links that were useful in building this mini-application —
For our next post, we’ll explore using GPS to launch google maps to your current location and introduction to Native Base.