I recently got an opportunity to work on a React Native project, targeting iOS devices. Since it was my first time developing a mobile app at a company. I found things quite tricky compared to web development.
To be fair, if the project had been built on Expo, things might have been much easier, but we couldn't use Expo to use a specific library we needed. On the first day, I took on the project, I wanted to see what the app looked like and tried to run it. I thought I would easily do it but I ended up struggling for some hours, even though there is documentation and RN CLI tool provides a proper guide.
What I will share in this post is running the app on an iPhone device, which is basically written in the React Native documentation. However, there may be some people who encounter some unexpected issues during the process. This post is for them.
I haven't built an iOS app on my laptop, Mac M1 Air, and I will be writing down while I am doing each step.
The steps are quite simple. Creating a new React Native project, and then running it on my iPhone device.
- Create a new React Native project without Expo.
Reference: Get Started Without a Framework
> npx @react-native-community/cli@latest init FirstApp
Since I haven't installed CocoaPods on my laptop, it asked me to install CocoaPods, which is a dependency manager we need for the build.
The project has been set up and it let us how to run the app, which I found very friendly. But, unfortunately, it failed to install cocoapods, and I manually installed cocoapods with the following command.
> sudo gem install cocoapods
Ruby installed on my laptop needs to be upgraded, and I did following the guide.
I tried to install cocoapods again using gem.
Now, let's install dependencies using pod. Go to the directory, 'ios' under the root directory.
> pod install
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
Framework build type is static library
[Codegen] Adding script_phases to React-Codegen.
[Codegen] Generating ./build/generated/ios/React-Codegen.podspec.json
[Codegen] Analyzing /Users/user/dev/blog/FirstApp/package.json
[Codegen] Searching for codegen-enabled libraries in the app.
[Codegen] The "codegenConfig" field is not defined in package.json. Assuming there is nothing to generate at the app level.
[Codegen] Searching for codegen-enabled libraries in the project dependencies.
[Codegen] Found react-native
[Codegen] >>>>> Searching for codegen-enabled libraries in react-native.config.js
[Codegen] Processing FBReactNativeSpec
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Processing rncore
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Generating Native Code for ios
[Codegen] Generated artifacts: /Users/user/dev/blog/FirstApp/ios/build/generated/ios
[Codegen] Generating Native Code for ios
[Codegen] Generated artifacts: /Users/user/dev/blog/FirstApp/node_modules/react-native/ReactCommon
[Codegen] Creating component provider.
[Codegen] Generated provider in: /Users/user/dev/blog/FirstApp/node_modules/react-native/React/Fabric
[Codegen] Done.
Analyzing dependencies
Fetching podspec for {% raw %}`DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `RCT-Folly` from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`
Fetching podspec for `boost` from `../node_modules/react-native/third-party-podspecs/boost.podspec`
Fetching podspec for `fmt` from `../node_modules/react-native/third-party-podspecs/fmt.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
[!] Failed to load 'glog' podspec:
[!] Invalid `glog.podspec` file: undefined method `[]' for nil:NilClass.
# from /Users/user/dev/blog/FirstApp/node_modules/react-native/third-party-podspecs/glog.podspec:38
# -------------------------------------------
# match = xcode_path.match(/Xcode (\d+)\.(\d+)/)
> major_version = match[1].to_i
# minor_version = match[2].to_i
# -------------------------------------------
[!] Unexpected XCode version string ''
[!] [Codegen] warn: using experimental new codegen integration
```
I encountered another error and I found the answer for this in [Stackoverflow](https://stackoverflow.com/questions/17980759/xcode-select-active-developer-directory-error/17980786#17980786
).
It says that it's caused by pointing to the wrong path for Xcode, and I pointed to the correct place using the below command.
```
> sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
```
Then, I executed the `pop install` command again.
It's successfully done, and then I executed the command `npm run start` to start the dev server.
```
node:events:497
throw er; // Unhandled 'error' event
^
Error: EMFILE: too many open files, watch
at FSWatcher._handle.onchange (node:internal/fs/watchers:207:21)
Emitted 'error' event on NodeWatcher instance at:
at FSWatcher._checkedEmitError (/Users/user/dev/blog/FirstApp/node_modules/metro-file-map/src/watchers/NodeWatcher.js:82:12)
at FSWatcher.emit (node:events:519:28)
at FSWatcher._handle.onchange (node:internal/fs/watchers:213:12) {
errno: -24,
syscall: 'watch',
code: 'EMFILE',
filename: null
}
```
Now, there is another error. I assumed that there might be a problem with the dependencies it installed while setting up. I deleted the `node_modules` directory and installed the dependencies again with the command `npm install`.
The dev server works well, and let's open the workspace file, it's under the `ios` directory.
You should carefully see the status as errors could happen if you build or run while it's processing, and I connected my phone with a cable.
If you don't turn on developer mode on your phone, please check the official document in Apple [here](https://developer.apple.com/documentation/xcode/enabling-developer-mode-on-a-device), and turn on the developer mode.
If you don't see the developer mode, try to reconnect your cable with your phone again.
Now, let's build the app.
```
/Users/user/dev/blog/FirstApp/ios/FirstApp.xcodeproj Signing for "FirstApp" requires a development team. Select a development team in the Signing & Capabilities editor.
```
It says that I need to select a development team.
Open the project in the targets list.
Sign up with your Apple account then select the team. You may also need to change the bundle identifier.
In the middle of the process, it asked for a password for some certification with the message `Codesign wants to access key "access" in your keychain`, I put in my login password but keeps asking me. I thought it was the password of my Apple account.
https://stackoverflow.com/questions/46774005/codesign-wants-to-access-key-access-in-your-keychain-i-put-in-my-login-passwo
I found this answer and I just pressed enter with an empty password and it's done.
```
[Warning] You need to configure your node path in the `".xcode.env" file` environment. You can set it up quickly by running: `echo export NODE_BINARY=$(command -v node) > .xcode.env` in the ios folder. This is needed by React Native to work correctly. We fallback to the DEPRECATED behavior of finding `node`. This will be REMOVED in a future version. You can read more about this here: https://reactnative.dev/docs/environment-setup#optional-configuring-your-environment
```
There is another error. We need to configure our node path in the `.xcode.env` file.
I checked the node path using `which` command and set up the path in the file.
```
Command PhaseScriptExecution failed with a nonzero exit code
```
I was a bit confused when I met this error. I reinstalled dependencies for node and pods but the error was still there. It turns out that it was because I built it while XCode was indexing the files.
I waited for it, and the build was done successfully.
The Untrusted Developer message could be poped up if you run the app for the first time.
Let's go to VPN & Device Management and press the trust Button.
Now, we can see our first app on our iPhone device.
---
# Wrap Up
It was the first time that I ran a React Native app on my iPhone device on my laptop. As expected, I encountered many issues and actually, I'm glad for it as I can write more on this post and there may be more people who find it helpful. Additionally, I also learned a lot.
Sometimes, just a simple way like reconnecting the cable, waiting for IDEs done work on something, or reinstalling dependencies could solve an issue you met.
All the errors, issues, and obstacles you met would be good opportunities to learn, and also it could be a good experience to support colleagues, especially if you are in a specific role to advise them as we can confidently share what we experienced.
I hope you can find it helpful.
Happy Coding!
---
## Additional Error Shooting
Expo npm start error
`Error: EMFILE: too many open files - React Native CLI`
Try to install `watchman`.
```
$ brew update
$ brew install watchman
```
reference: https://stackoverflow.com/questions/58675179/error-emfile-too-many-open-files-react-native-cli
Top comments (2)
I really like the way your describe and share your journey jumping into the ReactNative community! As a React Native dev, I know how it can be intimidating as it’s not as instant as a simple React Vite Webapp for instance. Even though expo makes it much smoother, building an app with ReactNative CLI and debugging eventual Ruby / Cocoapoads and Java conflicts or unsupported versions and Xcode’s or Gradle weird errors are definitely making the journey more challenging 🤠But you made it! Welcome! Amazing well written post btw 🙂
Weird errors right, that's true 😂 In web development, I was able to control all since it is all about js. But it wasn't like this in RN, however it was very interesting to see how they work together. Thank you for your words! 👍 Have a great weekend!