create-expo-stack 2.4.0-next.1fb5698 → 2.4.0-next.2c00bdf

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

@@ -1,13 +1,16 @@
+<% 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 +20,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 +46,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/stack/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({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 20,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+    },
+    link: {
+      marginTop: 16,
+      paddingVertical: 16,
+    },
+    linkText: {
+      fontSize: 14,
+      color: '#2e78b7',
+    },
+  });
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   const styles = StyleSheet.create({
     container: {

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

@@ -8,6 +8,9 @@
 <% } else if (props.stylingPackage?.name === "restyle") { %>
   import { Box, Text } from 'theme';
   import { TouchableOpacity } from 'react-native';
+<% } 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";
 <% } %>
@@ -17,7 +20,19 @@ import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 export default function Details() {
 	const { name } = useLocalSearchParams();
   const router = useRouter();
-	<% if (props.stylingPackage?.name === "nativewind") { %>
+
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles, theme } = useStyles(stylesheet);
+
+    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}>
@@ -84,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 /> }} />
@@ -105,6 +128,25 @@ export default function Details() {
 		title: "text-[64px] font-bold",
 		subtitle: "text-4xl text-gray-700",
 	};
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+	const stylesheet = createStyleSheet((theme) => ({
+    backButton: {
+      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

@@ -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%",