Hello World in React Native

It's a default programming practice to start our journey of learning of new language by printing a "Hello World!".

We will do no exceptions! Let us start our application with a "Hello World!".

The two files we discovered in the previous blog that is super important to start building our application are index.js and App.js.

Our initial index.js file looks like this

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

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

The AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.

So we mostly need to change the contents inside the App.js file. Let us inject the below piece of code into our App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

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

function App(): JSX.Element {
  return (
    <SafeAreaView>
      <View>
        <Text>Hello reat native!</Text>
      </View>
    </SafeAreaView>
  );
}

export default App;

To run our application, we're going to use our Android device. Make sure to turn the developer mode enabled and USB Debugging turned on. Open the integrated vscode terminal and write,

npm start

It will build our application and automatically install the app into our Android device and run it. The result is shown below. The device I'm using is Realme 5 pro.

So that's a wrap. We saw how to write and run our first react-native application and run directly into our phone.