Skip to main content

Writing a Hello World Android/iOS Native Application in React Native

Assuming that you have installed the React Native as per instruction given in the post - Installing React Native in Ubuntu Linux / Mac OS

Step 1: Open the Terminal

Press CTRL+T to open the terminal in Linux or Find Terminal by searching it in Mac

Step 2: Create a new react native project

$react-native init AwesomeProject

This will create a new AwesomeProject Folder and copy all necessary files and folders. This will install all the dependencies for your project.

Step 3: Type Hello World String

Go inside the AwesomeProject folder you will see index.android.js and index.ios.js. If you are developing for Android edit index.android.js or if you are developing for IOS edit index.ios.js. Now open any of them type hello world by replacing the default text in the following way.

      <Text>Hello world!</Text>

You whole index file should look like this

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);

Step 4: Run the Awesome Project

Assuming your already inside the AwesomeProject if not go inside the AwesomeProject
$cd AwesomeProject

$react-native run-android  #for android

$react-native run-ios #for iOS

It should start compiling and bundled in a package. If your android emulator is already running, the new application should start automatically inside your emulator and print the Hello World Text.