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]>
callstack · Dec 12, 2023 · 3dee764 · 3dee764
1 parent a2723fb
commit 3dee764
Show file tree

Hide file tree

Showing 19 changed files with 1,165 additions and 50 deletions.
diff --git a/packages/react-native/Libraries/NewAppScreen/components/Header.js b/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,

diff --git a/packages/react-native/template/App.tsx b/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>
   );
 }
 

diff --git a/packages/react-native/template/_gitignore b/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

diff --git a/packages/react-native/template/metro.config.js b/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://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);
diff --git a/packages/react-native/template/package.json b/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",