Most mobile apps comprise of more than one screen, so we will need to be able to "travel" between those screens. In order to achieve this, we will need a Navigation
component. React Native comes with a Navigator
and a NavigatorIOS
component out of the box, although the React maintainers recommend using an external navigation solution built by the community named react-navigation
(https://github.com/react-community/react-navigation), which is very performant, well maintained, and rich in features, so we will use it for our app.
Because we already installed our module for navigation (react-navigation
), we can set up and initialize our Navigation
component inside our main.js
file:
/*** src/main.js ***/ import React from 'react'; import { StackNavigator } from 'react-navigation'; import ShoppingList from './screens/ShoppingList.js'; import AddProduct from './screens/AddProduct.js'; const Navigator = StackNavigator({ ShoppingList: { screen: ShoppingList }, AddProduct: { screen: AddProduct } }); export default class App extends React.Component { constructor() { super(); } render() { return <Navigator />; } }
Our root component imports both of the screens in our app (ShoppingList
and AddProduct
) and passes them to the StackNavigator
function, which generates the Navigator
component. Let's take a deeper look into how StackNavigator
works.
StackNavigator
provides a way for any app to transition between screens, where each new screen is placed on top of a stack. When we request the navigation to a new screen, StackNavigator
will slide the new screen from the right and place a < Back
button in the upper-right corner to go back to the previous screen in iOS or, will fade in from the bottom while a new screen is placing a <-
arrow to go back in Android. With the same codebase, we will trigger familiar navigation patterns in iOS and Android. StackNavigator
is also really simple to use, as we only need to pass the screens in our apps as a hash map, where the keys are the names we want for our screens and the values are the imported screens as React components. The result is a <Navigator/>
component which we can render to initialize our app.