feat: add visionOS

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@react-native-community/template",
+  "name": "@callstack/visionos-template",
   "version": "0.76.0-main",
   "description": "The template used by `npx @react-native-community/cli init` to bootstrap a React Native application.",
   "license": "MIT",

template/App.tsx

@@ -7,15 +7,7 @@
 
 import React from 'react';
 import type {PropsWithChildren} from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
+import {ScrollView, StyleSheet, Text, useColorScheme, View} from 'react-native';
 
 import {
   Colors,
@@ -56,43 +48,26 @@ function Section({children, title}: SectionProps): React.JSX.Element {
 }
 
 function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
   return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <Header />
+      <View>
+        <Section title="Step One">
+          Edit <Text style={styles.highlight}>App.tsx</Text> to change this
+          screen and then come back to see your edits.
+        </Section>
+        <Section title="See Your Changes">
+          <ReloadInstructions />
+        </Section>
+        <Section title="Debug">
+          <DebugInstructions />
+        </Section>
+        <Section title="Learn More">
+          Read the docs to discover what to do next:
+        </Section>
+        <LearnMoreLinks />
+      </View>
+    </ScrollView>
   );
 }
 

template/metro.config.js

@@ -1,11 +1,20 @@
 const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+const {getPlatformResolver} = require('@callstack/out-of-tree-platforms');
 
 /**
  * Metro configuration
  * https://reactnative.dev/docs/metro
  *
  * @type {import('metro-config').MetroConfig}
  */
-const config = {};
+
+
+const config = {
+  resolver: {
+    resolveRequest: getPlatformResolver({
+      platformNameMap: {visionos: '@callstack/react-native-visionos'},
+    }),
+  },
+};
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);

template/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "1000.0.0"
+    "react-native": "1000.0.0",
+    "@callstack/react-native-visionos": "1000.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -24,6 +25,7 @@
     "@react-native/eslint-config": "0.76.0-main",
     "@react-native/metro-config": "0.76.0-main",
     "@react-native/typescript-config": "0.76.0-main",
+    "@callstack/out-of-tree-platforms": "0.76.0-main",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",