DEV Community

loading...
Cover image for 🔥🔥🔥 Develop Android Apps using React-native: Setup on Mac M1 and troubleshooting

🔥🔥🔥 Develop Android Apps using React-native: Setup on Mac M1 and troubleshooting

XinyuStudio
Updated on ・2 min read

Install Java and platform tools

Note that at the time of this writing, Java 16 is NOT supported by React Native! Java 8 is safe to install.

## Install Java and android platform tools
brew tap adoptopenjdk/openjdk
brew install --cask adoptopenjdk8
brew install android-platform-tools
Enter fullscreen mode Exit fullscreen mode

Install Android SDK

brew tap homebrew/cask
brew install --cask android-sdk
Enter fullscreen mode Exit fullscreen mode

Install Android Studio

Go to Google's Android Studio download page and install.

Set environment variables

This is super important, and many errors in react-native CLI failed, because of these incorrect settings. Run below code in the terminal:

echo export "ANDROID_HOME=${HOME}/Library/Android/sdk" >> ~/.bash_profile
echo export "ANDROID_SDK_ROOT=${HOME}/Library/Android/sdk" >> ~/.bash_profile
echo export "ANDROID_AVD_HOME=${HOME}/.Android/avd" >> ~/.bash_profile

# Optional, for zsh shell only
echo "[[ -s ~/.bashrc ]] && source ~/.bashrc" >> ~/.bash_profile
Enter fullscreen mode Exit fullscreen mode

To test if this is successful, try below:

source ~/.bash_profile
echo $ANDROID_HOME
Enter fullscreen mode Exit fullscreen mode

Install node.js/npm, yarn and Watchman

brew install node
brew install yarn
brew install watchman
Enter fullscreen mode Exit fullscreen mode

Double check if every setting is good

npx react-native doctor
Enter fullscreen mode Exit fullscreen mode

You will see some errors like below:
image

You might wish to fix some of the errors, e.g. JDK with below commands:

brew install --cask adoptopenjdk11
Enter fullscreen mode Exit fullscreen mode

Now the error will be fixed:
image

Note: You may ignore the Android SDK errors!

Run command to create a new project

npx react-native init demo
Enter fullscreen mode Exit fullscreen mode

Install M1 Android Emulator

https://github.com/google/android-emulator-m1-preview or
https://github.com/741g/android-emulator-m1-preview/releases/tag/0.2

Download the DMG file and install the emulator as a Mac OSX app. Start the emulator before you run:

npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

Hooray! Now you should be able to run react native android app in Apple M1 desktops/laptops!

image

Discussion (0)