DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for πŸ”₯πŸ”₯πŸ”₯ Develop Android Apps using React-native: Setup on Mac M1 and troubleshooting
XinyuStudio
XinyuStudio

Posted on • Updated on

πŸ”₯πŸ”₯πŸ”₯ 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
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

Top comments (3)

Collapse
dkardell profile image
Dan Kardell

so this fixed the second command:

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

Collapse
dkardell profile image
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)

Collapse
dkardell profile image
Dan Kardell

So second command fails:

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

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.