This repository contains a universal application example developed using React Native for Vision Pro and iPhone (VisionOS and iOS). It is inspired by Apple's Hello World example for VisionOS. Please note that this example is intended for educational and demonstration purposes and is not ready for production use. All the code is provided as-is and is not supported by Apple or Facebook. Assets used in this example are provided by Apple and are not owned by the author of this repository.
You can check videos below to see the application in action
- Universal Application: This application is designed to run on both Vision Pro and iPhone devices (possibly on iPad as well).
- React Native: The application is developed using React Native, a popular framework for building cross-platform applications.
- 60 FPS: The application is designed to run at 60 frames per second (FPS) on both Vision Pro and iPhone devices to create a smooth user and native experience.
- 3D Models are not supported at the moment due to the lack of support for 3D models in React Native for VisionOS.
- Multi Window support is not working due to limitation of react-native-visionos library (p.s: it is on the way).
- Immersive Space is not available yet, but it is on the way.
- Install Node.js (>=18) and Yarn (3.6.4) if you haven't already.
- Install Watchman
brew install watchmanif you haven't already. - For xcode, make sure that xcode is installed and the command line tools are installed by running
xcode-select --installin your terminal. - For xcode build, install ios-deploy
brew install ios-deploy - Enable corepack by running
corepack enablein your terminal if you haven't already after Yarn installation. - Restart your terminal to apply the changes. Then run
yarn set version 3.6.4in the root directory to set the Yarn version. - Start by navigating to the root directory and run
yarnoryarn installto install the necessary packages. - Next, navigate to the
visionosfolder and execute the following commands:bundle installto install the necessary gems.bundle exec pod installto install the required pods. (installing boost and hermes engine packages take time)
- Return to the root directory and enter the
iosfolder, repeating the steps above. - Once again, return to the root directory and run
yarn visionosand/oryarn iosto build and install the applications. - After the application has been built, execute
yarn startto launch the metro server in a separate terminal window. - Finally, open the application on your device or simulator to see it in action.
Universal Apps in Action
universal-app-demo-for-visionpro.mp4
Comparison between React Native App and Original Swift App
comparison-apps.mp4
If you encounter any issues during the installation or usage of this application, please refer to the Troubleshooting page. If you are unable to resolve the issue, please open an issue on this repository.
The "yarn-path" option has been set (in .../MLVisionRN/source/•yarnrc.yml), but the specified location doesn't exist
This issue occurs when the yarn-path option is set in the yarnrc.yml file, but the specified location does not exist. To resolve this issue, remove the yarn-path option from the yarnrc.yml file and then run yarn set version 3.6.4 in the root directory to set the Yarn version.
To learn more about React Native, take a look at the following resources:
- React Native Website - learn more about React Native.
- Getting Started - an overview of React Native and how setup your environment.
- Learn the Basics - a guided tour of the React Native basics.
- Blog - read the latest official React Native Blog posts.
@facebook/react-native- the Open Source; GitHub repository for React Native.- React Native VisionOS - the Open Source; GitHub repository for React Native VisionOS.