create-expo-stack 2.4.0-next.43d8ac0 → 2.4.0-next.79e55fd

package/build/templates/packages/expo-router/tabs/app/(tabs)/_layout.tsx.ejs

@@ -2,7 +2,7 @@ import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { Link, Tabs } from "expo-router";
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
-import { Pressable } from "react-native";
+import { Pressable } from 'react-native';
 <% } else { %>
 import { Pressable, StyleSheet } from "react-native";
 <% } %>
@@ -19,26 +19,26 @@ function TabBarIcon(props: {
 
 export default function TabLayout() {
   <% if (props.stylingPackage?.name === "unistyles") { %>
-  const {styles} = useStyles(stylesheet)
+  const { styles } = useStyles(stylesheet)
   <% } %>
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: "black",
+        tabBarActiveTintColor: 'black',
       }}>
       <Tabs.Screen
-        name="index"
+        name='index'
         options={{
-          title: "Tab One",
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          title: 'Tab One',
+          tabBarIcon: ({ color }) => <TabBarIcon name='code' color={color} />,
           headerRight: () => (
-            <Link href="/modal" asChild>
+            <Link href='/modal' asChild>
               <Pressable>
                 {({ pressed }) => (
                   <FontAwesome
-                    name="info-circle"
+                    name='info-circle'
                     size={25}
-                    color="gray"
+                    color='gray'
                     style={[styles.headerRight, { opacity: pressed ? 0.5 : 1 }]}
                   />
                 )}

package/build/templates/packages/expo-router/tabs/app/(tabs)/index.tsx.ejs

@@ -5,8 +5,8 @@
 <% } else if (props.stylingPackage?.name === "restyle") { %>
     import { Box, Text } from 'theme';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
-    import { createStyleSheet, useStyles } from 'react-native-unistyles'
-    import { Text, View } from "react-native";
+    import { useStyles } from 'react-native-unistyles'
+    import { Text, View } from 'react-native';
 <% } else { %>
     import { StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -15,9 +15,16 @@ import EditScreenInfo from "../../components/edit-screen-info";
 
 export default function TabOneScreen() {
   <% if (props.stylingPackage?.name === "unistyles") { %>
-    const { styles } = useStyles(stylesheet)
-  <% } %> 
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+    const { theme } = useStyles()
+
+    return (
+			<View style={theme.components.container}>
+				<Text style={theme.components.title}>Tab One</Text>
+				<View style={theme.components.separator} />
+				<EditScreenInfo path="app/(tabs)/index.tsx" />
+			</View>
+    );
+  <% } else if (props.stylingPackage?.name === "nativewind") { %>
         return (
 			<View className={styles.container}>
 				<Text className={styles.title}>Tab One</Text>
@@ -42,7 +49,7 @@ export default function TabOneScreen() {
           <Box height={1} marginVertical="l_32" width="80%" />
           <EditScreenInfo path="app/(tabs)/index.tsx" />
         </Box>
-      );  
+      );
     <% } else { %>
         return (
 			<View style={styles.container}>
@@ -60,23 +67,6 @@ export default function TabOneScreen() {
 		separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
 		title: `text-xl font-bold`
 	};
-<% } else if (props.stylingPackage?.name === "unistyles") { %>
-    const stylesheet = createStyleSheet({
-		container: {
-			alignItems: "center",
-			flex: 1,
-			justifyContent: "center",
-		},
-		separator: {
-			height: 1,
-			marginVertical: 30,
-			width: "80%",
-		},
-		title: {
-			fontSize: 20,
-			fontWeight: "bold",
-		}
-	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
 		container: {
@@ -85,6 +75,7 @@ export default function TabOneScreen() {
 			justifyContent: "center",
 		},
 		separator: {
+      backgroundColor: '#d1d5db',
 			height: 1,
 			marginVertical: 30,
 			width: "80%",

package/build/templates/packages/expo-router/tabs/app/(tabs)/two.tsx.ejs

@@ -5,8 +5,8 @@
 <% } else if (props.stylingPackage?.name === "restyle") { %>
     import { Box, Text } from 'theme';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
-    import { createStyleSheet, useStyles } from 'react-native-unistyles'
-    import { Text, View } from "react-native";
+    import { useStyles } from 'react-native-unistyles'
+    import { Text, View } from 'react-native';
 <% } else { %>
     import { StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -15,9 +15,16 @@ import EditScreenInfo from "../../components/edit-screen-info";
 
 export default function TabTwoScreen() {
     <% if (props.stylingPackage?.name === "unistyles") { %>
-      const {styles} = useStyles(stylesheet)
-    <% } %>
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+      const { theme } = useStyles()
+
+      return (
+        <View style={theme.components.container}>
+          <Text style={theme.components.title}>Tab Two</Text>
+          <View style={theme.components.separator} />
+          <EditScreenInfo path='app/(tabs)/two.tsx' />
+        </View>
+      );
+    <% } else if (props.stylingPackage?.name === "nativewind") { %>
         return (
 			<View className={styles.container}>
 				<Text className={styles.title}>Tab Two</Text>
@@ -42,7 +49,7 @@ export default function TabTwoScreen() {
           <Box height={1} marginVertical="l_32" width="80%" />
           <EditScreenInfo path="app/(tabs)/two.tsx" />
         </Box>
-      ); 
+      );
     <% } else { %>
         return (
 			<View style={styles.container}>
@@ -60,23 +67,6 @@ export default function TabTwoScreen() {
 		separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
 		title: `text-xl font-bold`
 	};
-<% } else if (props.stylingPackage?.name === "unistyles") { %>
-    const stylesheet = createStyleSheet({
-		container: {
-			alignItems: "center",
-			flex: 1,
-			justifyContent: "center",
-		},
-		separator: {
-			height: 1,
-			marginVertical: 30,
-			width: "80%",
-		},
-		title: {
-			fontSize: 20,
-			fontWeight: "bold",
-		}
-	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
 		container: {

package/build/templates/packages/expo-router/tabs/app/[...unmatched].tsx.ejs

@@ -19,7 +19,7 @@ export default function NotFoundScreen() {
 <% } %>
 
 <% if (props.stylingPackage?.name === "unistyles") {%>
-  const {styles} = useStyles(stylesheet);
+  const { styles } = useStyles(stylesheet);
 <% } %>
 
   return (
@@ -79,7 +79,7 @@ export default function NotFoundScreen() {
     linkText: `text-base text-[#2e78b7]`,
 	};
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
-  const stylesheet = createStyleSheet({
+  const stylesheet = createStyleSheet((theme) => ({
     container: {
       flex: 1,
       alignItems: 'center',
@@ -96,9 +96,9 @@ export default function NotFoundScreen() {
     },
     linkText: {
       fontSize: 14,
-      color: '#2e78b7',
+      color: theme.colors.astral,
     },
-  });
+  }));
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   const styles = StyleSheet.create({
     container: {

package/build/templates/packages/expo-router/tabs/app/_layout.tsx.ejs

@@ -1,3 +1,10 @@
+<% if (props.stylingPackage?.name === "nativewind") { %>
+import '../global.css';
+<% } %>
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import '../unistyles';
+<% } %>
+
 <% if (props.stylingPackage?.name === "tamagui") { %>
 	import React, { useEffect } from "react";
 	import { TamaguiProvider } from 'tamagui'

package/build/templates/packages/expo-router/tabs/app/modal.tsx.ejs

@@ -7,8 +7,8 @@
   import { Platform } from 'react-native';
   import { Box, Text } from 'theme';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
-  import { createStyleSheet, useStyles } from 'react-native-unistyles'
-  import { Platform, Text, View } from "react-native";
+  import { useStyles } from 'react-native-unistyles'
+  import { Platform, Text, View } from 'react-native';
 <% } else { %>
     import { Platform, StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -18,9 +18,17 @@ import EditScreenInfo from "../components/edit-screen-info";
 
 export default function ModalScreen() {
     <% if (props.stylingPackage?.name === "unistyles") { %>
-      const {styles} = useStyles(stylesheet)
-    <% } %>
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+      const { theme } = useStyles()
+
+      return (
+        <View style={theme.components.container}>
+          <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
+          <Text style={theme.components.title}>Modal</Text>
+          <View style={theme.components.separator} />
+          <EditScreenInfo path='app/modal.tsx' />
+        </View>
+      );
+    <% } else if (props.stylingPackage?.name === "nativewind") { %>
         return (
 			<View className={styles.container}>
 				<StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
@@ -67,23 +75,6 @@ export default function ModalScreen() {
 		separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
 		title: `text-xl font-bold`
 	};
-<% } else if (props.stylingPackage?.name === "unistyles") { %>
-  const stylesheet = createStyleSheet({
-		container: {
-			alignItems: "center",
-			flex: 1,
-			justifyContent: "center"
-		},
-		separator: {
-			height: 1,
-			marginVertical: 30,
-			width: "80%"
-		},
-		title: {
-			fontSize: 20,
-			fontWeight: "bold"
-		}
-	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
 		container: {

package/build/templates/packages/expo-router/tabs/components/edit-screen-info.tsx.ejs

@@ -6,7 +6,7 @@
     import { Box, Text } from 'theme';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
     import { createStyleSheet, useStyles } from 'react-native-unistyles'
-    import { Text, View } from "react-native";
+    import { Text, View } from 'react-native';
 <% } else { %>
     import { StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -92,33 +92,33 @@ export default function EditScreenInfo({ path }: { path: string }) {
     };
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
     const stylesheet = createStyleSheet({
-    codeHighlightContainer: {
-        borderRadius: 3,
-        paddingHorizontal: 4
-    },
-    getStartedContainer: {
-        alignItems: "center",
-        marginHorizontal: 50
-    },
-    getStartedText: {
-        fontSize: 17,
-        lineHeight: 24,
-        textAlign: "center"
-    },
-    helpContainer: {
-        alignItems: "center",
-        marginHorizontal: 20,
-        marginTop: 15
-    },
-    helpLink: {
-        paddingVertical: 15
-    },
-    helpLinkText: {
-        textAlign: "center"
-    },
-    homeScreenFilename: {
-        marginVertical: 7
-    }
+      codeHighlightContainer: {
+          borderRadius: 3,
+          paddingHorizontal: 4
+      },
+      getStartedContainer: {
+          alignItems: 'center',
+          marginHorizontal: 50
+      },
+      getStartedText: {
+          fontSize: 17,
+          lineHeight: 24,
+          textAlign: 'center'
+      },
+      helpContainer: {
+          alignItems: 'center',
+          marginHorizontal: 20,
+          marginTop: 15
+      },
+      helpLink: {
+          paddingVertical: 15
+      },
+      helpLinkText: {
+          textAlign: 'center'
+      },
+      homeScreenFilename: {
+          marginVertical: 7
+      }
     });
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({

package/build/templates/packages/firebase/metro.config.js.ejs

@@ -1,15 +1,14 @@
 const { getDefaultConfig } = require('expo/metro-config');
+<% if (props.stylingPackage?.name === "nativewind") { %>
+  const { withNativeWind } = require("nativewind/metro");
+<% } %>
 
 /** @type {import('expo/metro-config').MetroConfig} */
 // eslint-disable-next-line no-undef
-const config = getDefaultConfig(__dirname
-  <%_ if (props.navigationPackage?.name === "expo-router") { -%>
-    , {
-    // [Web-only]: Enables CSS support in Metro.
-    isCSSEnabled: true
-    }
-  <% } %>
-);
-config.resolver.sourceExts.push('cjs');
+const config = getDefaultConfig(__dirname);
 
-module.exports = config;
+<% if (props.stylingPackage?.name === "nativewind") { %>
+  module.exports = withNativeWind(config, { input: "./global.css" });
+<% } else { %>
+  module.exports = config;
+<% } %>

package/build/templates/packages/nativewind/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/build/templates/packages/nativewind/metro.config.js

@@ -0,0 +1,7 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+// eslint-disable-next-line no-undef
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: './global.css' });

package/build/templates/packages/nativewind/tailwind.config.js.ejs

@@ -9,6 +9,7 @@ module.exports = {
     <% } else { %>
       content: ["./App.{js,ts,tsx}"],
     <% } %>
+    presets: [require("nativewind/preset")],
     theme: {
       extend: {},
     },

package/build/templates/packages/react-navigation/App.tsx.ejs

@@ -1,3 +1,9 @@
+<% if (props.stylingPackage?.name === "nativewind") { %>
+import './global.css';
+<% } %>
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import './unistyles';
+<% } %>
 import "react-native-gesture-handler";
 <% if (props.stylingPackage?.name === "tamagui") { %>
 	import React, { useEffect } from "react";

package/build/templates/packages/react-navigation/components/edit-screen-info.tsx.ejs

@@ -5,7 +5,7 @@ import React from "react";
   import { Box, Text } from 'theme';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
   import { createStyleSheet, useStyles } from 'react-native-unistyles'
-  import { Text, View } from "react-native";
+  import { Text, View } from 'react-native';
 <% } else { %>
   import { StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -57,7 +57,7 @@ import React from "react";
   }
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
   export default function EditScreenInfo({ path }: { path: string }) {
-    const {styles} = useStyles(stylesheet)
+    const { styles } = useStyles(stylesheet)
     return (
       <View>
         <View style={styles.getStartedContainer}>
@@ -124,16 +124,16 @@ import React from "react";
       paddingHorizontal: 4
     },
     getStartedContainer: {
-      alignItems: "center",
+      alignItems: 'center',
       marginHorizontal: 50
     },
     getStartedText: {
       fontSize: 17,
       lineHeight: 24,
-      textAlign: "center"
+      textAlign: 'center'
     },
     helpContainer: {
-      alignItems: "center",
+      alignItems: 'center',
       marginHorizontal: 20,
       marginTop: 15
     },
@@ -141,7 +141,7 @@ import React from "react";
       paddingVertical: 15
     },
     helpLinkText: {
-      textAlign: "center"
+      textAlign: 'center'
     },
     homeScreenFilename: {
       marginVertical: 7

package/build/templates/packages/react-navigation/navigation/drawer-navigator.tsx.ejs

@@ -1,15 +1,50 @@
+import { FontAwesome, Ionicons, MaterialIcons } from '@expo/vector-icons';
 import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Pressable } from 'react-native';
+import { StackScreenProps } from '@react-navigation/stack';
 
-import One from '../screens/one';
-import Two from '../screens/two';
+import { RootStackParamList } from '.';
+import TabNavigator from './tab-navigator';
+import Home from '../screens/home';
+
+type Props = StackScreenProps<RootStackParamList, 'DrawerNavigator'>;
 
 const Drawer = createDrawerNavigator();
 
-export default function DrawerNavigator() {
+export default function DrawerNavigator({ navigation }: Props) {
 	return (
-		<Drawer.Navigator initialRouteName="One">
-			<Drawer.Screen name="One" component={One} />
-			<Drawer.Screen name="Two" component={Two} />
+		<Drawer.Navigator>
+      <Drawer.Screen
+        name="Home"
+        component={Home}
+        options={{
+          drawerIcon: ({ size, color }) => <Ionicons name="home-outline" size={size} color={color} />,
+        }}
+      />
+			<Drawer.Screen name="Tabs" component={TabNavigator}
+        options={{
+          headerRight: () => (
+            <Pressable onPress={() => navigation.navigate('Modal')}>
+              {({ pressed }) => (
+                <FontAwesome
+                  name="info-circle"
+                  size={25}
+                  color="gray"
+                  style={[
+                    {
+                      marginRight: 16,
+                      opacity: pressed ? 0.5 : 1,
+                    },
+                  ]}
+                />
+              )}
+            </Pressable>
+          ),
+          drawerIcon: ({ size, color }) => (
+            <MaterialIcons name="border-bottom" size={size} color={color} />
+          ),
+        }}
+       />
 		</Drawer.Navigator>
 	);
 }

package/build/templates/packages/react-navigation/navigation/index.tsx.ejs

@@ -10,7 +10,7 @@
     import { Box, Text, useTheme } from 'theme';
   <% } else if (props.stylingPackage?.name === "unistyles") { %>
     import { createStyleSheet, useStyles } from 'react-native-unistyles'
-		import { Text, View } from "react-native";
+		import { Text, View } from 'react-native';
 	<% } else { %>
 		import { Text, View, StyleSheet } from "react-native";
 	<% } %>
@@ -31,7 +31,7 @@
     <% } %>
 
     <% if (props.stylingPackage?.name === "unistyles") { %>
-    const { styles } = useStyles(stylesheet)
+    const { styles, theme } = useStyles(stylesheet);
     <% } %>
     
 		return (
@@ -77,6 +77,15 @@
                   </Box>
                 ),
               })}
+            <% } else if (props.stylingPackage?.name === "unistyles") { %>
+              options={({ navigation }) => ({
+								headerLeft: () => (
+									<View style={styles.backButton}>
+										<Feather name="chevron-left" size={16} color={theme.colors.azureRadiance} />
+										<Text style={styles.backButtonText} onPress={navigation.goBack}>Back</Text>
+									</View>
+								)
+							})}
 						<% } else { %>
 							options={({ navigation }) => ({
 								headerLeft: () => (
@@ -99,16 +108,16 @@
 			backButtonText: "text-blue-500 ml-1"
 		};
   <% } else if (props.stylingPackage?.name === "unistyles") { %>
-		const stylesheet = createStyleSheet({
-			backButton: {
-				flexDirection: "row",
-				paddingLeft: 20,
-			},
-			backButtonText: {
-				color: "#007AFF",
-				marginLeft: 4
-			}
-		});
+		const stylesheet = createStyleSheet((theme) => ({
+      backButton: {
+        flexDirection: 'row',
+        paddingLeft: 20,
+      },
+      backButtonText: {
+        color: theme.colors.azureRadiance,
+        marginLeft: 4,
+      },
+    }));
 	<% } else if (props.stylingPackage?.name === "stylesheet") { %>
 		const styles = StyleSheet.create({
 			backButton: {
@@ -153,7 +162,7 @@
 			</NavigationContainer>
 		);
 	}
-<% } else if (props.navigationPackage?.options.type === 'drawer') { %>
+	<% } else if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
 		import { NavigationContainer } from "@react-navigation/native";
 		import { createStackNavigator } from '@react-navigation/stack';
 	
@@ -163,6 +172,7 @@
 		export type RootStackParamList = {
 			DrawerNavigator: undefined;
 			Modal: undefined;
+      TabNavigator: undefined;
 		};
 	
 		const Stack = createStackNavigator<RootStackParamList>();
@@ -179,7 +189,7 @@
 						<Stack.Screen
 							name="Modal"
 							component={Modal}
-							options={{ presentation: "modal" }}
+							options={{ presentation: "modal", headerLeft: () => null }}
 						/>
 					</Stack.Navigator>
 				</NavigationContainer>