Skip to content

Commit 3ab4886

Browse files
committed
Initial commit
Generated by react-native@0.81.4
0 parents  commit 3ab4886

63 files changed

Lines changed: 22446 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.eslintrc.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native',
4+
};

.gitignore

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
**/.xcode.env.local
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
*.hprof
33+
.cxx/
34+
*.keystore
35+
!debug.keystore
36+
.kotlin/
37+
38+
# node.js
39+
#
40+
node_modules/
41+
npm-debug.log
42+
yarn-error.log
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://docs.fastlane.tools/best-practices/source-control/
50+
51+
**/fastlane/report.xml
52+
**/fastlane/Preview.html
53+
**/fastlane/screenshots
54+
**/fastlane/test_output
55+
56+
# Bundle artifact
57+
*.jsbundle
58+
59+
# Ruby / CocoaPods
60+
**/Pods/
61+
/vendor/bundle/
62+
63+
# Temporary files created by Metro to check the health of the file watcher
64+
.metro-health-check*
65+
66+
# testing
67+
/coverage
68+
69+
# Yarn
70+
.yarn/*
71+
!.yarn/patches
72+
!.yarn/plugins
73+
!.yarn/releases
74+
!.yarn/sdks
75+
!.yarn/versions

.prettierrc.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
arrowParens: 'avoid',
3+
singleQuote: true,
4+
trailingComma: 'all',
5+
};

.watchmanconfig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

App.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { StatusBar, useColorScheme } from 'react-native';
2+
import { SafeAreaProvider } from 'react-native-safe-area-context';
3+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
4+
import { AppNavigator } from './src/navigation/AppNavigator';
5+
6+
const App: React.FC = () => {
7+
const isDarkMode = useColorScheme() === 'dark';
8+
9+
return (
10+
<GestureHandlerRootView>
11+
<SafeAreaProvider>
12+
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
13+
<AppNavigator />
14+
</SafeAreaProvider>
15+
</GestureHandlerRootView>
16+
);
17+
};
18+
19+
export default App;

LICENSE

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Copyright 2025 Callstack
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4+
5+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6+
7+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# React Native for Meta Horizon OS
2+
3+
This project demonstrates that **React Native applications can run natively on Meta Horizon OS** with full performance and feature parity. No compromises, no limitations – just the familiar React Native development experience you already know, now available in virtual reality.
4+
5+
<div align="center">
6+
<img src="./screenshot.webp" alt="React Native on Meta Horizon OS" style="max-width: 720px; width: 100%;" />
7+
</div>
8+
9+
## 🌟 What This Proves
10+
11+
**React Native Works in VR**: This project proves that React Native can be used to build applications for Meta Horizon OS and virtual reality devices like Meta Quest 3. The same framework that powers millions of mobile apps can now power immersive VR experiences.
12+
13+
**Zero Performance Compromises**: React Native runs natively on Meta Horizon OS with the same performance characteristics as mobile platforms. Your apps maintain smooth 60fps performance, responsive interactions, and fluid animations in virtual reality.
14+
15+
**Familiar Development Experience**: If you can build React Native apps for Android or iOS, you can build them for VR. The development workflow, debugging tools, hot reloading, and APIs work exactly the same way.
16+
17+
**Easy Porting from Mobile**: Existing React Native Android applications can be adapted for Meta Horizon OS with minimal changes. Your components, business logic, and state management patterns transfer directly to VR development.
18+
19+
## 🚀 Technical Capabilities
20+
21+
**Native Performance**: React Native applications run with native performance on Meta Horizon OS, leveraging the same JavaScript engine and native bridge architecture that powers mobile apps.
22+
23+
**Full API Access**: Complete access to Meta Horizon OS APIs through React Native's native module system. Camera, sensors, controllers, and VR-specific features are all accessible.
24+
25+
**Standard React Native Patterns**: All familiar React Native patterns work in VR – components, hooks, navigation, state management, and third-party libraries function identically.
26+
27+
**Development Tools**: Full support for React Native development tools including Metro bundler and hot reloading in the VR environment.
28+
29+
## 🛠️ Development Setup
30+
31+
### Prerequisites
32+
33+
- Meta Quest 3 (or compatible Meta Horizon OS device)
34+
- Meta Horizon OS development environment
35+
- [React Native development environment](https://reactnative.dev/docs/set-up-your-environment)
36+
37+
### Installation
38+
39+
1. **Clone the Repository**
40+
41+
```bash
42+
git clone https://github.com/callstack/react-native-horizonos-example/
43+
cd react-native-horizonos-example
44+
```
45+
46+
2. **Install Dependencies**
47+
48+
```bash
49+
pnpm install
50+
```
51+
52+
3. **Start Development Server**
53+
54+
```bash
55+
pnpm start
56+
```
57+
58+
4. **Deploy to Meta Horizon OS**
59+
60+
```bash
61+
pnpm run quest
62+
```
63+
64+
## 📱 Demo Features
65+
66+
This demo application showcases various React Native capabilities in VR:
67+
68+
- **Camera Integration**: Access to both selfie and passthrough cameras
69+
- **Audio Playback**: Background music with system notification controls
70+
- **Link Sharing**: Standard React Native sharing functionality
71+
72+
## 🎮 Interaction Methods
73+
74+
React Native apps in Meta Horizon OS support multiple interaction patterns:
75+
76+
- **Meta Quest Controllers**: Traditional VR controller input
77+
- **Hand Tracking**: Finger-based interaction when enabled
78+
79+
## 🖥️ Display & Interface
80+
81+
React Native applications render as horizontal panels within the Meta Horizon environment, optimized for VR viewing angles and interaction patterns. The same UI components that work on mobile adapt seamlessly to the virtual environment.
82+
83+
## 📦 Third-Party Libraries
84+
85+
This project leverages several key third-party libraries to provide a rich development experience:
86+
87+
### Navigation & UI
88+
89+
- **React Navigation**: Complete navigation solution with native stack and gesture support
90+
- **React Native Screens**: Native screen management for better performance
91+
- **React Native Safe Area Context**: Safe area handling for different device layouts
92+
93+
### Animation & Interactions
94+
95+
- **React Native Reanimated**: High-performance animation library with native driver support
96+
- **React Native Gesture Handler**: Native gesture recognition and handling
97+
- **React Native Worklets**: JavaScript functions that run on the UI thread
98+
99+
### Media & Camera
100+
101+
- **React Native Vision Camera**: Advanced camera functionality with frame processing
102+
- **React Native Track Player**: Full-featured audio playback with background support
103+
- **React Native SVG**: SVG rendering support for scalable graphics
104+
105+
### Icons & Assets
106+
107+
- **Lucide React Native**: Comprehensive icon library with 1000+ icons
108+
109+
### Utilities
110+
111+
- **React Native Restart**: Application restart functionality
112+
113+
## 📚 Learn More
114+
115+
- [Meta Horizon OS Documentation](https://developer.oculus.com/)
116+
- [React Native Documentation](https://reactnative.dev/docs/getting-started)
117+
- [Meta Quest Development](https://developer.oculus.com/documentation/)
118+
119+
## 🐛 Troubleshooting
120+
121+
Common development issues and solutions:
122+
123+
- Meta Quest connection and setup
124+
- Meta Horizon OS environment configuration
125+
- React Native dependency management
126+
- VR-specific debugging techniques
127+
128+
## 📄 License
129+
130+
This project is licensed under the MIT License - see the LICENSE file for details.

__tests__/App.test.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* @format
3+
*/
4+
5+
import React from 'react';
6+
import ReactTestRenderer from 'react-test-renderer';
7+
import App from '../App';
8+
9+
test('renders correctly', async () => {
10+
await ReactTestRenderer.act(() => {
11+
ReactTestRenderer.create(<App />);
12+
});
13+
});

android/app/build.gradle

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
apply plugin: "com.android.application"
2+
apply plugin: "org.jetbrains.kotlin.android"
3+
apply plugin: "com.facebook.react"
4+
5+
/**
6+
* This is the configuration block to customize your React Native Android app.
7+
* By default you don't need to apply any configuration, just uncomment the lines you need.
8+
*/
9+
react {
10+
/* Folders */
11+
// The root of your project, i.e. where "package.json" lives. Default is '../..'
12+
// root = file("../../")
13+
// The folder where the react-native NPM package is. Default is ../../node_modules/react-native
14+
// reactNativeDir = file("../../node_modules/react-native")
15+
// The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
16+
// codegenDir = file("../../node_modules/@react-native/codegen")
17+
// The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
18+
// cliFile = file("../../node_modules/react-native/cli.js")
19+
20+
/* Variants */
21+
// The list of variants to that are debuggable. For those we're going to
22+
// skip the bundling of the JS bundle and the assets. By default is just 'debug'.
23+
// If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
24+
// debuggableVariants = ["liteDebug", "prodDebug"]
25+
26+
/* Bundling */
27+
// A list containing the node command and its flags. Default is just 'node'.
28+
// nodeExecutableAndArgs = ["node"]
29+
//
30+
// The command to run when bundling. By default is 'bundle'
31+
// bundleCommand = "ram-bundle"
32+
//
33+
// The path to the CLI configuration file. Default is empty.
34+
// bundleConfig = file(../rn-cli.config.js)
35+
//
36+
// The name of the generated asset file containing your JS bundle
37+
// bundleAssetName = "MyApplication.android.bundle"
38+
//
39+
// The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
40+
// entryFile = file("../js/MyApplication.android.js")
41+
//
42+
// A list of extra flags to pass to the 'bundle' commands.
43+
// See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
44+
// extraPackagerArgs = []
45+
46+
/* Hermes Commands */
47+
// The hermes compiler command to run. By default it is 'hermesc'
48+
// hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
49+
//
50+
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
51+
// hermesFlags = ["-O", "-output-source-map"]
52+
53+
/* Autolinking */
54+
autolinkLibrariesWithApp()
55+
}
56+
57+
/**
58+
* Set this to true to Run Proguard on Release builds to minify the Java bytecode.
59+
*/
60+
def enableProguardInReleaseBuilds = false
61+
62+
/**
63+
* The preferred build flavor of JavaScriptCore (JSC)
64+
*
65+
* For example, to use the international variant, you can use:
66+
* `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
67+
*
68+
* The international variant includes ICU i18n library and necessary data
69+
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
70+
* give correct results when using with locales other than en-US. Note that
71+
* this variant is about 6MiB larger per architecture than default.
72+
*/
73+
def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
74+
75+
android {
76+
ndkVersion rootProject.ext.ndkVersion
77+
buildToolsVersion rootProject.ext.buildToolsVersion
78+
compileSdk rootProject.ext.compileSdkVersion
79+
80+
namespace "com.metahorizon"
81+
defaultConfig {
82+
applicationId "com.metahorizon"
83+
minSdkVersion rootProject.ext.minSdkVersion
84+
targetSdkVersion rootProject.ext.targetSdkVersion
85+
versionCode 1
86+
versionName "1.0"
87+
}
88+
signingConfigs {
89+
debug {
90+
storeFile file('debug.keystore')
91+
storePassword 'android'
92+
keyAlias 'androiddebugkey'
93+
keyPassword 'android'
94+
}
95+
}
96+
buildTypes {
97+
debug {
98+
signingConfig signingConfigs.debug
99+
}
100+
release {
101+
// Caution! In production, you need to generate your own keystore file.
102+
// see https://reactnative.dev/docs/signed-apk-android.
103+
signingConfig signingConfigs.debug
104+
minifyEnabled enableProguardInReleaseBuilds
105+
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
106+
}
107+
}
108+
}
109+
110+
dependencies {
111+
// The version of react-native is set by the React Native Gradle Plugin
112+
implementation("com.facebook.react:react-android")
113+
114+
if (hermesEnabled.toBoolean()) {
115+
implementation("com.facebook.react:hermes-android")
116+
} else {
117+
implementation jscFlavor
118+
}
119+
}

android/app/debug.keystore

2.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)