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:

src folder with screens and components

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:

Routes file

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 the App.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.