You are here
Home > Featured > Installing React Native and dependencies (Updated 2023)

Installing React Native and dependencies (Updated 2023)

Getting a brand new machine ready for React Native is much more than just executing the shell commands on the official website. This article covers the installation of all the dependencies and settings to make your machine ready for React Native. While this article is for MAC, most of the steps hold true for Windows as well.

By the end of this tutorial, you will have your App running on both the Android and iOS simulators.

Prefer video over reading? Checkout

We’re setting up a native app environment (not the EXPO one).

If you just want the EXPO setup, follow steps 1, 2, 3, 5, 6 and run the npm commands to install expo-cli and expo-init as given on the official site. Refer to this troubleshooting page if you run into errors. Feel free to share more errors and solutions.

1. Homebrew

Check if Homebrew is already installed?

homebrew -version 

If you see a command not found error execute the following:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Node

Check if Node is already installed

node --version

If you see a command not found error then you’ve 2 options to install Node:

Option1: Install the latest Node directly

Following command installs both Yarn package manager and Node.

brew install yarn

Option2: Install Node using NVM (recommended)

NVM allows you to install and easily switch between different versions of Node. This ensures that you can continue on legacy and newer projects with other Node versions. We’ll follow this approach (You can still follow option-1 and skip this one). Install the following command.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
nvm install stable

If you see nvm not found error, then run the following command (it is also displayed after nvm installation ends).

export NVM_DIR="$HOME/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Tip: You might again see NVM not found error on the new terminal. To fix it for once and all, add the following to your ~/.zshrc file

 source ~/.nvm/nvm.sh 
 npm install -g yarn

3. AzulJDK (for M* Chip, otherwise OpenJDK8)

Azul JAVA JDK is now officially recommended by ReactNative to compile projects. It works natively on the Apple M1 chip and is much faster. However, you can also go with OpenJDK8. Let’s use the tab and cask commands of brew to install it.

brew tap homebrew/cask-versions
brew install --cask zulu11
brew info --cask zulu11

However, if you are not using Mac M1 chips, you can go with openjdk

brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk8

Cool! We’re now getting into React-Native-related stuff…

4. Watchman

Watchman is used by Facebook to sync applications with file changes. Install it using the following command

 brew install watchman

5. XCode (for iOS)

For making our application iOS simulator ready, we need to install XCode. If you don’t intend to use iOS (skip this).

It needs to be installed from App Store. You can search for it or https://apps.apple.com/us/app/xcode/id497799835?mt=12 will take you there. Press the GET button to download and install it. It’s a whopping 11GB+ so might take very long in case of a slow internet connection.

Cocoapods

We’d also need cocoapods. Install that using the following command:

sudo gem install cocoapods

6. Android Studio (for Android)

We need Android Studio for running our application on a real Android device or emulator. It has a little more steps than straightforward XCode.

6.1 Download & install studio from https://developer.android.com/studio/index.html

6.2 Run Android Studio and install emulator through AVD Manager

6.3 Add paths to your ~/.zshrc (or ~/.bashrc)

 export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
 export ANDROID_HOME=/Users/<your userid>/Library/Android/sdk
 export PATH=$ANDROID_HOME/platform-tools:$PATH
 export PATH=$ANDROID_HOME/tools:$PATH
 export PATH=$ANDROID_HOME/tools/bin:$PATH 

We’re finally ready to create and launch our first application

7. Create and launch an Application

This is where the React-Native official documentation starts from 😁😜. In your terminal, run the following commands to create an application.

npx react-native init AwesomeProject 

If you want to use TypeScript add this suffix: –template react-native-template-typescript

This is not needed as TypeScript is now default since RN 0.7.

cd AwesomeProject

You can now run the application in iOS or Android using the following commands respectively

npx react-native run-ios
npx react-native run-android

CONGRATULATIONS!!!! YOU DID IT!!!

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Top
0
Would love your thoughts, please comment.x
()
x