How To Setup React Native For Android Using VSCode | Mac Apple Chip & Intel Chip

Frahaan Hussain — Fri, 24 May 2024 08:58:49 +0000

Hey Devs! 👋

Video Link: https://youtu.be/f9JXDmT6hvo

Are you excited to dive into the world of mobile app development with React Native? Whether you're using a Mac with an Apple chip or an Intel chip, this guide will walk you through the process of setting up your development environment using VSCode. Let's get your React Native project up and running on Android!

Table of Contents

Prerequisites
Installing Homebrew
Setting Up Node.js and Watchman
Installing Android Studio
Setting Up VSCode
Creating a New React Native Project
Running Your App on Android Emulator
Troubleshooting Common Issues
Conclusion

Prerequisites Before we begin, ensure you have the following installed on your Mac:

macOS Catalina or newer
At least 8GB of RAM
A stable internet connection

Installing Homebrew Homebrew is a package manager for macOS. Open your Terminal and paste the following command to install Homebrew:

bash
Copy code
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
After installation, run:

bash
Copy code
brew --version

Setting Up Node.js and Watchman Install Node.js and Watchman using Homebrew:

bash
Copy code
brew install node
brew install watchman
Verify the installations:

bash
Copy code
node -v
watchman -v

Installing Android Studio Download and install Android Studio. During the installation, ensure the boxes for "Android SDK," "Android SDK Platform," and "Android Virtual Device" are checked.

Once installed, open Android Studio and go to Preferences > Appearance & Behavior > System Settings > Android SDK. Install the latest SDK version and build tools.

Setting Up VSCode Download and install Visual Studio Code.

To enhance your development experience, install the following extensions:

React Native Tools by Microsoft
ESLint by Dirk Baeumer
Prettier - Code formatter by Prettier

Creating a New React Native Project Open your Terminal and run the following commands to create a new React Native project:

bash
Copy code
npx react-native init MyReactNativeApp
cd MyReactNativeApp

Running Your App on Android Emulator Start Android Studio and open the AVD Manager (Android Virtual Device). Create a new virtual device with the desired configuration and start it.

Back in your Terminal, run:

bash
Copy code
npx react-native run-android
Your new React Native app should now launch on the Android emulator.

Troubleshooting Common Issues Error: JAVA_HOME is not set Ensure that the Java Development Kit (JDK) is installed and JAVA_HOME is set correctly. You can install it using Homebrew:

bash
Copy code
brew install --cask adoptopenjdk/openjdk/adoptopenjdk8
Add the following to your .zshrc or .bash_profile:

bash
Copy code
export JAVA_HOME=$(/usr/libexec/java_home)
export PATH=$JAVA_HOME/bin:$PATH

Conclusion Congratulations! You've successfully set up your React Native development environment for Android on a Mac, whether you're using an Apple chip or an Intel chip. Now you're ready to start building amazing mobile apps with React Native!

If you found this tutorial helpful, don't forget to like, share, and follow for more. Happy coding! 🚀

DEV Community: Frahaan Hussain

How To Setup React Native For Android Using VSCode | Mac Apple Chip & Intel Chip