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

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

Install Android SDK

brew tap homebrew/cask
brew install --cask android-sdk

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

To test if this is successful, try below:

source ~/.bash_profile
echo $ANDROID_HOME

Install node.js/npm, yarn and Watchman

brew install node
brew install yarn
brew install watchman

Double check if every setting is good

npx react-native doctor

You will see some errors like below:

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

brew install --cask adoptopenjdk11

Now the error will be fixed:

Note: You may ignore the Android SDK errors!

Run command to create a new project

npx react-native init demo

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

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

Comments

[Dan Kardell]

so this fixed the second command:

1- brew untap adoptopenjdk/openjdk
2- brew cleanup
3- brew tap adoptopenjdk/openjdk

[Dan Kardell]

So next issue. Running doctor produces..

npx react-native doctor
⠦ Running diagnostics...error Reduce of empty array with no initial value.
TypeError: Reduce of empty array with no initial value
at Array.reduce (<anonymous>)
at Object.getDiagnostics (/Users/km2t7x72tn/Projects/DoneWithIt/node_modules/@react-native-community/cli-doctor/build/tools/healthchecks/xcodeEnv.js:86:8)

[Dan Kardell]

So second command fails:

brew install --cask adoptopenjdk8
Error: Cask adoptopenjdk8 exists in multiple taps:
homebrew/cask-versions/adoptopenjdk8
adoptopenjdk/openjdk/adoptopenjdk8