How to build a React Native App in the old-school style
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:
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.
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:
You can debug your app by clicking on the top-right button.
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.
