React Navigation for Beginners (Advanced Version-3)

A look at basic code and navigation

6 min readAug 10, 2018

I started working with React Native a few months back, and I must say it has been an amazing journey. I went from a full-time, front-end developer profile, creating websites with HTML and CSS as my knowledge base, to React Native, which is built on full-fledged JavaScript.

In this piece, I’ll tell you about basic code structure and navigation. It’s helpful for any beginner to easily create a React Native app and navigate between the screens.

Project Setup

You can visit the React Native site to explore more about the framework. When you visit this site, you are provided with two options — one is to help you get started, and the other is to help you learn the basics. As we are going to explore the code structure in this piece, I will be discussing it in more detail here. If you want to learn the basics to enhance your concepts, feel free to browse the React Native site.

Before getting started, make sure you have the following installed in your system:

XCode application (for Mac systems). You can install it from the app store.
Android Studio (optional)
Node latest version
Code Editor ( Visual studio code ) with terminal.

Assuming that you have Node installed, enter the following command in the terminal:

npm install -g react-native-cli

This will install the react-native-cli in your system. Now it’s time to create the app. Enter the following command in the terminal:

react-native init MyProjectName

We have to wait for a few minutes until the project is installed. Once it’s done, you can visit the folder of the app you just created by entering the following command:

cd MyProjectName

You can see the full code structure of the app installed with default files and folders provided by react-native-cli.

Default Code Structure provided by React Native

Creating Our Own Screens and Components

As we are already done with the project environment setup, it’s time to give it a personal touch. Now I’ll create the screens and components I’ll be using in my app.

Creating the src folder

Just below the node modules folder, add a folder and name it src.

Really, you can name the folder whatever you want to. I am naming it src as it is usually recommended to help the other developers understand where the source code of the app exists.

Once you have created the src folder, you have to create two more folders inside the src folder. One for the screens you’ll be creating, and one for the components. Once you are done with this addition, your code structure will look something like this:

Before moving ahead with the screen creation, let’s learn how to navigate the React Native app to your code. For that, we’ll make the following changes in the existing files. I’ll use React Navigation to route between the screens. You can install it using the following code in your terminal within your project:

npm install react-navigation

Once React Navigation is installed, go to the folder structure and create a file called Route.js. This will contain the code for navigating between the screens within the app. It should be added outside the src folder, like this:

Now, inside the Routes file, add the following code:

You can see in the code that above I have imported two files in my code — Home and Profile — and used them in the navigation component. These two files are basically the screens which contain the code for my app. I will talk more about them later. For now, don’t worry about them.

Go to theApp.js file in your project folder and remove all the existing code. Then, add the following lines of code:

import React, {Component} from "react";
import Routes from "./Routes";
const App = () => <Routes/>export default App;

Once you are done with the changes in the App.js file, it’s time to make changes in the index.js file to complete the navigation process.

import { AppRegistry } from 'react-native';
import App from './App';
console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed'];
AppRegistry.registerComponent('AwesomeProject', () => App);

Now that the navigation setup is complete, we can move towards creating our own screens and components for our app.

Screens Creation and Navigation

Go to the screens folder in the src folder you created and add two files — Home.js and Profile.js. Yes, you guessed right. We are creating the screens I talked about above.

Once you are done with creating those files, let’s add the code and link them to navigate between both the screens.

Home.js

Profile.js

You must have noticed the code for both the files is almost the same. This is because I am focusing on navigation right now and not on content creation. I may write about them in my next pieces to give you a better picture of the content.

Still, let me explain the basics of the above screen code:

In the very first line, we are importing the React library.
In the next line, we are importing all the components from React Native, which we require for the screen creation.
Then, I created the class with the same name as the file. It’s not necessary, but it is recommended to avoid confusion.
Static navigation option is basically for the Header title. You can change and manipulate this by using static navigation option.
Then I styled the component View, which is similar to the div element in HTML code. You can style the component at the end of code as well, but again it’s up to you.
Next, I have a button to link me to another screen, which is similar to the <a> tag in HTML. Remember when we installed the React Navigation library above? This is where it helps the developer or user navigate between the screens.
Finally, I have exported the whole class so that we can import it elsewhere within our app. This can also be done at the beginning of the class like this:

export default class Home extends React.Component {.....Code here.....}

So now you’re almost done. Go to the terminal and enter the following command.

react-native run-ios

Once the process of build development is completed you would see something like this:

Home Screen:

Profile Screen:

Feel free to look for this project in my github repository.

Thanks. Keep learning and sharing :-)