You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Navigation in react-native is pretty different, specially if you are coming from web background. It follows native standards for navigation. Example: Screens, stacks, push/pop, which most of us web developers have not used for routing.
3
+
Navigation in react-native is pretty different, especially if you are coming from a web background. It follows native standards for navigation. For example, it uses the concept of screens, stacks, push/pop, which most web developers have not used for routing.
4
4
5
-
> It is not as simple as doing `dispatch(push('<routeName>')`. You have to manage screens, reset your stack, nest them properly. If not configured well, it can cause huge performance loss and muliple components being mounted at a single point of time.
5
+
> It is not as simple as doing `dispatch(push('<routeName>')`. You have to manage screens, reset your stack, nest them properly. If not configured well, it can cause huge performance loss and multiple components to be mounted at the same time.
6
6
7
-
React-native has a bunch of options for routing. \(They have mentioned it here: [https://facebook.github.io/react-native/docs/navigation.html](https://facebook.github.io/react-native/docs/navigation.html)\). We found React-navigation the most stable among all the options.
7
+
React-native has a bunch of options for routing. The different options have been mentioned here: [https://facebook.github.io/react-native/docs/navigation.html](https://facebook.github.io/react-native/docs/navigation.html). We have found react-navigation to be the most stable among all of them.
8
8
9
9
### Why react-navigation?
10
10
11
-
*It is a wrapper over NavigationExperimental\(which supports the smooth native-thread animations provided by the Animated library\). Moreover, NavigationExperimental is removed from the latest react-native version because some libraries sprung up around it which made it much easier to use than the official implementation.
11
+
*The official react-native documentation recommends using react-navigation. It says, `"You will probably want to use React Navigation."`.
12
12
13
-
*The official react-native documentation suggests React-navigation. `You will probably want to use React Navigation.`: Says the documentation
13
+
*It supports native transitions for both Android and iOS.
14
14
15
-
*It supports native transitions for both android and IOS.
15
+
*Both Android and iOS routes can be handled by one single configuration file without any platform specific configuration.
16
16
17
-
*Both android and IOS routes can be handled by one single configuration file without any platform specific configuration.
17
+
*Provides multiple types of navigators out of the box. E.g.: StackNavigator, TabNavigator, DrawerNavigator.
18
18
19
-
*Provides multiple type of navigators out of the box. eg: StackNavigator, TabNavigator, DrawerNavigator.
19
+
*It is highly configurable. You can configure almost everything, be it tabs, header or footer, using a single config file.
20
20
21
-
* It is highly configurable, you can configure almost everything. Again, using a single config file. Be it tabs, header, footer.
22
-
23
-
* Redux integration available: Its very easy to integrate with redux store. The benefit of this is that you can navigate by just dispatching action and passing route name. It makes route management much more easier. After integration, all you need to do is: `dispatch(NavigationActions.navigate({routeName}))`.
21
+
* Redux integration is available. It's very easy to integrate with the Redux store. The benefit of this is that you can navigate by just dispatching an action and passing the route name. It makes route management much easier. After integration, all you need to do is: `dispatch(NavigationActions.navigate({routeName}))`.
Copy file name to clipboardExpand all lines: 10-navigation/10.1-using-react-navigation.md
+21-21Lines changed: 21 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
-
# Using React-navigation
2
-
Using react-navigation is pretty simple once you understand how it works. Unfortunately, their official documentation lacks some explanations. But no need to worry, we will try to fill the gaps in the official documentation in this chapter.
3
-
The URL for official documentation: https://reactnavigation.org/docs/intro/
1
+
# Using React-Navigation
2
+
Using react-navigation is pretty simple once you understand how it works. Unfortunately, their official documentation lacks some explanations. But there is no need to worry. We will try to fill in the gaps in the official documentation in this chapter.
3
+
The official documentation is available at https://reactnavigation.org/docs/getting-started
4
4
5
-
### How navigation happens in native applications?
6
-
When it comes to native apps, the routing is a little different, specially for those who are coming from a WEB development background. There is the concept of stack, screen, etc.
5
+
### How does navigation work in native applications?
6
+
When it comes to native apps, the routing works on the concept of stacks, screens, push/pop, etc.
7
7
8
8
### What is a stack in navigation?
9
-
We all have heard of stacks in our college programming classes. Well, this stack is exactly that. Whenever you navigate from one screen to another, the new screen comes on top. The old screen is still there(unless you reset your stack). This mechanism of caching the old pages helps improving performance and making the transitions smoother. Have a look at the below image for example of stack in navigation.
9
+
We all have heard of stacks in our college programming classes. Well, this is exactly the same stack. Whenever you navigate from one screen to another, a new screen comes up on top. The old screen is still there(unless you reset your stack). This mechanism of caching the old pages helps in improving performance and making the transitions smoother. Have a look at the image below for an example of stack in navigation.
10
10
11
11
<br>
12
12
<divstyle="text-align:center">
@@ -16,23 +16,23 @@ We all have heard of stacks in our college programming classes. Well, this stack
16
16
17
17
18
18
### Types of navigators offered by react-navigation
19
-
React-navigation offers a bunch of navigators predefined for our use. An app might contain all the three navigators. Lets try to understand all of them one-by-one.
19
+
React-navigation offers a bunch of navigators predefined for our use. An app might contain all the available navigators. Let's try to understand all three of them one-by-one.
20
20
21
-
-Stack-navigator: This is most common navigator of all. You will use it for most of the applications. We just explained how stack works in navigation. You define stack navigator by passing the routes object inside StackNavigator function from react-navigation. Each of the screen gets mounted only when you navigate to that particular screen and gets un-mounted only when you go back or manually reset the navigation state.
21
+
-StackNavigator: This is the most common navigator of all. You will use it for most react-native applications. We just explained how stacks work in navigation. You define a StackNavigator by passing the routes object inside the StackNavigator function from react-navigation. Each of the screens gets mounted only when you navigate to that particular screen and gets un-mounted only when you go back or manually reset the navigation state.
22
22
23
-
-Tab-navigator: This is also quite common user interface. Where we have a bunch of tabs and we can swipe between them. We have seen this is facebook, twitter and many other famous apps. react-navigation supports this navigator as well out of the box. The way of defining is pretty much same as of stack-navigator. Only difference is that the routes you define in Tab-navigator gets mounted all at once. So you need to be a little careful when you manage navigating-to/coming from different stack.
23
+
-TabNavigator: This is also quite a common user interface where we have a bunch of tabs and can swipe between them. We have seen this in Facebook, Twitter, and many other popular apps. React-navigation supports this navigator out of the box. The way of defining a TabNavigator is pretty similar to a StackNavigator. The only difference is that the routes you define in TabNavigator get mounted all at once. So you need to be a little careful when managing navigation to/from a different stack.
24
24
25
-
- DrawerNavigator: This navigator gives us the sidemenu which we see in a lot of application nowadays. You can obviously customise everything in your drawer since everything is just JS. You can setup drawer navigator by writing just 4 lines of code. The DrawerNavigator comes with a default UI which support icon and a title per list item, which I feel is very elegant. You can also define your own component to show as a drawer if you want to have a custom UI and actions for your sidemenu. More info can be found [here](https://reactnavigation.org/docs/navigators/drawer).
25
+
- DrawerNavigator: This navigator gives us the side-menu which we see in most mobile applications nowadays. You can obviously customize everything in your drawer since it is all written in JavaScript. You can set up the DrawerNavigator by writing only 4 lines of code. The DrawerNavigator comes with a default UI which supports an icon and a title per list item, which looks quite elegant. You can also define your own component to show up as a drawer if you want to have a custom UI and actions for your side-menu. More info can be found [here](https://reactnavigation.org/docs/drawer-based-navigation).
26
26
27
27
## Creating a router
28
28
29
-
Install `react-navigation` using NPM or Yarn.
29
+
Install `react-navigation` using npm or Yarn.
30
30
31
31
`yarn add react-navigation` or `npm install react-navigation --save`
32
32
33
-
Creating a router is pretty easy, you just define a page component(which will be container component) and then import in your router.js file.
33
+
Creating a router is pretty easy. You just define a page component(which will be a container component) and then import it in your router.js file.
34
34
35
-
Each of the navigators accept an object while initialization whose syntax is as follows:
35
+
Each of the navigators accepts an object during initialization whose syntax is as follows:
`routeName`is the name associated with the current scteen. It will be used for navigation/analytics tracking.
45
+
`routeName`is the name associated with the current screen. It will be used for navigation/analytics tracking.
46
46
47
-
`screenObject` The screen key in the router object can take:
48
-
- A react native component.
49
-
-An react-navigation router instance if you want routers nesting. [Nesting of routers](https://reactnavigation.org/docs/intro/nesting)
47
+
`screenObject` The screen key in the router object can contain:
48
+
- A React Native component.
49
+
-A react-navigation router instance if you want routers to be nested.
50
50
51
51
> Example routes/index.js
52
52
@@ -76,7 +76,7 @@ const Router = StackNavigator({
76
76
exportdefaultRouter;
77
77
```
78
78
79
-
Each of the navigator returns a react component which is supposed to be added to the root level of the app.
79
+
Each of the navigators returns a React component which is supposed to be added to the root level of the app.
80
80
81
81
> Example App.container.js
82
82
@@ -96,11 +96,11 @@ class App extends Component {
96
96
exportdefaultApp;
97
97
```
98
98
99
-
When we define a react component in our router file, it adds few properties to the component, which are:
99
+
When we define a React component in our router file, it adds a few properties to the component, which are:
100
100
101
-
- static [navigationOptions](https://reactnavigation.org/docs/navigators/navigation-options#Stack-Navigation-Options): We can use this to define our headers, title, etc. However we recommend defining this in router.js because we will be importing page to our router and defining header UI/title in the container component is not a good idea.
101
+
- static [navigationOptions](https://reactnavigation.org/docs/headers.html#setting-the-header-title): We can use this to define our headers, title, etc. However, we recommend defining this in router.js because we will be importing pages to our router and defining header UI/title in the container component is not a good idea.
102
102
103
-
- this.props.navigation: react-navigation also adds navigation function to the screen. This function can be used to navigate to a route or pass parameters. We do not recommend this way as we will be handling routing via [redux-actions](https://reactnavigation.org/docs/guides/redux)
103
+
- this.props.navigation: react-navigation also adds a navigation function to the screen. This function can be used to navigate to a route and pass parameters. We do not recommend this way as we will be handling routing via [redux-actions](https://reactnavigation.org/docs/redux-integration.html)
0 commit comments