Brief Overview

React Native is an open-source UI software framework created by Meta Platforms, Inc. We use it to create software applications that can run on Android and IOS. How does it run on you ask? That is something we will cover in the future.

For now, we start off with a classic "Hello Word" program.

Firstly, open up your terminal in your desired folder and run the npm command

npx react-native init projectName

Now navigate into your newly generated file and open it up on VS Code or you can directly run a 'cd' command into your 'projectName' folder.

cd projectName

Now that you are in your project, you might be overwhelmed by seeing all the different files already generated without you even doing anything!

Ignoring these files and moving up step by step, we will move our focus towards the 'App.tsx' file. This little file contains our whole app that will run on our phones.

Starting from the top, we have a few import functions, that don't do anything but just import all the necessary components that are used in the main app.

Right below that we have a prop which we will dive into later. Then we have a function for Dark/Light mode. Below this function we have a function for our app, and this function is conveniently named 'App'.

After our App function we come across our styles which is somewhat similar to the CSS we usually do while making a web app, but there few properites which differ in a mobile application. One major difference is how we view a webpage from left to right but a mobile app from top to bottom.

And last but not least, we have the export line which allows us to export our App function and that's what completes our App.

Now obviously this is a major overview of what actually happens, but this information is sufficient enough to write our first piece of code.

Hello World

To start, clear out all the code we have in our 'App.tsx' file.

As we saw before, the app file started with imports. We will do the same.

Start by importing react and some features from react-native. We won't import a lot stuff, just the basic stuff needed to start.

import React from 'react'
import {
  View,
  Text,
  SafeAreaView
} from 'react-native'

• View - The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. (this sort of works like a 'div' just like in HTML)

• Text - Component to display text.

• SafeAreaView - The purpose of SafeAreaView is to render content within the safe area boundaries of a device.

Now we will move onto the function 'App'. This is where we will write our 'Hello world' program. Make a function called App.

function App() {
  return (
    <SafeAreaView>
      <Text>Hello World</Text>
    </SafeAreaView>
  );
}

This simple function here returns a JSX code, which is created by React itself. The JSX is converted into a JS object code which is interpreted into what we see on our screens.

Our app isn't over yet, not without mentioning the export function line. As we saw in our brief overview, the export function is necessary to export our function and run our app as we see. (again, this is an oversimplification of what actually happens).

export default App;

Voila! You have successfully built your FIRST APP. Now simply run the app using the below command.

npx react-native run-android