Source : Using react-navigation 3.0 in React Native apps
This tutorial explains how to move or navigate from one screen to another using React Navigation 3.X Library in react native application. In a web browser, you can link to different pages using an anchor () tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack.
react-navigation version : 3.X
Similarly, React Navigation's stack navigator provides a way for your app to transition between screens and manage navigation history.React Navigation is that React Navigation's stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.
If you would like to learn about react navigation version 2.X in react native application, then follow the below link :
react-navigation version : 2.X
Before we start the tutorial, we need to aware of some important function, which we required during the page navigation from one screen to another. So Lets get started :
createStackNavigator : createStackNavigator is a function that takes a route configuration object and an options object and returns a React component. Basically here we are maintaining the route information for different screen or activity.
navigation prop : The navigation prop is available to all screen components, that helps for screen navigation.
this.props.navigation.navigate('RouteName') : pushes a new route to the stack navigator if it's not already in the stack, otherwise it jumps to that screen and pops the already open screen.
this.props.navigation.push('RouteName') : pushes a new route to the stack navigator even if already present in the stack.
this.props.navigation.goBack() : when you switch to new window using stack navigator, then it will automatically enabled the back button in header bar.(On Android, the hardware back button just works as expected.) Also you can do the same programmatically by calling the goBack() function.
this.props.navigation.popToTop() : This function helps to switch back to the home or first screen of your react native application.
Top comments (0)