Routing/Navigation In React Native-App

What we have understood so far, from the previous articles, is:

1. Basics of react native
2. React Native Component and code walk through

While creating any mobile application, there always is a high probability of having more than one screen/View in the app.

It's very important to understand and design the app in a way that smooth navigation/routing should flow. It is commonly referred to as routing/application routing etc.

In react native, we can term it as navigation/switching between screens.

What is navigation in any app? Let's try to understand.



The above picture is a perfect scenario of switching from one screen to another and switching(back/forth) within the pages/Views.

User is navigating to Settings -> General -> Auto-Lock and vice versa.

Let’s see how this is maintained.

Generally, Navigation stack stores all View Controllers. The first view controller in the array is the root View Controller. Views are then added and removed from the stack as per user actions.

Let's get our hand dirty and see some live code.

In this app, there is a login screen having three Controls.

1. Two text boxes (username and password).
2. Sign In Button.

Once user provides input on username and password (no actual validation happening to keep it simple), the values are passed to the next screen (HomePage) with username and password.

Let's see the output screen.

Login View



Home page View



What’s happening in the app:

1. User enters username-password and clicks ‘Sign in’.
2. On successful validation, the user is navigated to HomePage, with some data (username and password).
3. Back button is provided to go back to login screen (In reality, it could be for some other purpose).

The walk through of code is how the screen is designed, and how the navigation is happening.
.


NavigatorIOS at line # 10 needs to be understood.

We are importing NavigatorIOS from react-native. In react-native, we use NavigatorIOS as a wrapper around native UINavigationController.

It works exactly the same way as it would work on native apps, using UINavigationController.

The following screen shows the parameter (better term props in react) needs to be set for NavigatorIOS.



To set up the navigator, provide the initialRoute prop with a route object. A route object is used to describe each View that the app navigates to. initialRoute represents the first route in your navigator. In our case, LoginView is the first screen/View/page.



This code snippet demonstrates how data/props can be shared within the screen. In this code, LoginView component shares/sends username and password to HomePage screen whenever the SignIn button is pressed.

NavigatorIOS passes this in as props to the rendered component:



You can then access the props passed in via {this.props.username} on HomePage. (See Line #21, #24)

Conclusion: In this article, we learned how to create multiple Views and how the app can switch among them along with the data. We also learned how to set the default route.

Source Code.

Hope you enjoyed this article. Wait for the next interesting one!