React Native: Complete Setup. Without an Android Studio & Xcode.

I just started learning React native by just following getting started, First I need to set up an environment for react native so I refer some blogs, and in all of them pointing towards one direction that I need an android studio and Xcode. So in short, when I setting up the Android environment for react native it requires me to install Android Studio then I was thinking Why I need to install Android Studio? I don’t want to code in java plus it requires a lot of memory space then I looking for an alternative whether I can setup react native without an android studio or not. same with IOS also. So I did that setup without an android studio.

I’m using a mac (OS: Catalina), so this article will explain how to set up react native android/IOS in a mac environment.

Prerequisite:

• Nodejs
• react-native-cli
• Homebrew
• Android phone (Creating Android Virtual Device is not discussed in this article)
• genymotion (if you don't have android phone on hand)

Follow this Steps

STEP 1: Install Java JDK 8 (specific version 8 only)

Install java via these commands

brew tap adoptopenjdk/openjdk
brew cask install adoptopenjdk8

Existing users of Homebrew may encounter Error: Cask adoptopenjdk8 exists in multiple taps due to prior workarounds with different instructions. This can be solved by fully specifying the location with brew cask install adoptopenjdk/openjdk/adoptopenjdk8.

verify your installation via this command.

After this setup java environment on your machine

Check if /usr/libexec/java_home exists. If it does then try running

export JAVA_HOME=`/usr/libexec/java_home`

and rerunning your Gradle build. If it works then make it permanent with

echo export "JAVA_HOME=\$(/usr/libexec/java_home)" >> ~/.bash_profile

STEP 2. Download and install Android SDK.

Before you install android SDK you need to add your Android SDK path to .bashrc or .zshrc, this path will be used during installation.

export ANDROID_HOME=/usr/local/share/android-sdk

Install android SDK by typing the code below in your terminal

brew cask install android-sdk

this operation will take some time (depending on your internet connection, please be patient) because it’s downloading the whole SDK.

STEP 3. Install the required SDK

React native require android 6.0 (Marshmallow) and above to work with

• Android 6.0 (Marshmallow) SDK (platform 23)
• Android build tool 23.0.1
• Google APIS

Install those required packages via terminal

sdkmanager "platforms;android-23" "build-tools;23.0.1" "add-ons;addon-google_apis-google-23"

STEP 4: Create react native app

Create a demo project

react-native init DemoApp
cd DemoApp

You can run a demo project on your android phone or alternatively in an android emulator using genymotion

Run on Andrid phone

Plugin android phone (don’t forget to enable USB debugging)

before that, you might need a watchman. so if you install via homebrew it will ask you to download Xcode for sure. without that, it won’t install. so as an alternative you can follow these steps.

• Download and extract the release for your system from the latest release
• It will be named something like watchman vYYYY.MM.DD.00-macos.zip

unzip watchman-*-macos.zip
$ sudo mkdir -p /usr/local/{bin,lib} /usr/local/var/run/watchman
$ sudo cp bin/* /usr/local/bin
$ sudo cp lib/* /usr/local/lib
$ sudo chmod 755 /usr/local/bin/watchman
$ sudo chmod 2777 /usr/local/var/run/watchman

you might need to verify this app from the mac system setting because it’s not verified from the identified developer. then do,

react-native start

P.S. You can also try react-native run android. The react-native run-android command might be optional if you do not want to deploy the android native code again (for instance, if you have not made any changes). You will have to launch the application manually and it will try to connect to the packager that starts with react-native start.

It will take a while, it downloads gradle and other java dependencies for the first time. If the installation successful you will see the app show up on your phone.

Run on genymotion

1. install genymotion if you haven’t

brew cask install genymotion

2. Set custom android SDK on genymotion Setting → ADB, set value to :

/usr/local/share/android-sdk

3. Add new virtual device then run it

4. run react-native android command on your terminal, react native app will appear on your genymotion emulator

react-native android

Run on IOS Device

To run on IOS device you can follow this steps.

npm install -g ios-deploy
# Run on a connected device, e.g. Max's iPhone:
react-native run-ios --device "Max's iPhone"

If you try to run run-ios, you will see that the script recommends to do npm install -g ios-deploy when it reach install step after building.

or

react-native run-ios --device

While the documentation on the various commands that react-native offers are a little sketchy, it is worth going to react-native/local-cli. There, you can see all the commands available and the code that they run — you can thus work out what switches are available for undocumented commands.

Since Homebrew 2.6.0 released in 2020.12.01, brew cask has been deprecated and later dropped.

Try running this command for later version:

brew install --cask

Ref: https://stackoverflow.com/questions/30413621/homebrew-cask-option-not-recognized/67656381#67656381

Thanks for reading, give some ❤️ if you like this article and please share it with the needy ones.

Let’s connect on Twitter, LinkedIn, and GitHub! For contribution: BUY ME A COFFEE

If you have further queries feel free to reach out!

In Plain English

Thank you for being a part of our community! Before you go:

• Be sure to clap and follow the writer! 👏
• You can find even more content at PlainEnglish.io 🚀
• Sign up for our free weekly newsletter. 🗞️
• Follow us on Twitter(X), LinkedIn, YouTube, and Discord.