Tarn Aeluin

Technology, soapbox, and crap...

Getting Around with React-Native Navigation V2

by · Published · Updated

Getting around with React-Navigation V2 is quite a bit different from V1. Well – ok its totally different. That’s a good thing – there were some pretty limiting factors with V1 of the package. Controlling the flow of your screens and your options for new kinds of structures are definitely enhanced. In this post I’ll take a look at what’s new and what gotchas exist (yes they always exist!).

Getting Started

This is my third post on React so if you are interested, check out the other two posts:

In those articles I’ve covered most of the basics for working with React, in particular how to setup a machine for working with the basic tools. This article will be building on those basics. The best place to start is of course React-Navigation V2’s docs, but I found these to be somewhat confusing, thus this post. Be sure to see the links at the bottom of each page to the code they have produced – I missed that completely.

React-Navigation with StackNavigatorReact-Native Navigation V2 Basics

Create a new app with “create-react-native-app MyApp” and then add the react-navigation package. A quick npm install and you should be good to go. Check your package.json file to make sure you have V2.0.x of the package. It is pretty simple to setup the basic elements. StackNavigator is the main navigation component to learn first since all apps will most likely use it.Create a screen component, use createStackNavigator to assign this to a const. Include this as an element in your main class’s render method. See the screen shot…

When you start to have multiple screens, you need to adjust the createStackNavigator code a bit so that each screen/route has a unique name:

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  },
)

Now you can setup some buttons to route back and forth. When you have a stack navigator, you get access to navigation state by accessing: this.props.navigation. On this object are a bunch of methods and variables to understand the current state of navigation and to execute methods like:

<TouchableOpacity
  style={Platform.OS === 'ios' ? styles.iosBtn : styles.androidBtn}
  onPress={() => this.props.navigation.navigate('Details')}
>
  <Text style={styles.buttonText}>Go To Details</Text>
</TouchableOpacity>

To route the screen to the Details page. You notice when you do that, the details screen will get a “back” button on the screen header. A pesky source of issues in V1 so more on that guy later. Methods to know:

  • navigate: Loads the route, but will not load a new screen if the route is already loaded
  • push: Loads a new copy of the route even if it already exists.
  • popToTop: Will take you back to the initial screen no matter where you are currently.

Navigating to ‘Home’ (the main screen in your app) also seems to clear the screen state similar to popToTop(). There are a bunch of fine details on the options for StackNavigator here. Some decent code examples to show exactly how to structure all the props. Definitely gets to be pretty nasty finding the one missing comma or brace. A decent IDE is definitely required. I’m using Jetbrains PHPStorm, but there’s a bucnh of decent ones out there.

React-Navigation with TabNavigator

Tabs are usually a necessary evil. Especially helpful for getting quickly to the one or two super Using TabNavigatorcritical functions in your app, learning how to combine TabNavigator and Stack Navigator is super important. It is fairly easy to add tabs, however there are some side effects. When I added tabs it now “hides” the headerRight icon I had in my HomeScreen. I tried moving this to the tabNavigator along with the headerTitle. The header title works, but the icon does not. Unfortunately then the headerTitle sticks and over-rides the titles on the headers of screens down the stack too. I’m still working with this – I’m sure there is a solution – but I’ll have to follow up on this.

React-Navigation V2 Final Thoughts and Tips

No doubt V2 is a big improvement. There were things like “popToTop” missing in V1 that really were huge omissions in making a great app. Lots of gaps closed and I have to really compliment the authors of all the documentation. Really nice work. My best tip is that if you want to learn this stuff, really sit down for a day and run thru the documentation and build out all their code yourself. Very helpful in terms of really retaining how this all works. Tip #2  – build apps like a maniac. Practice makes perfect.

My code is on github.com if you want to check it out here. Be kind 🙂 – I’m still learning and will continue to play around with different options, in particular how to combine Stack, Tab, and Drawer navigation packages.

Tags:

Leave a Reply