create-expo-stack 2.4.0-next.f483b52 → 2.4.1-next.9242c21

package/build/templates/packages/expo-router/stack/app/index.tsx.ejs

@@ -6,6 +6,9 @@
 <% } else if (props.stylingPackage?.name === "restyle") { %>
   import { TouchableOpacity } from 'react-native';
   import { Box, Text, makeStyles } from 'theme';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  import { createStyleSheet, useStyles } from 'react-native-unistyles';
+  import { Text, TouchableOpacity, View } from 'react-native';
 <% } else { %>
 	import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 <% } %>
@@ -18,6 +21,10 @@ export default function Page() {
     const styles = useStyles();
   <% } %>
 
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles, theme } = useStyles(stylesheet);
+  <% } %>
+
 	return (
 		<% if (props.stylingPackage?.name === "nativewind") { %>
 			<View className={styles.container}>
@@ -70,6 +77,21 @@ export default function Page() {
           </Box>
         </Box>
       </>
+    <% } else if (props.stylingPackage?.name === "unistyles") { %>
+      <View style={styles.container}>
+        <View style={styles.main}>
+          <Stack.Screen options={{ title: 'Overview' }} />
+          <View>
+            <Text style={theme.components.title}>Hello World</Text>
+            <Text style={theme.components.subtitle}>This is the first page of your app.</Text>
+          </View>
+          <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
+            <TouchableOpacity style={theme.components.button} >
+              <Text style={theme.components.buttonText}>Show Details</Text>
+            </TouchableOpacity>
+          </Link>
+        </View>
+			</View>
   	<% } else { %>
 			<View style={styles.container}>
 				<View style={styles.main}>
@@ -117,6 +139,20 @@ export default function Page() {
       shadowRadius: 3.84,
     },
   }));
+  <% } else if (props.stylingPackage?.name === "unistyles") { %>
+	const stylesheet = createStyleSheet({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+  main: {
+    flex: 1,
+    maxWidth: 960,
+    marginHorizontal: 'auto',
+    justifyContent: 'space-between',
+  },
+});
+
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
 	const styles = StyleSheet.create({
 		button: {

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

@@ -1,33 +1,44 @@
 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';
+<% } else { %>
 import { Pressable, StyleSheet } from "react-native";
+<% } %>
 
 function TabBarIcon(props: {
   name: React.ComponentProps<typeof FontAwesome>["name"];
   color: string;
 }) {
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+  const {styles} = useStyles(stylesheet)
+  <% } %>
   return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
 }
 
 export default function TabLayout() {
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+  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 }]}
                   />
                 )}
@@ -47,6 +58,16 @@ export default function TabLayout() {
   );
 }
 
+<% if (props.stylingPackage?.name === "unistyles") { %>
+const stylesheet = createStyleSheet({
+  headerRight: {
+    marginRight: 15
+  },
+  tabBarIcon: {
+    marginBottom: -3
+  }
+});
+<% } else { %>
 const styles = StyleSheet.create({
   headerRight: {
     marginRight: 15
@@ -54,4 +75,5 @@ const styles = StyleSheet.create({
   tabBarIcon: {
     marginBottom: -3
   }
-});
+});
+<% } %>

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

@@ -4,6 +4,9 @@
     import { YStack, H2, Separator, Theme } from "tamagui";
 <% } else if (props.stylingPackage?.name === "restyle") { %>
     import { Box, Text } from 'theme';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+    import { useStyles } from 'react-native-unistyles'
+    import { Text, View } from 'react-native';
 <% } else { %>
     import { StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -11,7 +14,17 @@
 import EditScreenInfo from "../../components/edit-screen-info";
 
 export default function TabOneScreen() {
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    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>
@@ -36,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}>
@@ -62,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

@@ -4,6 +4,9 @@
     import { YStack, H2, Separator, Theme } from "tamagui";
 <% } else if (props.stylingPackage?.name === "restyle") { %>
     import { Box, Text } from 'theme';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+    import { useStyles } from 'react-native-unistyles'
+    import { Text, View } from 'react-native';
 <% } else { %>
     import { StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -11,7 +14,17 @@
 import EditScreenInfo from "../../components/edit-screen-info";
 
 export default function TabTwoScreen() {
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+      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>
@@ -36,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}>

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

@@ -1,6 +1,9 @@
 import { Link, Stack } from 'expo-router';
 <% if (props.stylingPackage?.name === "nativewind") {%>
   import { Text, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  import { createStyleSheet, useStyles } from 'react-native-unistyles'
+  import { Text, View } from 'react-native';
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text, View } from 'react-native';
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
@@ -15,6 +18,10 @@ export default function NotFoundScreen() {
   const styles = useStyles();
 <% } %>
 
+<% if (props.stylingPackage?.name === "unistyles") {%>
+  const { styles } = useStyles(stylesheet);
+<% } %>
+
   return (
       <% if (props.stylingPackage?.name === "nativewind") {%>
         <>
@@ -71,6 +78,27 @@ export default function NotFoundScreen() {
     link: `mt-4 pt-4`,
     linkText: `text-base text-[#2e78b7]`,
 	};
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  const stylesheet = createStyleSheet((theme) => ({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 20,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+    },
+    link: {
+      marginTop: 16,
+      paddingVertical: 16,
+    },
+    linkText: {
+      fontSize: 14,
+      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

@@ -6,6 +6,9 @@
 <% } else if (props.stylingPackage?.name === "restyle") { %>
   import { Platform } from 'react-native';
   import { Box, Text } from 'theme';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  import { useStyles } from 'react-native-unistyles'
+  import { Platform, Text, View } from 'react-native';
 <% } else { %>
     import { Platform, StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -14,7 +17,18 @@ import { StatusBar } from "expo-status-bar";
 import EditScreenInfo from "../components/edit-screen-info";
 
 export default function ModalScreen() {
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+      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"} />

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

@@ -4,11 +4,17 @@
     import { YStack, H4, Paragraph } from "tamagui"
 <% } 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';
 <% } else { %>
     import { StyleSheet, Text, View } from "react-native";
 <% } %>
 
 export default function EditScreenInfo({ path }: { path: string }) {
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles } = useStyles(stylesheet);
+  <% } %>
     <% if (props.stylingPackage?.name === "nativewind") { %>
         return (
             <View>
@@ -84,6 +90,36 @@ export default function EditScreenInfo({ path }: { path: string }) {
     helpLinkText: `text-center`,
     homeScreenFilename: `my-2`,
     };
+<% } 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
+      }
+    });
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
     codeHighlightContainer: {

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

@@ -3,6 +3,9 @@ import React from "react";
   import { Text, View } from "react-native";
 <% } 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';
 <% } else { %>
   import { StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -52,6 +55,32 @@ import React from "react";
       </Box>
     );
   }
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  export default function EditScreenInfo({ path }: { path: string }) {
+    const { styles } = useStyles(stylesheet)
+    return (
+      <View>
+        <View style={styles.getStartedContainer}>
+          <Text
+            style={styles.getStartedText}>
+            Open up the code for this screen:
+          </Text>
+
+          <View
+            style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
+            >
+            <Text>{path}</Text>
+          </View>
+
+          <Text
+            style={styles.getStartedText}
+            >
+            Change any of the text, save the file, and your app will automatically update.
+          </Text>
+        </View>
+      </View>
+    );
+  }
 <% } else { %>
   export default function EditScreenInfo({ path }: { path: string }) {
     return (
@@ -88,6 +117,36 @@ import React from "react";
     helpLink: "py-4",
     helpLinkText: "text-center"
   };
+<% } 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
+    }
+  });
 <% } else if (props.stylingPackage?.name !== "restyle") { %>
   const styles = StyleSheet.create({
     codeHighlightContainer: {

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

@@ -8,6 +8,9 @@
 		import { Button, Text } from "tamagui";
 	<% } else if (props.stylingPackage?.name === "restyle") { %>
     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';
 	<% } else { %>
 		import { Text, View, StyleSheet } from "react-native";
 	<% } %>
@@ -26,6 +29,11 @@
     <% if (props.stylingPackage?.name === "restyle") { %>
     const { colors } = useTheme();
     <% } %>
+
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles, theme } = useStyles(stylesheet);
+    <% } %>
+    
 		return (
 			<NavigationContainer>
 				<Stack.Navigator initialRouteName="Overview">
@@ -69,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: () => (
@@ -90,6 +107,17 @@
 			backButton: "flex-row",
 			backButtonText: "text-blue-500 ml-1"
 		};
+  <% } else if (props.stylingPackage?.name === "unistyles") { %>
+		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: {
@@ -134,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';
 	
@@ -144,6 +172,7 @@
 		export type RootStackParamList = {
 			DrawerNavigator: undefined;
 			Modal: undefined;
+      TabNavigator: undefined;
 		};
 	
 		const Stack = createStackNavigator<RootStackParamList>();
@@ -160,7 +189,7 @@
 						<Stack.Screen
 							name="Modal"
 							component={Modal}
-							options={{ presentation: "modal" }}
+							options={{ presentation: "modal", headerLeft: () => null }}
 						/>
 					</Stack.Navigator>
 				</NavigationContainer>