React Native “Hello World”

This posts assumes you’ve installed the Android studio. I won’t go through the steps for installing as, to be honest, I’ve had an installation too long to recall any steps.

Getting started

To begin with we need to use npm or yarn to add the react native scaffolding application.

yarn add global create-react-native-app

Assuming everything’s installed we can now run

yarn create-react-native-app helloworld

Replace helloworld with your application name.

You’ll then be prompted for the template to use, managed workflow, blank, blank (TypeScript), tabs or bare workflow, minimal or minimal (TypeScript).

Let’s choose minimal (TypeScript).

Next you’ll enter the name and displayName or your application, finally you’ll be prompted to install dependencies, select Yes.

From our application folder we can run

yarn android
yarn ios

In this case I’m working on Android, so before we go any further you need to run up one of the installed Android emulators before running the next step.

Now run 

yarn start

which will run react-native start followed by

yarn android

in another terminal run. This will run react-native run-android.

If all goes well then the emulator should display some text (depending on the template you used).

Using the emulator

In emulator type r r in quick succession in the emulator to reload your application. Or you can enable automatic/hot loading by pressing CTRL+M in the emulator and selecting Enable Live Reload.

Problems

Whilst setting up Android studio on Linux or Windows you need to make sure ANDROID_HOME, ANDROID_PLATFORM_TOOLS and ANDROID_SDK_ROOT environment variables are set up. For example on Windows these are

  • ANDROID_HOME – C:\Users\<Username>\AppData\Local\Android\Sdk
  • ANDROID_SDK_ROOT – C:\Users\<Username>\AppData\Local\Android\Sdk
  • ANDROID_PLATFORM_TOOLS – C:\Users\<Username>\AppData\Local\Android\Sdk\platform-tools

Hello World

At this point, hopefully we’ve got everything running so let’s open App.tsx and replace

<Text>Open up App.tsx to start working on your app!</Text>

with

<Text>Hello World</Text>

Double clicking r in the emulator will reload the application displaying Hello World. So we’re on our way to the first React Native application.