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

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

@@ -5,17 +5,25 @@
 <% } 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";
 <% } %>
 
+import EditScreenInfo from "../../components/edit-screen-info";
+
 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 +65,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: {
@@ -82,6 +73,7 @@ export default Page;
     justifyContent: "center",
   },
   separator: {
+    backgroundColor: '#d1d5db',
     height: 1,
     marginVertical: 30,
     width: "80%",

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,13 +1,19 @@
+<% if (props.stylingPackage?.name === "nativewind") { %>
+import '../global.css';
+<% } %>
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import '../unistyles';
+<% } %>
+
 import 'react-native-gesture-handler';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { Slot } from 'expo-router';
-<% if (props.stylingPackage?.name === "tamagui") { %>
-	import React, { useEffect } from "react";
-	import { TamaguiProvider } from 'tamagui'
-	import { SplashScreen } from "expo-router";
-	import { useFonts } from "expo-font";
+import { Stack } from 'expo-router';
 
-	import config from '../tamagui.config'
+<% if (props.stylingPackage?.name==="tamagui" ) { %>
+  import React, { useEffect } from "react";
+  import { TamaguiProvider } from 'tamagui'
+  import { SplashScreen } from "expo-router";
+  import { useFonts } from "expo-font";
 
 	SplashScreen.preventAutoHideAsync();
 <% }  else if (props.stylingPackage?.name === "restyle") { %>
@@ -17,25 +23,25 @@ import { Slot } from 'expo-router';
 <% } %>
 
 export const unstable_settings = {
-	// Ensure that reloading on `/modal` keeps a back button present.
-	initialRouteName: "(drawer)",
+  // Ensure that reloading on `/modal` keeps a back button present.
+  initialRouteName: "(drawer)",
 };
 
 export default function RootLayout() {
-  	<% if (props.stylingPackage?.name === "tamagui") { %>
-    	const [loaded] = useFonts({
-      		Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
-      		InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf")
-    	});
+  <% if (props.stylingPackage?.name==="tamagui" ) { %>
+    const [loaded] = useFonts({
+      Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
+      InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf")
+    });
 
-    	useEffect(() => {
-      		if (loaded) {
-        		SplashScreen.hideAsync();
-      		}
-    	}, [loaded]);
+    useEffect(() => {
+      if (loaded) {
+        SplashScreen.hideAsync();
+      }
+    }, [loaded]);
 
-    	if (!loaded) return null;
-  	<% } %>
+    if (!loaded) return null;
+  <% } %>
 
   	return (
     	<% if (props.stylingPackage?.name === "tamagui") { %>
@@ -43,13 +49,16 @@ export default function RootLayout() {
     	<% } else if (props.stylingPackage?.name === "restyle") { %>
     		<ThemeProvider theme={theme}>
     	<% } %>
-		  <GestureHandlerRootView style={{ flex: 1 }}>
-      <Slot />
-    </GestureHandlerRootView>
-		<% if (props.stylingPackage?.name === "tamagui") { %>
-			</TamaguiProvider>
-    <% } else if (props.stylingPackage?.name === "restyle") { %>
-    	</ThemeProvider>
-    <% } %>
-  	);
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <Stack>
+            <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
+            <Stack.Screen name="modal" options={{ title: 'Modal', presentation: 'modal' }} />
+          </Stack>
+        </GestureHandlerRootView>
+      <% if (props.stylingPackage?.name === "tamagui") { %>
+        </TamaguiProvider>
+      <% } else if (props.stylingPackage?.name === "restyle") { %>
+        </ThemeProvider>
+      <% } %>
+  );
 }

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

@@ -0,0 +1,96 @@
+ <% if (props.stylingPackage?.name === 'nativewind') { %>
+    import { Platform, Text, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === 'tamagui') { %>
+    import { YStack, Paragraph, Separator, Theme } from 'tamagui';
+	import { Platform } from 'react-native'
+<% } 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';
+<% } %>
+import { StatusBar } from 'expo-status-bar';
+
+import EditScreenInfo from '../components/edit-screen-info';
+
+export default function ModalScreen() {
+    <% 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'} />
+				<Text className={styles.title}>Modal</Text>
+				<View className={styles.separator} />
+				<EditScreenInfo path='app/modal.tsx' />
+			</View>
+		);
+    <% } else if (props.stylingPackage?.name === 'tamagui') { %>
+        return (
+			<Theme name='light'>
+				<YStack flex={1} alignItems='center' justifyContent='center'>
+					<StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
+					<Paragraph>Modal</Paragraph>
+					<Separator />
+					<EditScreenInfo path='app/modal.tsx' />
+				</YStack>
+			</Theme>
+		);
+    <% } else if (props.stylingPackage?.name === 'restyle') { %>
+      return (
+        <Box flex={1} alignItems='center' justifyContent='center'>
+          <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
+          <Text variant='title'>Modal</Text>
+          <Box height={1} marginVertical='l_32' width='80%' />
+          <EditScreenInfo path='app/modal.tsx' />
+        </Box>
+      );
+    <% } else { %>
+        return (
+			<View style={styles.container}>
+				<StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
+				<Text style={styles.title}>Modal</Text>
+				<View style={styles.separator} />
+				<EditScreenInfo path='app/modal.tsx' />
+			</View>
+		);
+    <% } %>
+}
+
+<% 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: {
+      backgroundColor: '#d1d5db',
+			height: 1,
+			marginVertical: 30,
+			width: '80%'
+		},
+		title: {
+			fontSize: 20,
+			fontWeight: 'bold'
+		}
+	});
+<% } %>

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

@@ -0,0 +1,153 @@
+<% if (props.stylingPackage?.name === 'nativewind') { %>
+    import { Text, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === 'tamagui') { %>
+    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>
+                <View className={styles.getStartedContainer}>
+                    <Text className={styles.getStartedText}>
+                        Open up the code for this screen:
+                    </Text>
+                    <View className={styles.codeHighlightContainer + styles.homeScreenFilename}>
+                        <Text>{path}</Text>
+                    </View>
+                    <Text className={styles.getStartedText}>
+                        Change any of the text, save the file, and your app will automatically update.
+                    </Text>
+                </View>
+            </View>
+        );
+    <% } else if (props.stylingPackage?.name === 'tamagui') { %>
+        return (
+            <YStack>
+                <YStack alignItems='center' marginHorizontal='$6'>
+                    <H4>
+                        Open up the code for this screen:
+                    </H4>
+                    <YStack borderRadius='$3' marginVertical='$1'>
+                        <Paragraph>{path}</Paragraph>
+                    </YStack>
+                    <Paragraph>
+                        Change any of the text, save the file, and your app will automatically update.
+                    </Paragraph>
+                </YStack>
+            </YStack>
+        );
+    <% } else if (props.stylingPackage?.name === 'restyle') { %>
+        return (
+          <Box alignItems='center' marginHorizontal='xl_64'>
+            <Text variant='body' lineHeight={24} textAlign='center'>
+              Open up the code for this screen:
+            </Text>
+            <Box borderRadius='s_3' paddingHorizontal='xs_4' marginVertical='s_8'>
+              <Text>{path}</Text>
+            </Box>
+            <Text variant='body' lineHeight={24} textAlign='center'>
+              Change any of the text, save the file, and your app will automatically update.
+            </Text>
+          </Box>
+        );
+    <% } else { %>
+        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>
+        );
+    <% } %>
+}
+
+<% if (props.stylingPackage?.name === 'nativewind') { %>
+    const styles = {
+    codeHighlightContainer: `rounded-md px-1`,
+    getStartedContainer: `items-center mx-12`,
+    getStartedText: `text-lg leading-6 text-center`,
+    helpContainer: `items-center mx-5 mt-4`,
+    helpLink: `py-4`,
+    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: {
+        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
+    }
+    });
+<% } %>

package/build/templates/packages/expo-router/metro.config.js.ejs

@@ -0,0 +1,16 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+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.stylingPackage?.name === "nativewind") { %>
+  module.exports = withNativeWind(config, { input: "./global.css" });
+<% } else { %>
+  module.exports = config;
+<% } %>
+

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,10 @@
+<% if (props.stylingPackage?.name === "nativewind") { %>
+import '../global.css';
+<% } %>
+<% 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: {