- I’ve used React Native since the very early days of it being opened sourced and have tried many solutions, this has been my navigator progression…NavigatorIOS Navigator react-native-router-flux NavigationExperimental or ex-navigation (depending on navigation requirements)Each upgrade took time to refactor and introduce a new, slightly different, pattern for navigation and managing navigation state.Fortunately, we’ve now got a single “official” solution to navigation in React Native with react-navigation.
- The TabNavigator takes an object and each key/value pair is going to represent a tab.You can see that we then pass a screen to each tab—this will be the component that should be rendered when that tab is active.The last thing we need to do is use the Tabs navigator in our app entry point.
- We can then replace the Feed screen definition in the TabNavigator with our new stack.I didn’t mention it before but in React Navigation, in addition to accepting components for the screen, it accepts other navigation stacks to display for a screen.
- It, like the navigate function, is available on I’m pulling all the data to generate the UserDetail.js screen like thisModalThe final thing I want to cover in this tutorial is how to create a modal with React Navigation.
- In addition to the mode, which I described above, we have headerMode which tells the StackNavigator to not display a navigation bar for this stack — we’ll let the children navigators do that.To keep a consistent interface and to show that you can nest a StackNavigator in a StackNavigator we’ll build one for the settings screen as well.Finally, we’ll want to tell the app entry point to use our new Root navigator instead of the Tabs.All of this leaves us with the followingRemember, all of this code is available on Github and I encourage you to check it out as well as the react navigation docs.
If you’ve worked with React Native for any amount of time you’ve likely been confused by how you navigate in your app (practices, packages, etc). I’ve used React Native since the very early days of…
Continue reading “Getting Started with React Navigation, the Navigation Solution for React Native”