Making and Playing with a Vision Pro App Using react-native-visionos
I will continue researching apps for Vision Pro using Swift and SwiftUI, but as a Yori Hiroi Frontend person, I also want to research ways to build them with JavaScript / TypeScript. So I will cover react-native-visionos.
First, I will start with what react-native-visionos is.
react-native-visionos is a product released as open source by Callstack.
It is made by forking react-native.
Callstack seems to be a development company centered on React as its core technology, and it has many other projects too.
For now, I will try building along with the following documentation referenced from the repository.
It seems you can create a new project by running the following on the command line.
$ npx @callstack/react-native-visionos@latest init YourAppNameSo first, I thought, Hello World. I started creating it with the following name.
By the way, the Mac work was done on a Mac mini M2 I bought a little while ago, with only minimal setup completed (Trying to Build an App for visionOS: Kinosaki Onsen Workation Results Slides - Yori Hiroi Frontend). So people building a new environment may encounter similar errors to the ones below. People with a lot of setup already done may proceed smoothly.
I ran the following.
$ npx @callstack/react-native-visionos@latest init helloworld-1Then an error appeared. Apparently it needs to be alphanumeric.
error "helloworld-1" is not a valid name for a project. Please use a valid identifier name (alphanumeric).So I changed the name and created it.
$ npx @callstack/react-native-visionos@latest init helloworld1But this also produced an error.
error Project name shouldn't contain "HelloWorld" name in it, because it is CLI's default placeholder name.Oh, it seems the name HelloWorld itself is the default placeholder name and therefore not allowed. So I ran the following.
$ npx @callstack/react-native-visionos@latest init MyHelloThen came the following error.
...
✖ Do you want to install CocoaPods now? Only needed if you run your project in Xcode directly … no
error Installing pods failed. This doesn't affect project initialization and you can safely proceed.
However, you will need to install pods manually when running iOS, follow additional steps in "Run instructions for iOS" section.
✖ Installing dependenciesI see. It seems CocoaPods is needed for dependency management, so I installed it.
However, another error occurred. It looks like the required library version was insufficient.
$ sudo gem install cocoapods
...
ERROR: Error installing cocoapods:
The last version of drb (>= 0) to support your Ruby & RubyGems was 2.0.6. Try installing it with `gem install drb -v 2.0.6` and then running the current command again
drb requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.
...So I ran the following. This looked like it might take a while.
$ sudo gem install drb -v 2.0.6Then I installed CocoaPods again. Another error appeared, so I kept installing what was needed without giving up.
$ sudo gem install cocoapods
...
ERROR: Error installing cocoapods:
The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.7. Try installing it with `gem install activesupport -v 6.1.7.7` and then running the current command again
activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.$ sudo gem install activesupport -v 6.1.7.7Now, this time for sure, install CocoaPods.
$ sudo gem install cocoapods
...
Installing ri documentation for cocoapods-1.15.2
Done installing documentation for cocoapods-core, cocoapods after 1 seconds
2 gems installedGood. OK.
Now create the project. But then there was an error related to xcode-select.
npx @callstack/react-native-visionos@latest init MyHello
...
✖ Installing CocoaPods dependencies (this may take a few minutes)
error xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
error Installing pods failed. This doesn't affect project initialization and you can safely proceed.
However, you will need to install pods manually when running iOS, follow additional steps in "Run instructions for iOS" section.
✖ Installing CocoaPods dependencies (this may take a few minutes)So I set the Xcode path for xcode-select.
$ sudo xcode-select -s /Applications/Xcode.app/Contents/DeveloperThen I reran it. My spirit was not broken yet.
npx @callstack/react-native-visionos@latest init MyHello
...
✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies
✔ Do you want to install CocoaPods now? Only needed if you run your project in Xcode directly … yes
✔ Installing Ruby Gems
✔ Installing CocoaPods dependencies (this may take a few minutes)
...
✔ Initializing Git repository
...The project was created successfully.
Now let us launch the default starter app.
$ yarn visionos
...
... /react-native-visionos/MyHello/visionos/Pods/Target Support Files/Pods-MyHello/Pods-MyHello.debug.xcconfig:1:1: error: unable to open configuration settings file
warning: Unable to read contents of XCFileList '/Target Support Files/Pods-MyHello/Pods-MyHello-resources-Debug-output-files.xcfilelist' (in target 'MyHello' from project 'MyHello')
warning: Unable to read contents of XCFileList '/Target Support Files/Pods-MyHello/Pods-MyHello-frameworks-Debug-output-files.xcfilelist' (in target 'MyHello' from project 'MyHello')
error: Unable to load contents of file list: '/Target Support Files/Pods-MyHello/Pods-MyHello-frameworks-Debug-input-files.xcfilelist' (in target 'MyHello' from project 'MyHello')
error: Unable to load contents of file list: '/Target Support Files/Pods-MyHello/Pods-MyHello-resources-Debug-input-files.xcfilelist' (in target 'MyHello' from project 'MyHello')
error: Unable to load contents of file list: '/Target Support Files/Pods-MyHello/Pods-MyHello-resources-Debug-output-files.xcfilelist' (in target 'MyHello' from project 'MyHello')
warning: Run script build phase '[CP] Copy Pods Resources' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'MyHello' from project 'MyHello')
warning: Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'MyHello' from project 'MyHello')
error: Unable to load contents of file list: '/Target Support Files/Pods-MyHello/Pods-MyHello-frameworks-Debug-output-files.xcfilelist' (in target 'MyHello' from project 'MyHello')
warning: Run script build phase '[CP] Embed Pods Frameworks' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'MyHello' from project 'MyHello')
** BUILD FAILED **
...But it failed to build. A lot of output appeared, but I realized I had not run the following.
$ bundle install$ bundle exec pod install
...
[Hermes] Using commit defined by HERMES_COMMIT envvar: xxx
Const Defined!
[!] Failed to load 'hermes-engine' podspec:
[!] Invalid `hermes-engine.podspec` file: [!] Unable to locate the executable `cmake`.
# from ... /react-native-visionos/MyHello/node_modules/@callstack/react-native-visionos/sdks/hermes-engine/hermes-engine.podspec:120
# -------------------------------------------
# puts "Const Defined!"
> CMAKE_BINARY = Pod::Executable::which!('cmake')
# # NOTE: Script phases are sorted alphabetically inside Xcode project
# -------------------------------------------It seemed cmake was missing. Come to think of it, I had not installed that kind of tool. So I ran the following.
$ brew install cmakeNow it finally runs.
$ yarn visionos
yarn run v1.22.22
$ react-native run-visionos
info Found Xcode workspace "MyHello.xcworkspace"
info Found booted Apple Vision Pro
...
success Successfully built the app
...
success Successfully launched the app
✨ Done in 11.85s.The app does launch in the visionOS simulator, but an error appears. I finally got this far.
The error message looks like this.
No bundle URL present.
Make sure you're running a packager server or have included a .jsbundle file in your application bundle.
RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
OUTLINED_FUNCTION_75
OUTLINED_FUNCTION_75
OUTLINED_FUNCTION_2
$s7MyHello0aB3AppV5$mainyyFZ
main
start_sim
0x0
0x0It seems main.jsbundle was not being output properly. So I ran the following.
$ react-native bundle --entry-file='index.js' --bundle-output='./visionos/main.jsbundle' --dev=false --platform='ios' --assets-dest='./visionos'For the command above, I referred to this article. It is an old article, but it seems the same problem still occurs when using React Native today.
Because this is for visionOS, --bundle-output and --assets-dest needed to be under ./visionos. The platform also needed to be ios. This may change somewhere in the future. I looked under node_modules, and it seems JavaScript files corresponding to the specified platform are loaded, but there do not yet seem to be files such as XXX.visionos.js.
With that, it displayed successfully, and the Hello World-like part was complete.
From next time onward, I want to discover what kinds of UI can be used and what cannot be done.