This content originally appeared on DEV Community and was authored by SeongKuk Han
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 `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.
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, 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.
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.
Conclusion
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!
This content originally appeared on DEV Community and was authored by SeongKuk Han
SeongKuk Han | Sciencx (2024-08-11T23:37:16+00:00) Running a React Native Hello World App on an iPhone (Without Expo): Troubleshooting Common Issues. Retrieved from https://www.scien.cx/2024/08/11/running-a-react-native-hello-world-app-on-an-iphone-without-expo-troubleshooting-common-issues/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.