fbpx

React Native is an open-source mobile application framework developed by Facebook. It allows you to develop applications for iOS, Android, and the Web using JavaScript ( specifically React ).

Let’s get started with the famous “Hello World”. For simplicity’s sake, we will be using a web tool https://snack.expo.io/ to develop our first React-Native application. We will dive into installing tools for local development later.

Head over to https://expo.io/signupĀ , and create an account

Once you’ve created an account, you can go to https://snack.expo.io/ and click on the human icon to the top-right corner of the screen then click Log in. Fill out your username and password to login.

Follow the steps to create the “Hello World” app:

  1. After signing in, you’d be presented with a default project. Replace the code in App.js with the following:
import React, { Component } from 'react'
import { Text, View } from 'react-native'

function HelloWorldApp() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;

We start by first importing React then Text and View from react-native. We then create a function HelloWorldApp, that returns a View with the text Hello, world!. To ensure the text is centered on the screen, we apply a style prop.

2. The code runs automatically and the result is displayed to the right. You can click on the iOS or Android buttons to see how the code will look like on those platforms.

To test on your device, click on the My Device tab and scan the QR code with your camera ( iOS ) or the Expo client app ( Android ). You can download the Expo client app from the app store ( iOS ) or Google Play store ( Android )

In a few lines, we’ve created our Hello World app. React Native is easy to use and makes creating apps for iOS and Android a breeze.