create-expo-stack 2.4.0-next.43d8ac0 → 2.4.0-next.824bd0e

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

@@ -5,17 +5,23 @@
 <% } 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 if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text, View } from "react-native";
 <% } %>
 
 const Page = () => {
   <% 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}>Home</Text>
+        <View style={theme.components.separator} />
+      </View>
+    );
+  <% } else if (props.stylingPackage?.name === "nativewind") { %>
       return (
     <View className={styles.container}>
       <Text className={styles.title}>Home</Text>
@@ -57,23 +63,6 @@ export default Page;
   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/drawer/app/(drawer)/news.tsx.ejs

@@ -5,18 +5,23 @@
 <% } 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 if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text, View } from "react-native";
 <% } %>
 
 const Page = () => {
   <% 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}>News</Text>
+        <View style={theme.components.separator} />
+      </View>
+    );
+  <% } else if (props.stylingPackage?.name === "nativewind") { %>
       return (
     <View className={styles.container}>
       <Text className={styles.title}>News</Text>
@@ -58,23 +63,6 @@ export default Page;
   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/drawer/app/[...unmatched].tsx.ejs

@@ -3,7 +3,7 @@ import { Link, Stack } from 'expo-router';
   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";
+  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") { %>
@@ -17,7 +17,7 @@ export default function NotFoundScreen() {
 <% if (props.stylingPackage?.name === "restyle") { %>
   const styles = useStyles();
 <% } else if (props.stylingPackage?.name === "unistyles") {%>
-  const {styles} = useStyles(stylesheet);
+  const { styles } = useStyles(stylesheet);
 <% } %>
 
   return (
@@ -77,7 +77,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',
@@ -94,9 +94,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/drawer/app/_layout.tsx.ejs

@@ -1,3 +1,7 @@
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import '../unistyles';
+<% } %>
+
 import 'react-native-gesture-handler';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Slot } from 'expo-router';

package/build/templates/packages/expo-router/stack/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 (

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

@@ -1,3 +1,7 @@
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import '../unistyles';
+<% } %>
+
 <% if (props.stylingPackage?.name === "tamagui") { %>
 	import { useFonts } from 'expo-font';
   import { SplashScreen, Stack } from 'expo-router';

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

@@ -22,10 +22,17 @@ export default function Details() {
   const router = useRouter();
 
   <% if (props.stylingPackage?.name === "unistyles") { %>
-    const {styles} = useStyles(stylesheet);
-  <% } %>
+    const { styles, theme } = useStyles(stylesheet);
 
-	<% if (props.stylingPackage?.name === "nativewind") { %>
+    const BackButton = () => (
+			<TouchableOpacity onPress={router.back}>
+        <View style={styles.backButton}>
+          <Feather name='chevron-left' size={16} color={theme.colors.azureRadiance} />
+          <Text style={styles.backButtonText}>Back</Text>
+        </View>
+			</TouchableOpacity>
+		);
+  <% } else if (props.stylingPackage?.name === "nativewind") { %>
 		const BackButton = () => (
 			<TouchableOpacity onPress={router.back}>
 			<View className={styles.backButton}>
@@ -92,6 +99,14 @@ export default function Details() {
           </Box>
         </Box>
       </>
+    <% } else if (props.stylingPackage?.name === "unistyles") { %>
+      <View style={styles.container}>
+        <Stack.Screen options={{ title: "Details", headerLeft: () => <BackButton /> }} />
+				<View style={styles.main}>
+					<Text style={theme.components.title}>Details</Text>
+					<Text style={theme.components.subtitle}>Showing details for user {name}.</Text>
+				</View>
+			</View>
 		<% } else { %>
 			<View style={styles.container}>
         <Stack.Screen options={{ title: "Details", headerLeft: () => <BackButton /> }} />
@@ -114,32 +129,24 @@ export default function Details() {
 		subtitle: "text-4xl text-gray-700",
 	};
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
-	const stylesheet = createStyleSheet({
+	const stylesheet = createStyleSheet((theme) => ({
     backButton: {
-			flexDirection: "row",
-		},
-		backButtonText: {
-			color: "#007AFF",
-			marginLeft: 4,
-		},
-		container: {
-			flex: 1,
-			padding: 24,
-		},
-		main: {
-			flex: 1,
-			maxWidth: 960,
-			marginHorizontal: "auto",
-		},
-		title: {
-			fontSize: 64,
-			fontWeight: "bold",
-		},
-		subtitle: {
-			fontSize: 36,
-			color: "#38434D",
-		},
-	});
+      flexDirection: 'row',
+    },
+    backButtonText: {
+      color: theme.colors.azureRadiance,
+      marginLeft: 4,
+    },
+    container: {
+      flex: 1,
+      padding: 24,
+    },
+    main: {
+      flex: 1,
+      maxWidth: 960,
+      marginHorizontal: 'auto',
+    },
+  }));
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
 	const styles = StyleSheet.create({
     backButton: {

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

@@ -8,7 +8,7 @@
   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";
+  import { Text, TouchableOpacity, View } from 'react-native';
 <% } else { %>
 	import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 <% } %>
@@ -22,7 +22,7 @@ export default function Page() {
   <% } %>
 
   <% if (props.stylingPackage?.name === "unistyles") { %>
-    const {styles} = useStyles(stylesheet);
+    const { styles, theme } = useStyles(stylesheet);
   <% } %>
 
 	return (
@@ -77,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}>
@@ -126,47 +141,18 @@ export default function Page() {
   }));
   <% } else if (props.stylingPackage?.name === "unistyles") { %>
 	const stylesheet = createStyleSheet({
-		button: {
-			alignItems: "center",
-			backgroundColor: "#6366F1",
-			borderRadius: 24,
-			elevation: 5,
-			flexDirection: "row",
-			justifyContent: "center",
-			padding: 16,
-			shadowColor: "#000",
-			shadowOffset: {
-			height: 2,
-			width: 0
-			},
-			shadowOpacity: 0.25,
-			shadowRadius: 3.84
-		},
-		buttonText: {
-			color: "#FFFFFF",
-			fontSize: 16,
-			fontWeight: "600",
-			textAlign: "center",
-		},
-		container: {
-			flex: 1,
-			padding: 24,
-		},
-		main: {
-			flex: 1,
-			maxWidth: 960,
-			marginHorizontal: "auto",
-			justifyContent: "space-between",
-		},
-		title: {
-			fontSize: 64,
-			fontWeight: "bold",
-		},
-		subtitle: {
-			color: "#38434D",
-			fontSize: 36,
-		}
-	});
+  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

@@ -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: {

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,7 @@
+<% 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/react-navigation/App.tsx.ejs

@@ -1,3 +1,6 @@
+<% 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/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: {

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

@@ -3,7 +3,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { StackScreenProps } from '@react-navigation/stack';
 <% 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,7 +19,7 @@ function TabBarIcon(props: {
   color: string;
 }) {
   <% if (props.stylingPackage?.name === "unistyles") {%>
-  const {styles} = useStyles(stylesheet) 
+  const { styles } = useStyles(stylesheet) 
   <% } %>
   return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
 }
@@ -28,7 +28,7 @@ type Props = StackScreenProps<RootStackParamList, 'TabNavigator'>;
 
 export default function TabLayout({ navigation }: Props) {
   <% if (props.stylingPackage?.name === "unistyles") {%>
-  const {styles} = useStyles(stylesheet) 
+  const { styles } = useStyles(stylesheet) 
   <% } %>
   
   return (

package/build/templates/packages/react-navigation/screens/details.tsx.ejs

@@ -8,7 +8,7 @@ import { RouteProp, useRoute } from "@react-navigation/native";
 	import { Box, Text } from 'theme';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
   import { createStyleSheet, useStyles } from 'react-native-unistyles'
-	import { View, Text } from "react-native";
+	import { View, Text } from 'react-native';
 <% } else { %>
 	import { View, StyleSheet, Text } from "react-native";
 <% } %>
@@ -50,12 +50,12 @@ export default function Details() {
       </Box>
     );
   <% } else if (props.stylingPackage?.name === "unistyles") { %>
-    const {styles} = useStyles(stylesheet)
+    const { styles, theme } = useStyles(stylesheet)
     return (
       <View style={styles.container}>
         <View style={styles.main}>
-          <Text style={styles.title}>Details</Text>
-          <Text style={styles.subtitle}>Showing details for user {router.params.name}.</Text>
+          <Text style={theme.components.title}>Details</Text>
+          <Text style={theme.components.subtitle}>Showing details for user {router.params.name}.</Text>
         </View>
       </View>
     );
@@ -87,15 +87,7 @@ export default function Details() {
 		main: {
 			flex: 1,
 			maxWidth: 960,
-			marginHorizontal: "auto",
-		},
-		title: {
-			fontSize: 64,
-			fontWeight: "bold",
-		},
-		subtitle: {
-			fontSize: 36,
-			color: "#38434D",
+			marginHorizontal: 'auto',
 		},
 	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>

package/build/templates/packages/react-navigation/screens/modal.tsx.ejs

@@ -7,8 +7,8 @@
     import { Platform } from 'react-native';
     import { Box, Text, makeStyles } 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";
 <% } %>
@@ -49,13 +49,13 @@ export default function Modal() {
       </Box>
     );
   <% } else if (props.stylingPackage?.name === "unistyles") { %>
-    const {styles} = useStyles(stylesheet)
+    const { theme } = useStyles()
     return (
-			<View style={styles.container}>
-				<StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
-				<Text style={styles.title}>Modal</Text>
-				<View style={styles.separator} />
-				<EditScreenInfo path="src/screens/modal.tsx" />
+			<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='src/screens/modal.tsx' />
 			</View>
 		);
 	<% } else { %>
@@ -86,25 +86,6 @@ export default function Modal() {
       width: '80%',
     },
   }));
-<% } else if (props.stylingPackage?.name === "unistyles") { %>
-  const stylesheet = createStyleSheet({
-		container: {
-			alignItems: "center",
-			flex: 1,
-			justifyContent: "center"
-		},
-		separator: {
-			backgroundColor: "gray",
-			height: 1,
-			marginVertical: 30,
-			opacity: 0.25,
-			width: "80%",
-		},
-		title: {
-			fontSize: 20,
-			fontWeight: "bold"
-		}
-	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   	const styles = StyleSheet.create({
 		container: {

package/build/templates/packages/react-navigation/screens/one.tsx.ejs

@@ -5,8 +5,8 @@
 <% } else if (props.stylingPackage?.name === "restyle") { %>
     import { Box, Text, makeStyles } 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";
 <% } %>
@@ -43,12 +43,12 @@ export default function TabOneScreen() {
       </Box>
     );   
   <% } else if (props.stylingPackage?.name === "unistyles") { %>
-    const { styles } = useStyles(stylesheet)
+    const { theme } = useStyles()
 		return (
-			<View style={styles.container}>
-				<Text style={styles.title}>Tab One</Text>
-				<View style={styles.separator} />
-				<EditScreenInfo path="src/screens/one.tsx" />
+			<View style={theme.components.container}>
+				<Text style={theme.components.title}>Tab One</Text>
+				<View style={theme.components.separator} />
+				<EditScreenInfo path='src/screens/one.tsx' />
 			</View>
 		);
 	<% } else { %>
@@ -78,25 +78,6 @@ export default function TabOneScreen() {
         width: '80%',
       },
     }));
-<% } else if (props.stylingPackage?.name === "unistyles") { %>
-  	const stylesheet = createStyleSheet({
-		container: {
-			alignItems: "center",
-			flex: 1,
-			justifyContent: "center",
-		},
-		separator: {
-			backgroundColor: "gray",
-			height: 1,
-			marginVertical: 30,
-			opacity: 0.25,
-			width: "80%",
-		},
-		title: {
-			fontSize: 20,
-			fontWeight: "bold",
-		}
-	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   	const styles = StyleSheet.create({
 		container: {

package/build/templates/packages/react-navigation/screens/overview.tsx.ejs

@@ -10,7 +10,7 @@ import { StackNavigationProp } from "@react-navigation/stack";
   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";
+	import { Text, TouchableOpacity, View } from 'react-native';
 <% } else { %>
 	import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 <% } %>
@@ -70,16 +70,16 @@ export default function Overview() {
       </Box>
     );
 	<% } else if (props.stylingPackage?.name === "unistyles") { %>
-    const {styles} = useStyles(stylesheet)
+    const { styles, theme } = useStyles(stylesheet)
 		return (
 			<View style={styles.container}>
 				<View style={styles.main}>
 					<View>
-						<Text style={styles.title}>Hello World</Text>
-						<Text style={styles.subtitle}>This is the first page of your app.</Text>
+						<Text style={theme.components.title}>Hello World</Text>
+						<Text style={theme.components.subtitle}>This is the first page of your app.</Text>
 					</View>
-					<TouchableOpacity style={styles.button} onPress={() => navigation.navigate("Details", { name: "Dan" })}>
-						<Text style={styles.buttonText}>Show Details</Text>
+					<TouchableOpacity style={theme.components.button} onPress={() => navigation.navigate('Details', { name: 'Dan' })}>
+						<Text style={theme.components.buttonText}>Show Details</Text>
 					</TouchableOpacity>
 				</View>
 			</View>
@@ -131,28 +131,6 @@ export default function Overview() {
   }));
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
   const stylesheet = createStyleSheet({
-		button: {
-			alignItems: "center",
-			backgroundColor: "#6366F1",
-			borderRadius: 24,
-			elevation: 5,
-			flexDirection: "row",
-			justifyContent: "center",
-			padding: 16,
-			shadowColor: "#000",
-			shadowOffset: {
-			height: 2,
-			width: 0
-			},
-			shadowOpacity: 0.25,
-			shadowRadius: 3.84
-		},
-		buttonText: {
-			color: "#FFFFFF",
-			fontSize: 16,
-			fontWeight: "600",
-			textAlign: "center",
-		},
 		container: {
 			flex: 1,
 			padding: 24,
@@ -160,17 +138,9 @@ export default function Overview() {
 		main: {
 			flex: 1,
 			maxWidth: 960,
-			marginHorizontal: "auto",
-			justifyContent: "space-between",
-		},
-		title: {
-			fontSize: 64,
-			fontWeight: "bold",
+			marginHorizontal: 'auto',
+			justifyContent: 'space-between',
 		},
-		subtitle: {
-			color: "#38434D",
-			fontSize: 36,
-		}
 	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
 	const styles = StyleSheet.create({

package/build/templates/packages/react-navigation/screens/two.tsx.ejs

@@ -5,8 +5,8 @@
 <% } else if (props.stylingPackage?.name === "restyle") { %>
     import { Box, Text, makeStyles } 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";
 <% } %>
@@ -33,12 +33,12 @@ export default function TabTwoScreen() {
 			</Theme>
 		);    
   <% } else if (props.stylingPackage?.name === "unistyles") { %>
-    const { styles } = useStyles(stylesheet)
+    const { theme } = useStyles()
 		return (
-			<View style={styles.container}>
-				<Text style={styles.title}>Tab Two</Text>
-				<View style={styles.separator} />
-				<EditScreenInfo path="src/screens/two.tsx" />
+			<View style={theme.components.container}>
+				<Text style={theme.components.title}>Tab Two</Text>
+				<View style={theme.components.separator} />
+				<EditScreenInfo path='src/screens/two.tsx' />
 			</View>
 		);
 	<% } else if (props.stylingPackage?.name === "restyle") { %>
@@ -78,25 +78,6 @@ export default function TabTwoScreen() {
         width: '80%',
       },
     }));
-<% } else if (props.stylingPackage?.name === "unistyles") { %>
-  	const stylesheet = createStyleSheet({
-		container: {
-			alignItems: "center",
-			flex: 1,
-			justifyContent: "center",
-		},
-		separator: {
-			backgroundColor: "gray",
-			height: 1,
-			marginVertical: 30,
-			opacity: 0.25,
-			width: "80%",
-		},
-		title: {
-			fontSize: 20,
-			fontWeight: "bold",
-		}
-	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   	const styles = StyleSheet.create({
 		container: {

package/build/templates/packages/unistyles/theme.ts.ejs

@@ -1,26 +1,76 @@
-export const lightTheme = {
-  colors: {
-    background: '#ffffff',
-    azureRadiance: '#007AFF',
-    limedSpruce: '#38434D',
-    cornflowerBlue: '#6366F1'
-  },
-  margins: {
-    sm: 2,
-    md: 4,
-    lg: 8,
-    xl: 12
-  }
+const colors = {
+  white: '#ffffff',
+  azureRadiance: '#007AFF',
+  limedSpruce: '#38434D',
+  cornflowerBlue: '#6366F1',
+  astral: '#2E78B7'
 } as const;
 
-export const darkTheme = {
-  colors: {
-    // define dark theme colors here
+export const lightTheme = {
+  colors,
+  components: {
+    <% if (props.navigationPackage?.options.type === 'tabs' || props.navigationPackage?.options.type === 'drawer') {%>
+    container: {
+			alignItems: 'center',
+			flex: 1,
+			justifyContent: 'center'
+		},
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+    },
+    <% if (props.navigationPackage?.name === 'expo-router') { %>
+    separator: {
+      height: 1,
+      marginVertical: 30,
+      width: '80%',
+    },
+    <% } else { %>
+    separator: {
+      backgroundColor: 'gray',
+      height: 1,
+      marginVertical: 30,
+      opacity: 0.25,
+      width: '80%',
+    },
+    <% } %>
+    <% } else { %>
+     button: {
+      alignItems: 'center',
+      backgroundColor: colors.cornflowerBlue,
+      borderRadius: 24,
+      elevation: 5,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      padding: 16,
+      shadowColor: '#000',
+      shadowOffset: {
+        height: 2,
+        width: 0,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+    },
+    buttonText: {
+      color: colors.white,
+      fontSize: 16,
+      fontWeight: '600',
+      textAlign: 'center',
+    },
+    title: {
+      fontSize: 64,
+      fontWeight: 'bold',
+    },
+    subtitle: {
+      color: colors.limedSpruce,
+      fontSize: 36,
+    },
+    <% } %>
   },
   margins: {
     sm: 2,
     md: 4,
     lg: 8,
-    xl: 12
-  }
+    xl: 12,
+  },
 } as const;

package/build/templates/packages/unistyles/unistyles.ts.ejs

@@ -1,13 +1,13 @@
-import { breakpoints } from './breakpoints';
-import { darkTheme, lightTheme } from './theme';
 import { UnistylesRegistry } from 'react-native-unistyles';
 
+import { breakpoints } from './breakpoints';
+import { lightTheme } from './theme';
+
 type AppBreakpoints = typeof breakpoints;
 
 // if you defined themes
 type AppThemes = {
   light: typeof lightTheme;
-  dark: typeof darkTheme;
 };
 
 // override library types
@@ -19,10 +19,9 @@ declare module 'react-native-unistyles' {
 UnistylesRegistry.addBreakpoints(breakpoints)
   .addThemes({
     light: lightTheme,
-    dark: darkTheme
     // register other themes with unique names
   })
   .addConfig({
     // you can pass here optional config described below
-    adaptiveThemes: true
+    adaptiveThemes: true,
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-expo-stack",
-	"version": "2.4.0-next.43d8ac0",
+	"version": "2.4.0-next.824bd0e",
 	"description": "CLI tool to initialize a React Native application with Expo",
 	"repository": {
 		"type": "git",