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.

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.

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.

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';

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

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);