React-native navigation

Packages used for navigation in react-native is react–navigation Installation Using yarn

 yarn add react–navigation

Using npm

npm install —save react–navigation

Navigators

1. StackNavigator is a function that returns a React component. It takes a route configuration object and, optionally, an options object . Because the StackNavigator function returns a React component, we can export it directly from App.js to be used as our App’s root component.

Figure 1 : 

1). Navigation Bar

2) Content area – Where the content is displayed.

How do you navigate to a new screen?

 this.props.navigation.navigate(‘Details’);

The navigation prop is available to all screen components (components defined as screens in route configuration and rendered by React Navigation as a route).

navigate(‘Details’): we call the navigate function with the name of the route that we’d like to move the user to.

There are two pieces to this:

1. Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function: 

this.props.navigation.navigate('RouteName', { /* params go here */ })

1. Read the params in your screen component: this.props.navigation.state.params. Alternatively, if you want to access the params directly (eg. through this.props.itemId), you may use a community-developed react-navigation-props-mapper package.

react-navigation-header-buttons

This package will help you render buttons in the navigation bar and handle the styling so you don’t have to. It tries to mimic the appearance of native navbar buttons. HeaderButtons.Item accepts buttonWrapperStyle prop which you may use to modify item alignment in case the default outcome does not fit your needs.

Install

yarn add react-navigation-header-buttons