DEV Community

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

Posted on • Updated on

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

#m1 #reactnative #android #install

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

Read next

shivamchhuneja profile image

React Native's CI/CD Unveiled: The Truth Behind Its Cycle Time Triumphs and Stumbles

Shivam Chhuneja -

niek_dewit_6d1cfcfeaff6a profile image

Creating Truly Custom UI Components for AWS Cognito – Amplify in React Native

Niek de Wit -

rahulrc1995 profile image

RNGP - Autolinking: Could not find project.android.packageName in react-native config output!

Rahul Chandra -

mahak_kaurchhabra_39a895 profile image

Mastering Jetpack Compose: From Beginner to Pro

Mahak Kaur -