React Native Environment set up on Mac OS with Xcode and Android Studio
Install Homebrew
Homebrew is a package manager for macOS as a whole, not just for a particular programming language. When it needs to install software from third-party web sites, we can get the real advantage of Homebrew with few lines of code.
Install Homebrew using bellow command in Terminal.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Install Node.js and npm
React need only webpack to bundle, compile, transpile the code. Then why do we need Node.js? ๐ค
React Native comes with multiple built-in components and APIs to interact with both native IOS and Android platform. In some cases, we need to use native functionality that doesn't provide by React Native.
Most of the Native modules are distributed as npm packages. Therefore, we need to require npm and to initialize the npm we need to have Node.js as recommended.
โ ๏ธ Remember, Node.js is not compulsory since you can download the packages and add to your library.
Install Node.js using bellow command in Terminal and it automatically get npm installed on your computer.
brew install node
Install watchman
React Native uses watchman to detect real time code changes and it automatically build and push the update to your device without manually refreshing.
brew install watchman
Install Java JRE and JDK
If you donโt have a complete installation of Java, the build scripts for react-native tend to complain and fail . Downloading Android Studio is not enough solution since it comes bundled with its own JRE.
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8
Install React Native
React Native allows the application to be written in Javascript and then the React Native Compiler will convert your Javascript code into native code for iOS and Android environments.
React Native command line interface can be install using npm as bellow.
npm install -g react-native-cli
Set up Xcode
Download Xcode via Mac App Store
- Open Xcode, Xcode > Preferences
- Goto the Locations tab
- Selecting the most recent version from the Command Line Tools dropdown
- Install cocoapods to MAC OS
sudo gem install cocoapods
or
sudo gem update โ system
sudo gem install -n /usr/local/bin cocoapods
CocoaPods manages library dependencies for your Xcode projects.
Set up Android Studio
Download Android Studio from here
- Open Android Studio
- Goto the Configure > SDK Manager
- Go to Appearance & Behavior โ System Settings โ Android SDK and check โ the box of latest version from Hide Obsolete Packages.
- Also check โ the boxes of below in Show package details,
- Android SDK Platform 28
- Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
5. Click โApplyโ to download and install the Android SDK and related build tools.
6. Set up environment variables to getting start with native code, Open terminal
cd ~/
touch ~/.bash_profile;
open -e .bash_profile
and paste below lines there.
export ANDROID_HOME=$HOME/Library/Android/sdk
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
Then you can create new Android Virtual Device (AVD) to run the application.
- Open Android Studio
- Goto the Configure > AVD Manager
- Create Virtual Device > pick any Phone from the list and click โNextโ,
Click โNextโ then โFinishโ to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it , then proceed to the next step.
Create First App
The very first step is to initialize the app from the place where we need to create app
cd Documents
react-native init first-app
If you want to start a new project with a specific React Native version,
react-native init first-app --version X.XX.X
If you want use typescript with React Native ,
react-native init first-app --template typescript
Running your React Native Application in IOS
cd first-app
react-native run-ios
Running your React Native Application in AVD
react-native run-android
The first time when you run this code you might get a build failed errors as,
๐ Asking to add local.properties file
cd android
Create local.properties file inside android folder and add below code there.
sdk.dir = /Users/pabasara/Library/Android/sdk
๐ Asking to add keystroke
Go to directory
cd android/app
paste below code in terminal
keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
Press enter until it gets ,
Is CN=y, OU=n, O=yes, L=no, ST=x, C=Y correct?
and type Y as response to terminate the command.
Here we goโฆ. ๐ If everything working properly you can see app is running on both IOS emulator and AVD without errors. ๐ ๐ ๐
Thanks for reading this article, if you found it helpful please leave a few clapsโฆ ๐ ๐ ๐