Environment Setup: Your Magical Workshop 🧙‍♂️🔧

Before we start waving our coding wands and summoning mobile apps, we need to set up our wizard’s workshop (aka your development environment). 🏰 After all, even the greatest wizards can’t cast spells without their tools, right?

Let’s gather everything we need for our React Native adventure. 🦄✨

Step 1: Install Node.js 🟢

Node.js is like the Gandalf of JavaScript — wise, powerful, and slightly intimidating if you don’t know what it does. Don’t worry, though! This friendly wizard helps you run JavaScript on your machine. Without it, our magic (code) won’t work. 🧙‍♂️

1. Go to Node.js Official Site
2. Download the LTS (Long-Term Support) version — it’s the most stable spellbook. Trust us, you don’t want to mess with experimental spells. 😉

Windows

# Download and install fnm:
winget install Schniz.fnm

# Download and install Node.js:
fnm install 22

# Verify the Node.js version:
node -v # Should print "v22.14.0".

# Verify npm version:
npm -v # Should print "10.9.2".

Linux

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"

# Download and install Node.js:
nvm install 22

# Verify the Node.js version:
node -v # Should print "v22.14.0".
nvm current # Should print "v22.14.0".

# Verify npm version:
npm -v # Should print "10.9.2".

Mac

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"

# Download and install Node.js:
nvm install 22

# Verify the Node.js version:
node -v # Should print "v22.14.0".
nvm current # Should print "v22.14.0".

# Verify npm version:
npm -v # Should print "10.9.2".

Step 3: Install watchman 📝

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

Install it from here: Watchman

Windows

# Download and extract the windows release from the latest release
# It will be named something like watchman-vYYYY.MM.DD.00-windows.zip
# It contains a bin folder. Move that somewhere appropriate and update your PATH environment to reference that location.

# Installing via Chocolatey
PS C:\> choco install watchman

Linux

# Download the latest release:
# https://github.com/facebook/watchman/releases/
# It will be named something like watchman-vYYYY.MM.DD.00-linux.zip

# use the below command to install it
unzip watchman-*-linux.zip
cd watchman-vYYYY.MM.DD.00-linux
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

Mac

brew update
brew install watchman.

# If for some reason you can't wait for the Homebrew package to update, you can install the latest build from GitHub:
brew install --HEAD watchman

Step 2: Get a Code Editor 📝

Every wizard needs a spellbook to write down their magical incantations, and for us, that’s a code editor. We highly recommend VS Code because it’s like a cozy library where everything smells like books and possibility. 📚

• Download it here: Visual Studio Code
• Install any cool extensions you like (optional). We’re not picky wizards here.

Step 3: Install Android/iOS Simulators 📱

Now, let’s get some simulators. This is where your app will come to life before it flies off to real devices! 🦋

• For Android users, you’ll need to install Android Studio — think of it as your Android summoning circle. 🤖
• For iOS users (macOS only), you’ll use Xcode. Yes, it’s heavy, but this is where the iOS magic happens! 🍏

You can follow the link to - Install Simulators