React-Native Setup on Mac.
Before we start on to react-native we need to make some initial setup in order to make it work smoothly on our work stations. This document can be used by anyone who has little or no knowledge about mobile app development.
Note: There are two necessary things we need to install if we want to develop the app on Android as well as on iOS — Both these platforms have different IDE’s and also different build systems.
- iOS Installation
We have to install Xcode as an IDE for iOS build of react-native and the easiest way to install it is, go to the app store and download it. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.
2. Android Installation
We have to download and install the Android Studio which is the official IDE for android app development. Android Studio will download all the necessary stuff required to develop an android app. For the simulator, you will have to install system image files from the Android SDK Manager and create an AVD (called android virtual device) for you to test on a dummy device.
For Android development, you also need to install the JDK on your machine.
Note: React Native requires version 8 of the Java SE Development Kit (JDK). You may download and install OpenJDK from AdoptOpenJDK or your system packager. You may also download and install Oracle JDK 8 if desired.
This document will explain how to set up react-native on your mac machine without the help of the expo app. We need to install some packages(like brew, yarn, node, watchman, JDK, etc.) before we actually start on. All these will be installed using the mac terminal.
- Install Homebrew -
The below command will let you install “Homebrew” on your machine.
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Homebrew is a software package manager for Mac OS which can be used to install required packages, libraries, etc to set up your local development requirements.
- Install Yarn -
The below command will let you install “yarn” on your machine.
brew install yarn
Yarn — a fast, reliable, and secure alternative npm client.
2. Install Node -
The below command will let you install “node” on your machine.
brew install node
React Native uses Node. js, a JavaScript runtime, to build your JavaScript code.
- Install JDK -
The below command will let you install “node” on your machine.
brew tap AdoptOpenJDK/OpenJDK
brew cask install adoptopenjdk8
The tap command allows Homebrew to tap into another repository of formulae. Once you’ve done this you’ve expanded your options of installable software. These additional Git repos (inside /usr/local/Homebrew/Library/Taps ) describe sets of package formulae that are available for installation.
brew cask is an extension to brew that allows the management of graphical GUI applications.
- — — — — -
After installation of the above packages, we need one more package which would be helpful for react-native command-line interface i.e.
npm install -g react-native-cli
That’s it now we have configured all the required packages. Now we will create our first react-native project with help of below commands:
react-native init FirstProject
Go to the specific directory where you want to create your first react native project. In the above command, FirstProjet is the name of the react-native project. Go into your project directory using the below command.
cd FirstProject
You could see the above folder structure in the FirstProject directory.
And now you can try running your first project either on Android or iOS using the below commands.
react-native run-android
react-native run-ios.
Make sure we have a local.properties file created in the android directory of the react project that you just created. The properties file contains the android SDK path. If it does not exist create one for now with the following text in the file and save it.
sdk.dir=/Users/<SDK PATH>/Android/sdk
You could see the above file called local.properties in the android directory.
You can see the below screen on an android device if the project runs successfully.
