Solution
The following contains a guide of 17 steps on how to install React Native on your Mac OS for iOS development. Before starting the installation process, it is important to read the guide carefully and avoid rushing through it. Taking the time to fully understand the steps will save you time and effort, and prevent frustration with React Native installation and running process.
Start:
To begin, it's important to define your goal. In this case, my goal is to install React Native on my environment without breaking any existing projects, specifically an outdated enterprise React project that I have. This means that I want a fresh installation of the React Native CLI (not Expo) on your Mac OS, specifically for iOS development.
This is exactly what I select in tabs here. (https://reactnative.dev/docs/environment-setup)
To sum up:
I want my outdated enterprise react project to continue working. So I do not break anything work related.
I want a fresh React Native CLI installation(not Expo) on Mac Os for iOS. (this is what you select in Tabs at this https://reactnative.dev/docs/environment-setup )
I want the latest version of react native. The current latest version is 0.71
Current system setup.
It's important to understand your current system setup. In my case, I have:
Node Version Manager (NVM) is being used to switch between node versions. This is a proper way of installing Node, since you may need different versions for different projects. Indeed, React Native docs cover the setup of a global node version, which is not what we want!
The computer being used is a Mac Air, not an M1. This is important to note due to M1 Macs having different system requirements for some software and may require additional steps for installation.
iTerm is the terminal being used on the zsh command line.
Setup
First read it all, and start only after reading.
Do not follow the guide on the react native setup, especially as for ruby installation and node installation. Read the following text first carefully.
If you do a part of that and then a part from somewhere else, your project may not run and will prolong your struggle.
Step 1. Install Brew if you have not installed it. https://brew.sh/
Step 2. Install watchman if you have not installed it:
brew install watchman
Step 3. Do not install node globally, as this guide assumes you are using NVM to switch between Node versions.
Step 4. Switch Node to the proper version. I used version 18.13.0 to make it work. Make the node to be the default one and select it. For that open your terminal and run:
nvm alias default 18.13.0
nvm use default
if you do not have the node of this version installed, install it first. To install NVM, follow the NVM installation guides.
nvm install 18.13.0
nvm alias default 18.13.0
nvm use default
Every time you want to use another node you may change the default as you want.
Step 5. Install proper version of Ruby.
React documentation for version 0.71 says:
"Currently, macOS 13.2 is shipped with Ruby 2.6.10, which is not what
is required by this version of React Native (2.7.6)."
That is what I had. The Ruby version for me was - 2.6.10. I need 2.7.6.
There is a tool, which is similar to NVM but for Ruby. React gives the list of libraries to manage Ruby versions. I selected rbenv (https://github.com/rbenv/rbenv).
Follow the installation of rbenv on your system. Do not rush. Read everything.
After installation it contains the command to be run in the terminal as for ZSH. So make sure you did everything correctly, and run the command for the terminal you use. (Remember, iTerm is a terminal client)
After you installed rbenv check what versions of ruby you have on your system. Run in your terminal:
rbenv versions
We need ruby 2.7.6, so if you do not have it - install it
rbenv install 2.7.6
After the installation you need to switch to version 2.7.6. Exactly like with the node.
rbenv global 2.7.6
Step 6. Now go to this chapter called "Xcode" in react native setup guide and do everything as they say here https://reactnative.dev/docs/environment-setup#xcode.
Do what is in "Xcode" chapter and proceed until “Creating a new application” chapter and stop there.
Step 7. Open the terminal and navigate to the folder where your new react native project will be located.
From here, react says we do not have to have global CLI installations, so we need to remove them to avoid conflicts when running scripts. I did that.
npm uninstall -g react-native-cli @react-native-community/cli
To check if you have any of those installed globally use:
npm list -g react-native-cli
npm list -g @react-native-community/cli
Step 8. Create a new fresh install.
Before running, check that you have all the proper versions installed and selected.
node -v (you should see v18.13.0)
rbenv versions (you should see the list with "* 2.7.6")
After that run:
npx react-native@latest init AwesomeProject
That must go with our errors. It will create a new folder named AwesomeProject. Go into it:
cd AwesomeProject
Running the project.
The project is installed, now we will run it.
Step 9. Kill all processes that may be related to the metro server.
The first command will scan what takes the port 8081. If nothing is returned in the console you are good to proceed. If you see the list of processes - kill them with:
sudo lsof -i :8081
kill -9 <PID>
Step 10. Now, if you have several projects, like I do, Xcode may start looking for another Pod file. To make sure, Xcode while building the app uses the correct Pod file. For that do the following:
Create a new file "react-native.config.js" in root of your project folder "AwesomeProject/" and put into it:
module.exports = {
project: {
ios: {
sourceDir: './ios',
},
},
};
Make sure you saved the file and when you copied the quotes are not changed to be invalid quotes for the file. So the file is still in a proper format.
What we did, is that now react native will track the Podfile that we have in the project "/ios" folder.
React Native uses CocoaPods, or simply Pod, as a dependency manager for iOS projects. CocoaPods is a popular dependency manager for Swift and Objective-C Cocoa projects and allows for easy integration of third-party libraries.
In the context of React Native, CocoaPods is used to manage dependencies for React Native projects that are built for iOS. When you create a new React Native project for iOS, it generates an Xcode project that includes a Podfile. The Podfile lists all the dependencies that the React Native project requires to function properly, such as the React Native framework itself.
Step 11. Now, we must say that we are using Node of a specific version.
For the react 0.71 it is not enough to change the default version! (insane)
So, If you are using nvm you need to specify the path to the node version.
To do that open a file "ios/.xcode.env" in the code editor.
You will see several lines of comments and the line to the end:
export NODE_BINARY=$(command -v node)
Instead of "$(command -v node)" place the path to your selected node version there.
Get the full path to your node installed with nvm. Run in terminal:
which node
Copy the path, and instead of what is assigned to NODE_BINARY put your path.
You must have something similar to this:
export NODE_BINARY=/Users/your_user_name/.nvm/versions/node/v18.13.0/bin/node
Make sure you saved the file.
Step 12. Now we need to Sign the project with the certificate.
Go to "/ios" folder and open the ".xcworkspace" file. It is name “AwesomeProject.xcworkspace” and wait till Xcode opens.
When it opens, in the left side bar select the project - AwesomeProject, then you will see two Targets to the left of the central panel of the screen.
Select your project AwesomeProject by clicking it.
In the centre of the screen select the “Signing & Capabilities” tab.
Select the proper team from the dropdown. That is the vital step. If something is not good, then you will get the error in xcode and while building phase.
This is where I had a problem. I have 2 teams. One is my work related team, and the other one is called My Personal team. I do not remember when I created “My Personal team”, but I selected it,as it was not related to my work. Project build failed. When I switched to my working team, it started to build without errors. So make sure you know that what you select is legit and it does work.
Make sure you set your new Bundle Id where you see the appropriate field for it. E.g. "com.mylastnam.myappid"
Step 13. Select another Target - AwesomeProjectTests and do the same signings as in the Step 12.
Step 14. On top of the screen Select your simulator you want the project to be built. But do not run or build the project. If you do not have any simulators, add them first, and you will see them in the list.
Step 15. Get back to your terminal. Go inside the project folder and run:
npx react-native start
You will see the metro server running. It runs on port 8081, that’s why we killed all the processes that possibly occupy that port.
Step 16. Open a new tab in the terminal, navigate to your project folder and run:
Note: specify the simulator name you selected in step 14.
npx react-native run-ios --simulator="iPhone 13 Pro"
Now brace yourself and wait till you see the simulator started and it will install the new application for you.
Step 17. If you see the error like on the screenshot below, do the following steps.
Open "node_modules/react-native/scripts/" in Finder (open node_modules/react-native/scripts/)
Right-Click on launchPackager.command and click Open With then choose Other... ---> Select your terminal application. I selected iTerm.
In your Applications directory, select iTerm and click Always Open With
You are done. You will see the application running in your simulator in a hot reload mode.
Conclusion:
- It looks completely overkilling and it really is.
- I followed all
the steps above after I wrote this, to make sure it does work - and
it does.
- I am disappointed by React for not providing the section of
installation in case you are using NVM.
Let me know if it helped you.
