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

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

@@ -1,25 +1,27 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
+import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { StackScreenProps } from '@react-navigation/stack';
-<% if (props.stylingPackage?.name === "unistyles") {%>
+<% if (props.stylingPackage?.name === 'unistyles') { %>
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
-import { Pressable } from "react-native";
+import { Pressable } from 'react-native';
+<% } else if (props.navigationPackage?.options.type === 'drawer + tabs' ) { %>
+import { StyleSheet } from 'react-native';
 <% } else { %>
-import { Pressable, StyleSheet } from "react-native";
+import { Pressable, StyleSheet } from 'react-native';
 <% } %>
 
 import { RootStackParamList } from '.';
-import One from "../screens/one";
-import Two from "../screens/two";
+import One from '../screens/one';
+import Two from '../screens/two';
 
 const Tab = createBottomTabNavigator();
 
 function TabBarIcon(props: {
-  name: React.ComponentProps<typeof FontAwesome>["name"];
+  name: React.ComponentProps<typeof FontAwesome>['name'];
   color: string;
 }) {
-  <% if (props.stylingPackage?.name === "unistyles") {%>
-  const {styles} = useStyles(stylesheet) 
+  <% if (props.stylingPackage?.name === 'unistyles') {%>
+  const { styles } = useStyles(stylesheet) 
   <% } %>
   return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
 }
@@ -27,48 +29,53 @@ function TabBarIcon(props: {
 type Props = StackScreenProps<RootStackParamList, 'TabNavigator'>;
 
 export default function TabLayout({ navigation }: Props) {
-  <% if (props.stylingPackage?.name === "unistyles") {%>
-  const {styles} = useStyles(stylesheet) 
+  <% if (props.stylingPackage?.name === 'unistyles') {%>
+  const { styles } = useStyles(stylesheet) 
   <% } %>
   
   return (
     <Tab.Navigator
       screenOptions={{
-        tabBarActiveTintColor: "black",
+        tabBarActiveTintColor: 'black',
+      <% if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
+        headerShown: false,
+      <% } %>
       }}>
       <Tab.Screen
-        name="One"
+        name='One'
         component={One}
         options={{
-          title: "Tab One",
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          title: 'Tab One',
+          tabBarIcon: ({ color }) => <TabBarIcon name='code' color={color} />,
+        <% if (props.navigationPackage?.options.type === 'tabs') { %>
           headerRight: () => (
-            <Pressable onPress={() => navigation.navigate("Modal")}>
+            <Pressable onPress={() => navigation.navigate('Modal')}>
               {({ pressed }) => (
                 <FontAwesome
-                  name="info-circle"
+                  name='info-circle'
                   size={25}
-                  color="gray"
+                  color='gray'
                   style={[styles.headerRight, { opacity: pressed ? 0.5 : 1 }]}
                 />
               )}
             </Pressable>
-          ),
+            )
+        <% } %>
         }}
       />
       <Tab.Screen
-        name="Two"
+        name='Two'
         component={Two}
         options={{
-          title: "Tab Two",
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          title: 'Tab Two',
+          tabBarIcon: ({ color }) => <TabBarIcon name='code' color={color} />,
         }}
       />
     </Tab.Navigator>
   );
 }
 
-<% if (props.stylingPackage?.name === "unistyles") {%>
+<% if (props.stylingPackage?.name === 'unistyles') { %>
 const stylesheet = createStyleSheet({
   headerRight: {
     marginRight: 15

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/home.tsx.ejs

@@ -0,0 +1,83 @@
+<% if (props.stylingPackage?.name === 'nativewind') { %>
+  import { Text, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === 'tamagui') { %>
+  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 if (props.stylingPackage?.name === 'stylesheet') { %>
+  import { StyleSheet, Text, View } from 'react-native';
+<% } %>
+
+const Page = () => {
+  <% if (props.stylingPackage?.name === 'unistyles') { %>
+    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}>Home</Text>
+      <View className={styles.separator} />
+      <EditScreenInfo path='app/(tabs)/index.tsx' />
+    </View>
+  );
+  <% } else if (props.stylingPackage?.name === 'tamagui') { %>
+      return (
+    <Theme name='light'>
+      <YStack flex={1} alignItems='center' justifyContent='center'>
+        <H2>Home</H2>
+        <Separator />
+      </YStack>
+    </Theme>
+  );    
+  <% } else if (props.stylingPackage?.name === 'restyle') { %>
+    return (
+      <Box flex={1} alignItems='center' justifyContent='center'>
+        <Text variant='title'>Home</Text>
+        <Box height={1} marginVertical='l_32' width='80%' />
+      </Box>
+    );
+  <% } else { %>
+      return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Home</Text>
+      <View style={styles.separator} />
+    </View>
+  );
+  <% } %>
+}
+
+export default Page;
+
+<% if (props.stylingPackage?.name === 'nativewind') { %>
+  const styles = {
+  container: `items-center flex-1 justify-center`,
+  separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
+  title: `text-xl font-bold`
+};
+<% } else if (props.stylingPackage?.name === 'stylesheet') { %>
+  const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  separator: {
+    height: 1,
+    marginVertical: 30,
+    width: '80%',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  }
+});
+<% } %>

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/build/types/types.d.ts

@@ -6,7 +6,7 @@ export interface CliFlags {
     packageManager: PackageManager;
 }
 export declare const availablePackages: readonly ["@react-navigation/drawer", "expo-router", "expoRouter", "firebase", "nativewind", "react-navigation", "reactNavigation", "react-native-gesture-handler", "react-native-reanimated", "reactnavigation", "stylesheet", "supabase", "tamagui", "restyle", "unistyles"];
-export type NavigationTypes = 'stack' | 'tabs' | 'drawer' | undefined;
+export type NavigationTypes = 'stack' | 'tabs' | 'drawer + tabs' | undefined;
 export type PackageManager = 'yarn' | 'npm' | 'pnpm' | 'bun';
 export type AvailablePackages = {
     name: (typeof availablePackages)[number];