by Panth Solanki

How to build a React Native App in the old-school style

Photo by Yann Le Comte on Unsplash

As we all know, it’s high time to learn React Native. There are two ways to develop it as a doc. This section focuses on creating apps in Expo, directly on your Android device without any internet connection on your device.

I know it’s very easy by using Expo Client app on your device with the internet, but what if you have an internet issue? You don’t want to use your limited MBs for development. So what if your mobile’s WiFi connectivity has a stability issue, or you just want to develop app old-school style…or any other reason?

Let’s get started, this process includes just three small steps. Remember, it’s just for development on OS Windows and targets OS Android.

Pre-Setup Requirements

You need to install an adb driver on your PC from here. The procedure is also here.

Once you complete the process, connect your mobile to your PC. Open Command Prompt and run the command adb devices. If it returns some device name under list of devices, then your setup is completed. But if no name is shown, then you need to install adb drivers properly.

Note: Your mobile should have USB debugging ON in the developer options.

Install the Expo Client App from the play store here.

Setup React Native Project

Follow the steps as described in the docs here.

I’m just copying the steps here. Assuming that you have Node 10+ installed, run the following commands:

npm install -g expo-cli

expo init AwesomeProject

cd AwesomeProject

npm start

The above commands will open browser with http://localhost:19002 (if it doesn’t open automatically, open it manually).

Once you open the localhost, it will show a message like Tunnel Ready as below:

Tunnel Ready means it’s time to create magic :)

Post-Setup Steps

Now it’s time to connect your device and open another command prompt to run the following commands:

adb devices // to find the device name of your connected devices

adb -s <device name> reverse tcp:8081 tcp:8081 // this will not print anything

Go to http://localhost:19002 in the browser and click Run on Android device/emulator.

Click on Run on Android device/emulator to see magic on your device

Now you will see the bundles loading on your device. After loading all bundles, your app will be live on your device and your browser will be as follows:

The sidebar will show your device

You can debug your app by clicking on the top-right button.

Click on the top-right button and you can see what data is passed to your device.

I will be happy if this information is useful to you in any way. If you have any questions, do comment — I will be more than happy to help.

Thanks for reading.