![React Native for React Developers [Part 3: Setting up Dev Environment]](https://media.licdn.com/dms/image/v2/D4D12AQE_3veUM2D-pg/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1670932132357?e=2147483647&v=beta&t=Io6-haiEketJClcSxWBJuHa2biHsAWBYKg1rGOLEKE4)
React Native for React Developers [Part 3: Setting up Dev Environment]
Nikola Gorgiev
Software Developer | Flutter Enthusiast | React | React Native | Electron | JavaScript | TypeScript
Setting up the Development Environment
Before starting with React Native, you need to set up the environment on your machine properly. To do this the right way it is very important to read the official environment setup guide carefully (you can find it here), and don't skip anything, because if you did something wrong, you may need to reinstall everything you have installed, revert everything you have done, and start from scratch.
When you open the official environment setup guide, you will have a guide for Expo and guide for React Native CLI, and make sure you have selected the right one. For Expo it's pretty straight forward, and I wont cover it here, so I will try to help you do the React Native CLI setup the right way, and point you out to the issues that can occur on Apple Silicone Macs, because in my experience I didn't have any difficulties on Windows, Linux or Macs with Intel CPU.
So before you start, I strongly recommend installing this tools:
Before we start, let's explain what each tool is, and why we need it.
*If you are working on a Mac with Apple Silicone, I would suggest turning Rosetta Mode on for both Terminal and xCode. To do that, in the Finder App, go to the Applications folder, then in the Utilities folder you will find the Terminal app. Right click on it, and select Get Info then check the Open using Rosetta, and do the same for xCode, which you can find in the Applications folder.
After you start following the official guide, the first thing is to install node and watcman, and it is recommended to use homebrew to install them, so in? the terminal app, execute the following commands (make sure you have installed homebrew, and restarting the terminal after installing it):
brew install node
brew install watchman
iOS Setup
Next it says to install the right Ruby version, and there is a link in the? Guide to see which Ruby version is required for the selected React Native version (on the top of the Guide after the React Native logo you will see a dropdown with React Native version, and the Guide you see, applies for that version of React Native), and install the required version by executing
rvm install 2.7.6
rvm use 2.7.6
Next follow the Guide and open xCode, and in the preferences select the Command Line tools (in your case the version of the Command Line tools will be different, because it depend of the xCode Version):
After that you can try to create a new React Native project with NPX, so execute the following command in the terminal (AwesomeProject is the name of your project, so you can pick a different one):
npx react-native init AwesomeProject
If some errors appear after Downloading the Template, and installing the cocoa pods, you may need to go in the ios folder of your project and installing the pods with the following command:
pod install
If you still see errors, you may need to switch to a different Ruby version, I recommend 3.1.2, so while in the ios folder in the terminal, execute:
rvm install 3.1.2
rvm use 3.1.2
And try pod install again, and your pods should install after that, and you can run the app, so just go back from the ios folder in the root of the project, and execute:
npx react-native run-ios
And after a few minutes the metro bundler should start in a new terminal window, after that the simulator will start, with your newly created app running inside the ios Simulator.
If you get error that says that you don't have a simulator with some name installed, or you want to run the app in a different ios Simulator, you can start the simulator by opening xCode, right clicking on it on the Dock, than from Open Developer Tool select Simulator, and on the top of the Simulator app you can see the simulator name, which you can specify like this:
npx react-native run-ios --simulator='iPhone SE (2nd generation)'
Android Setup
For Android, you first need to install Java Development kit, and once again we will use homebrew to install that, so execute the following commands in the terminal:
brew tap homebrew/cask-versions
brew install --cask zulu11
Next we need to install the Android SDK, and we will do that from the Android Studio, so open the Android Studio app, and click on the three dots next to the Open button, and select SDK Manager, and select the Android SDK version specified in the Guide, for me its the latest one and Android SDK 12.0.
*you may also want to install Android SDK Command-line tools, from the SDK tools tab in the SDK Manager.
领英推荐
Next you will need to add some system environment variable paths, so we can run the project from the command line. I will use VSCode, and we will need to edit .zshrc file with admin permissions, so from the terminal, execute the following command from the home folder:
sudo code .zshrc
If you get an error saying that code cannot be found, open VsCode, press cmd+shift+P and type something like shell command, until you see the Shell Command: Install ‘code’ command in PATH and press enter. After that, restart the Terminal, and you should be able to run code inside the terminal.
After that add those paths in the file:
Than, save the file, and execute the following command in the terminal:
source .zshrc
After that just restart, or quit the terminal, and we are done, and we can try running our application, so execute the following command:
npx react-native run-android
If we have done the setup right, the Android emulator should run after a few minutes, and our app should start in it.
It may show an error saying that the metro bundler is not running, so simply open the terminal app, go inside the root of your project, and run
npm start
Or yarn start if you are preferring yarn.
After that just reload the app in the emulator (there will be a Reload button below the error in the emulator), or? simply quit and start the app again. You may still get an error, saying to execute some adb command, so go in the terminal and run:
adb reverse:8081 tcp:8081
After that, reload the app again, and it should work.
If for some reason the app wont build and start from the command line, it means that you have messed up something with the environment setup, and you can try opening the android folder of your app inside Android Studio, wait for gradle to sync (download all the dependencies) and click the green arrow to start the project.
There is a Troubleshooting page, which can help you solve some further issue, you can check it here.
Folder Structure of a React Native project
If you check the newly created React Native project, you will notice multiple files and folders, and in the following text, I will try to explain those files and folders.
"engines":
???"node": "v16.10.0",
???"yarn": "1.22.19",
???"ruby": "3.1.2"
?},{
If you are not sure how to structure your new project, here and here you can find some best practices that cover that topic more deeply.
React Native for React Developers [Part 3: Setting up Dev Environment]