npx react-native run-android Failing in macOS

Below is the link for the complete set up for running react native, make sure you have verified "Step 3" from below link in the process of setup 

React Native set up in MacOS from scratch

Tried all the steps and still not able to run the first react native app in your Mac? 

Are you able to run the app from Android Studio run on your device/emulator but not from the command line in terminal?

Have you installed the SDK and set the path but still facing the SDK and path related errors?

If you are facing any of the below issues you are on the right page for the solution

Errors :

• error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
  Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
  
• Could not initialize class org.codehaus.groovy.runtime.InvokerHelper
  
• info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
  error Failed to run jetifier. Run CLI with --verbose flag for more details.
  
• error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.
  
• > SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at 'PATH_OF_YOUR_APP/android/local.properties'.
  

Solution:

Step1: 

Follow this step only if you have Android Path related issues which you can check with the doctor command provided within this step

If you are facing the issue on Visual Studio Code then import the project on your Android Studio 

Run the below command in your terminal 

npx @react-native-community/cli doctor

After running if you get ANDROID_HOME and Android SDK errors as below then continue else jump to Step2

user@Devs-Mac MyReactApp % npx @react-native-community/cli doctor
Common
 ✓ Node.js
 ✓ yarn
 ✓ Watchman - Used for watching changes in the filesystem when in development mode

Android
 ✓ JDK
 ✖ ANDROID_HOME
 ✖ Android SDK - Required for building and installing your app on Android
   - Versions found: N/A
   - Version supported: 28.0.3

iOS
 ✓ Xcode - Required for building and installing your app on iOS
 ✓ CocoaPods - Required for installing iOS dependencies
 ✓ ios-deploy - Required for installing your app on a physical device with the CLI




Android Path Setup 




Then open you Mac Terminal and follow the below steps:




(i) Paste the below command 

nano ~/.bash_profile 

(ii) Add below lines 

export ANDROID_HOME=/Users/qss/Library/Android/sdk

export PATH=$ANDROID_HOME/tools:$PATH

export PATH=$ANDROID_HOME/platform-tools:$PATH

export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/tools/bin

export PATH=$PATH:$ANDROID_HOME/emulator

(iii)  Click Y to save changes and update changes in terminal source ~/.bash_profile by typing the command from terminal for saving as per mac settings

(iv) Paste the command -  echo $PATH and validate the path 

To verify if everything is fine enter the command 

adb devices

Step 2:

Open gradle-wrapper.properties from Android Project and change your distribution url as below and sync

distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip

Step 3:

Enter the command below outside of your project in the folder that contains your created project 

npm install -g react-native-cli react-native

npx react-native-community/cli

  

Step 4:

Install required SDK tools from Android Studio -> Preferences -> Appearance & Behaviour -> System Settings -> Android SDK 

Please ensure you have installed 

Android SDK Command-Line Tools (latest) as shown in the below screenshot 

Step 5:

Enter the command below 

 ./gradlew clean   

If the build is successful you are set to go 

Step 6: 

From Android Studio File -> Invalidate Caches/Restart and  enter the below command 

npx react-native run-android

If you face jettifier issue then run the below command for temporary solution

 npx react-native run-android --no-jetifier

Resolve jettifier issue from the below link 

Resolve Jettifier Issue

Stay tuned to my posts  and do share your valuable thoughts if any queries or you would like to share anything on this topic in the comment section and please do like and share my post if this was helpful.

Hope this helped you!!