React Native: Getting Started with React Native CLI on Windows 10 with an Android Emulator.
When starting a new react native app, you have two primary options: Expo and React Native CLI.
This tutorial will walk you through how to start a new react native project using React Native CLI and run it on an Android emulator with Android Studio.
Install dependencies
You will need a package manager. A package manager helps you quickly update, install, or uninstall software. For windows, React Native documentation recommends Chocolatey. Using Chocolatey, you’ll need to install node and the Java SE Development Kit (JDK).
- Go to the link for Chocolatey and follow the installation steps.
- Once you have Chocolatey, run
choco install -y nodejs.install openjdk8in your terminal to install node and openjdk8.
Make sure you run all terminal commands in PowerShell as administrator to avoid possible issues.
Install and Configure Android Studio
To run the project, you will need an Android emulator. An Android emulator is a virtual device that emulates an Android phone for local development. Android Studio comes with the ability to manage and run Android emulators. Android Studio is also a code editor, but you can use any editor you prefer. I like Visual Studio Code.
Install Android SDK
Now that you have Android Studio installed, you need to make sure you have it Android 10 (Q) SDK installed and some other tools and packages.
- Go to Appearance & Behavior -> System Settings -> Android SDK
If you cannot find this, you can also click the go to help, use the find action function, and search for Android SDK.
- You should see a page that looks like the following. Make sure Android 10.0 (Q) is checked.
- Click Show Package Details and make sure Android SDK Platform 29 is checked.
- Under SDK Tools, make sure you also have all of the following checked:
Set up Android environment
Configure ANDROID_HOME environment variable
- Open the Control Panel.
- Click on User Accounts.
- Click User Accounts again.
- Click on Change my environment variables.
- Click on New to create a new
ANDROID_HOMEuser variable that points to the path to your Android SDK:
You can find the folder using Browse Directory. The default folder is %LOCALAPPDATA%\Android\Sdk\platform-tools Meaning it’s the same folder as when you type %LOCALAPPDATA% in your windows search.
If you can’t see the AppData folder, you may need to open the file manager, view it, and click the checkmark to show hidden items.
This should make it so you can see hidden files and find the AppData folder.
Add Android Platform Tools to PATH
- Edit the PATH environment variable.
2. Click New.
3. Click Browse and select platform tools.
Start a new React Native project
Install React Native CLI
In your terminal run:
npm install –g react-native-cli
Initialize new React Native project
In your terminal run:
react-native init MyExampleProject
You can replace MyExampleProject with whatever project name you want!
Install Android emulator
- Open Android Studio, select your react native project and go to the AVD Manager.
- Click Create Virtual Device.
- Choose a suitable device like the Nexus 5.
Make sure to pick Android 10.0 (Q) with API level 29. If you don’t see the Android 10.0 (Q) System Image pick a different device as not all devices are compatible with Android 10.0 (Q).
- You can run the emulator by clicking the green arrow on the main screen.
Start Metro
In your project folder, open up a terminal and run:
react-native start
Metro is a Javascript Bundler. Metro bundles all of your Javascript files into a single file to be run by your device.
Start android
In your project folder, open up another terminal and run
react-native run-android
You should see your android emulator open with a new project
Great! You should be ready to start working away on your next React Native project in whatever text editor you prefer. Here’s an example change on the app in Visual Studio Code:
Happy coding! If you run into any issues, please comment below, and I’ll do my best to help!
