Displaying content on mobile app using React Native

In the previous section, we talked about how to set ESLint for VSCode. So, enough with setting up. Let’s start coding. Today we’re gonna learn Displaying content on mobile app using React Native.

I hope you have opened your project in VSCode now. There are two javaScript files as you can see. These two files are the only important files for us right now. If you have run the app in emulator, this is the UI you see now.

As I have taught you before, index.js file is the one which runs in your device. Now let’s open index.js file and check its code.

This is all we can see in index.js file. But have you wondered where that content in the UI comes from?

So, that content must be written in App.js and imported to index.js. Let’s check out App.js file.

Try to understand the code

As you can see, the content in the UI is in App.js file. So, to get started we don’t have to change anything in index.js for now. App.js is already imported to index.js and we just have to change App.js.

Getting Started – Displaying content

So, I am going to erase whole code in App.js and begin from the basics.

First thing to know is, Displaying content on mobile app’s UI. That’s what I am going to teach you now.

Whenever you want to display content on the UI, you need to create a ‘Component’. A component is simply a javaScript class or a function that optionally accepts inputs and returns elements that describes how the UI of the app should look like. Typically a react native app has lots of Components. But here, our purpose is to create one single component and render it to the screen.

In a react native javaScript file, we do three things when we create a component.

  1. Import a library to help to create a component.
  2. Create the component.
  3. Render it to the device.

To make it easy I’ll comment these steps in App.js file.

TODO list

Step 1 – Import a library to help to create a component.

So, first step of this Displaying content on mobile app using React Native is to import the libraries. I recommend you to do this with me.

//Import a library to help to create a component.
import React from 'react';
import ReactNative from 'react-native';
//Create the component.
//Render it to the device.

 

As you can see, there are two different libraries which are imported.

These are two distinct libraries defined by react team which have two different jobs to do when building an app.

React library
  • Knows how a component should behave
  • Knows how to make bunch of components work together
React Native library
  • Knows how to take an output from a component and make it appear on the UI
  • Provides default core elements
Import statement

This import statement is the only way of accessing a library or any other file in react native. You don’t have access to any other JavaScript file in the project unless you import it.

Step 2 – Create the component

There are two types of components.

  1. Functional based components
  2. Class based components

In this section, I am going to explain you only functional based components. You’ll learn class based components in a later section.

To create a functional based component we write a javaScript function. I am giving the component a name ‘App’.

//Import a library to help to create a component.
import React from 'react';
import ReactNative from 'react-native';
//Create the component.
const App = () => {

}
//Render it to the device.

So, here is a component. I am going to add few more lines to make it work.

//Import a library to help to create a component.
import React from 'react';
import ReactNative from 'react-native';
//Create the component.
const App = () => {
return(
/*
This code tells react native to render some text to the screen of the device.
*/
<Text>Hello World!</Text> // This is not HTML. This JSX.
);
}
//Render it to the device.

Here, as you can see, there is code line that looks like HTML. But that’s not HTML. It’s JSX. JSX is an extension of javaScript that used to write react components. But these are little bit close to HTML. It has opening and closing tags and name of the tag is between set of brackets. Therefore, it won’t be difficult for beginners to learn it.

Step 3 – Render it to the device

We have to know, we are coding in App.js file. But it’s not the file which runs in the mobile. So, we have to export it to index.js. Then we have to import App.js in index.js file. Otherwise this whole code is useless.

//Import a library to help to create a component.
import React from 'react';
import ReactNative from 'react-native';
//Create the component.
const App = () => {
return(
/*This code tells react native to render some text to the screen of the device.
*/
<Text>Hello World!</Text>
);
}
//Render it to the device.
export default App; // Exporting App component.

This is how you export the code. Let’s checkout how index.js file works.

import ReactNative from 'react-native';
import App from './App'; // Importing App component
import {name as appName} from './app.json';
ReactNative.AppRegistry.registerComponent(appName, () => App);

I know you understand this is not the code which coded in the index.js file. That’s right. I changed it to give you basic knowledge.

In any react native application, we have to register at least one component.

ReactNative.AppRegistry.registerComponent(appName, () => App);

Little explanation ? OK.

This code says, hey react native, you are going to render an application called appName. But our application name is not appName. It should be ‘AwesomeProject’.

But as you can see in the code, it has been imported as an object called ‘name’ and assigned it to a name called ‘appName’ from a file called app.json. As I have explained you app.json file before, it contains the name of the app.

Configuaration

This is app.json code. As you can see, it contains the real app name. So, we have rendered an application called ‘AwesomeProject’.  In registerComponent() function, second parameter says that we are rendering a function called app.

We have few more things to do.

Until now we imported react native library in a different way. If you run the app now you definitely get an error. Because, in react native they don’t provide us elements unless we import them. The <Text> tag you used is from react native library. But we haven’t imported it. We just typed ‘ReactNative’.

Therefore, to make it right, change the line into following code.

import { Text } from 'react-native';

Now, we have imported <Text> tag correctly. But we have used one more property that hasn’t been imported. In index.js, change the importing line of code of react native library into following code.

import { AppRegistry } from 'react-native';
Now change the last line of index.js to the following code.
AppRegistry.registerComponent(appName, () => App);
Normally, this line of code is in the code by default.  But I changed it before to give you the knowledge how these things happens step by step.
All done. I know this has been a session which is little bit hard to understand. But you have to understand line by line from the basics. I have given you the whole final code of our app below.
App.js
//Import a library to help to create a component.
import React from 'react';
import { Text } from 'react-native';
//Create the component.
const App = () => {
return(
/*This code tells react native to render some text to the screen of the device.
*/
<Text>Hello World!</Text>
);
}
//Render it to the device.
export default App;
index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Now run your app. You should get the following User Interface.
Displaying content
You will see the ‘Hello World’ content if you run your app. That’s it for this  Displaying content on mobile app using React Native session. We will continue in the next article.
Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *