feat: add visionOS template (#34)

* Update CLI to v12.1.1

# Conflicts:
#	packages/community-cli-plugin/package.json
#	packages/react-native/cli.js
#	packages/react-native/package.json

* feat: implement visionos react-native template

* feat: modify template look

* feat: add `@callstack/out-of-tree-platforms` to metro config

* fix: metro config

* feat: update supported platforms

---------

Co-authored-by: szymonrybczak <[email protected]>

Author: okwasniewski

packages/community-cli-plugin/package.json

@@ -23,8 +23,8 @@
   ],
   "dependencies": {
     "@react-native/dev-middleware": "^0.74.0",
-    "@react-native-community/cli-server-api": "12.0.0",
-    "@react-native-community/cli-tools": "12.0.0",
+    "@react-native-community/cli-server-api": "12.1.1",
+    "@react-native-community/cli-tools": "12.1.1",
     "@react-native/metro-babel-transformer": "^0.74.0",
     "chalk": "^4.0.0",
     "execa": "^5.1.1",

packages/react-native/Libraries/NewAppScreen/components/Header.js

@@ -42,7 +42,7 @@ const Header = (): Node => {
         ]}>
         Welcome to
         {'\n'}
-        React Native
+        React Native visionOS
       </Text>
     </ImageBackground>
   );
@@ -56,7 +56,7 @@ const styles = StyleSheet.create({
   },
   logo: {
     opacity: 0.2,
-    overflow: 'visible',
+    overflow: 'hidden',
     resizeMode: 'cover',
     /*
      * These negative margins allow the image to be offset similarly across screen sizes and component sizes.
@@ -65,7 +65,6 @@ const styles = StyleSheet.create({
      * source image's size.
      */
     marginLeft: -128,
-    marginBottom: -192,
   },
   text: {
     fontSize: 40,

packages/react-native/cli.js

@@ -10,11 +10,12 @@
 
 'use strict';
 
-const {version: currentVersion} = require('./package.json');
-const cli = require('@react-native-community/cli');
-const chalk = require('chalk');
 const {get} = require('https');
 const {URL} = require('url');
+const chalk = require('chalk');
+const cli = require('@react-native-community/cli');
+
+const {version: currentVersion, name} = require('./package.json');
 
 const isNpxRuntime = process.env.npm_lifecycle_event === 'npx';
 const DEFAULT_REGISTRY_HOST =
@@ -40,7 +41,7 @@ async function getLatestVersion(registryHost = DEFAULT_REGISTRY_HOST) {
 }
 
 /**
- * npx react-native -> @react-native-community/cli
+ * npx react-native -> @react-native-comminity/cli
  *
  * Will perform a version check and warning if you're not running the latest community cli when executed using npx. If
  * you know what you're doing, you can skip this check:
@@ -66,7 +67,7 @@ async function main() {
       // Ignore errors, since it's a nice to have warning
     }
   }
-  return cli.run();
+  return cli.run(name);
 }
 
 if (require.main === module) {

packages/react-native/package.json

@@ -94,9 +94,9 @@
   },
   "dependencies": {
     "@jest/create-cache-key-function": "^29.6.3",
-    "@react-native-community/cli": "12.0.0",
-    "@react-native-community/cli-platform-android": "12.0.0",
-    "@react-native-community/cli-platform-ios": "12.0.0",
+    "@react-native-community/cli": "12.1.1",
+    "@react-native-community/cli-platform-android": "12.1.1",
+    "@react-native-community/cli-platform-ios": "12.1.1",
     "@react-native/assets-registry": "^0.74.0",
     "@react-native/community-cli-plugin": "^0.74.0",
     "@react-native/codegen": "^0.74.0",

packages/react-native/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>
   );
 }
 

packages/react-native/template/_gitignore

@@ -57,6 +57,7 @@ yarn-error.log
 
 # Ruby / CocoaPods
 /ios/Pods/
+/visionos/Pods/ 
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher

packages/react-native/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://facebook.github.io/metro/docs/configuration
  *
  * @type {import('metro-config').MetroConfig}
  */
-const config = {};
+
+
+const config = {
+  resolver: {
+    resolveRequest: getPlatformResolver({
+      platformNameMap: {visionos: '@callstack/react-native-visionos'},
+    }),
+  },
+};
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);

packages/react-native/template/package.json

@@ -22,6 +22,7 @@
     "@react-native/eslint-config": "^0.74.0",
     "@react-native/metro-config": "^0.74.0",
     "@react-native/typescript-config": "^0.74.0",
+    "@callstack/out-of-tree-platforms": "^0.74.0",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",