Part 1: React Native(Android) project setup

Lara Mo
3 min readJul 11, 2021

--

React native setup

Welcome! You have made the right google search to get here. Step 1 is completed. Now let's actually get to work.

Versions:

While this article is directed to Windows users who develop an Android application using ReactNative, here are the versions of some tools I used while writing this article:

Part 1: Setup emulator (USB debugging)

As powerful as emulators are, I prefer to work with my own phone using USB debugging since it's faster to set up and my computer isn't on fire. (Sorry Android Studio ❤)

  1. On your android device go to Settings > About Device. Tap Build Version seven times. (This will activate developer mode)
  2. Now go to Settings > Developer options and enable USB Debugging

You are all set, you can now plug in your phone with a USB to your PC.

But it gets better, you can have your phone act as an emulator on your computer.

  1. On your PC search for the following app and follow the simple steps to connect your phone.

2. Click on Apps> Open Screen phone and allow permissions on your phone

The result should look like this:

Part 2: Creating the project

  • This tutorial assumes you have the proper SDK installed.
  1. Install ReactNative globally
npm install -g react-native-cli

2. Create the project with the following command

react-native init replaceWithProjectName

3. Reference your SDK

Open the project in your favorite editor and create a local.properties file under android
Its content should be the location of your SDK

  • Heads up: usually the SDK is is under /AppData/Android/SDK for Windows users. Make sure to use a double slash
SDK reference

4. Run the generated project

build the project using the following command:
npm react-native run-android

and run the metro server using the following command:
npm run start

5. Result

My actual phone running the app using USB debugging

Until the next article!

-LaraMo

--

--

Lara Mo
Lara Mo

Written by Lara Mo

Student @Concordia University | Front-end developer @Plusgrade Passionate about React, JS, CSS, HTML and coffee :) | Coding & coffee is my moto ☕👩‍💻

No responses yet