Skip to TL;DR below to learn how
Running Create React Native App for the first time on emulator can be somewhat tedious to those who just getting started and have no idea what is going on after running the start command, npm/yarn start.
The outcome on running the start command is comparatively different between Create React App and Create React Native App. In Create React App, it directs you to localhost in the browser. Wherein Create React Native App doesn’t. Instead it required from you a physical device or an emulator for live-loading your application (as shown in Image 1). This is simply due to the different ‘start’ scripts that used to run both application. Both scripts use to run can be viewed in your package.json.
Within the documentation of Create React Native App, the maintainers made clear on a way to run your React Native App using Expo Client app on a physical IOS or Android device. Such way of running your application is pretty smooth in term of experience, but can be troublesome and annoying for those who dislike having involvement of their physical mobile device during development due to distractions or having constantly moving one’s hands off the computer and turn to your device all the times.
In order to live-load your application without a physical device, an emulator will be the alternative. There may be plenty of emulator out there, but having one that is inexpensive, fast, well-built, well-maintained, and good in quality is difficult to find. Throughout my knowledge in developing native Android applications on Android Studio, I personally favor emulator from Android Studio. Reasons being that they fit extremely well with the described characteristics above and consist lots of built-in debugging features.
Below is the guide on how I use that emulator for developing my react native application.
TL;DR
Here i will step through the steps on how to run Create React Native App on emulator from Android Studio.
Start by download Android Studio. Once installed, go to AVD Manager to create the virtual device (emulator) with a system image (Android API level) of your preference you want your emulator to run with.
NOTE: This process can also be done using cli tools but due to simplicity, android studio will be easier to follow.
Then proceed to SDK Manager > SDK Tools tab to download Android Emulator, Android SDK Tools, and Android SDK Platform Tools.
For ease of use with these tools on future project, I personally recommend to export few environment variables in your .bash_profile or .bashrc (.zshrc if you are using zsh) for easy access to the provided cli commands. Otherwise you can just open AVD Manager and click the play button to launch your emulator.
Below are the steps to set the environment variable on MacOS:
(skip if you plan to launch using AVD Manager)
- Open terminal
- Edit .bash_profile, .bashrc, or .zshrc (depends on whether you are using bash or zsh)
- Append the following lines which will extend you cli with android emulator command tools:
# Extend PATH variable with ANDROID_SDK emulator tools
export PATH=”/Users/[username]/Library/Android/sdk/emulator:${PATH}”
Note: Do make sure to replace [username] with the path name used in your system, and make sure the file path is pointed to the file location correspond to your system. Ignore “:${PATH}” at the end of the line. You will be certain when the emulator folder contains the emulator unix executable (refer to the image above).
4. Reopen your terminal so that the added environment variable is successfully used.
How to launch your emulator with cli commands?
(skip if you plan to launch using AVD Manager)
- Run command “emulator -list-avds”. This will get a list of available emulators you created.
- Then run command “emulator -avd [your avd name]” to launch your emulator. Replace [your avd name] to the name listed in the “emulator -list-avds” from step 1.
How to Run your Create React Native App:
- Make sure you are in your project root and your emulator is running
- Run command “react-native run-android”
- If you are first-timer running managed-workflow, the emulator will prompt the message “Permit drawing over other apps”. Just continue by pressing ok.
- Proceed to allow app to display over other apps by toggle the button. This work both with Expo client app (we called this manage-workflow) or without.
- Hooray! Now you React Native App run on an android emulator.
Future development tip:
(skip if you plan to launch using AVD Manager)
- Start by launching your emulator with commands, “emulator -list-avds” and “emulator -avd [avd-name]”
- cd to the root of React Native project
- Run command “react-native run-android”
Conclusion
I am certain there are people who have tried and succeeded on running React Native App on Android Studio Emulator. But given the reason that I don't find much good article back in the days when i got started, to guide me through the process, I then attempted to write this article, to better help those who is unaware. Hopefully this little help benefits you on getting started on your react native development!
References:
