create-expo-stack 2.3.15 → 2.4.0-next.2c00bdf

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

@@ -2,12 +2,26 @@
   import { Text, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
   import { YStack, H2, Separator, Theme } from "tamagui";
-<% } else { %>
+<% } 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 === "nativewind") { %>
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    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>
@@ -24,6 +38,13 @@ const Page = () => {
       </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}>
@@ -50,6 +71,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

@@ -1,14 +1,25 @@
 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") { %>
   import { YStack } from "tamagui";
 	import { Container, Main, Subtitle, Title } from "../tamagui.config";
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  import { Box, Text, makeStyles } from 'theme';
 <% } %>
 
 export default function NotFoundScreen() {
+<% if (props.stylingPackage?.name === "restyle") { %>
+  const styles = useStyles();
+<% } else if (props.stylingPackage?.name === "unistyles") {%>
+  const { styles } = useStyles(stylesheet);
+<% } %>
+
   return (
       <% if (props.stylingPackage?.name === "nativewind") {%>
         <>
@@ -32,6 +43,18 @@ export default function NotFoundScreen() {
             </YStack>
           </Main>
         </Container>
+      <% } else if (props.stylingPackage?.name === "restyle") {%>
+        <>
+          <Stack.Screen options={{ title: 'Oops!' }} />
+          <Box flex={1} justifyContent="center" alignItems="center" padding="ml_24">
+            <Text variant="title">This screen doesn't exist.</Text>
+            <Link href="/" style={styles.link}>
+              <Text variant="body" color="blue">
+                Go to home screen!
+              </Text>
+            </Link>
+          </Box>
+        </>
       <% } else { %>
         <>
           <Stack.Screen options={{ title: "Oops!" }} />
@@ -53,6 +76,27 @@ export default function NotFoundScreen() {
     link: `mt-4 pt-4`,
     linkText: `text-base text-[#2e78b7]`,
 	};
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  const stylesheet = createStyleSheet((theme) => ({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 20,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+    },
+    link: {
+      marginTop: 16,
+      paddingVertical: 16,
+    },
+    linkText: {
+      fontSize: 14,
+      color: theme.colors.astral,
+    },
+  }));
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   const styles = StyleSheet.create({
     container: {
@@ -74,4 +118,11 @@ export default function NotFoundScreen() {
       color: '#2e78b7',
     },
   });
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  const useStyles = makeStyles((theme) => ({
+    link: {
+      marginTop: theme.spacing.m_16,
+      paddingVertical: theme.spacing.m_16,
+    },
+  }));
 <% } %>

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

@@ -1,47 +1,61 @@
+<% 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") { %>
+  import { ThemeProvider } from '@shopify/restyle';
+  
+  import { theme } from '../theme';
+<% } %>
 
 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") { %>
     		<TamaguiProvider config={config}>
+    	<% } else if (props.stylingPackage?.name === "restyle") { %>
+    		<ThemeProvider theme={theme}>
     	<% } %>
-		  <GestureHandlerRootView style={{ flex: 1 }}>
-      <Slot />
-    </GestureHandlerRootView>
-		<% if (props.stylingPackage?.name === "tamagui") { %>
-			</TamaguiProvider>
-		<% } %>
-  	);
+        <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,14 +1,27 @@
 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") { %>
   import { YStack } from "tamagui";
 	import { Container, Main, Subtitle, Title } from "../tamagui.config";
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  import { Box, Text, makeStyles } from 'theme';
 <% } %>
 
 export default function NotFoundScreen() {
+<% if (props.stylingPackage?.name === "restyle") { %>
+  const styles = useStyles();
+<% } %>
+
+<% if (props.stylingPackage?.name === "unistyles") {%>
+  const { styles } = useStyles(stylesheet)
+<% } %>
+
   return (
       <% if (props.stylingPackage?.name === "nativewind") {%>
         <>
@@ -32,6 +45,18 @@ export default function NotFoundScreen() {
             </YStack>
           </Main>
         </Container>
+      <% } else if (props.stylingPackage?.name === "restyle") {%>
+        <>
+          <Stack.Screen options={{ title: 'Oops!' }} />
+          <Box flex={1} justifyContent="center" alignItems="center" padding="ml_24">
+            <Text variant="title">This screen doesn't exist.</Text>
+            <Link href="/" style={styles.link}>
+              <Text variant="body" color="blue">
+                Go to home screen!
+              </Text>
+            </Link>
+          </Box>
+        </>
       <% } else { %>
         <>
           <Stack.Screen options={{ title: "Oops!" }} />
@@ -53,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: {
@@ -74,4 +120,11 @@ export default function NotFoundScreen() {
       color: '#2e78b7',
     },
   });
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  const useStyles = makeStyles((theme) => ({
+    link: {
+      marginTop: theme.spacing.m_16,
+      paddingVertical: theme.spacing.m_16,
+    },
+  }));
 <% } %>

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';
@@ -5,9 +9,11 @@
   import { TamaguiProvider } from 'tamagui';
 
   import config from '../tamagui.config';
-<% } else { %>
-	import { Stack } from "expo-router";
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  import { ThemeProvider } from '@shopify/restyle';
+  import { theme } from 'theme';
 <% } %>
+	import { Stack } from "expo-router";
 
 export default function Layout() {
 
@@ -29,10 +35,14 @@ export default function Layout() {
 	return (
 		<% if (props.stylingPackage?.name === "tamagui") { %>
 			<TamaguiProvider config={config}>
+		<% } else if (props.stylingPackage?.name === "restyle") { %>
+			<ThemeProvider theme={theme}>
 		<% } %>
-		<Stack />
+		    <Stack />
 		<% if (props.stylingPackage?.name === "tamagui") { %>
 			</TamaguiProvider>
+		<% } else if (props.stylingPackage?.name === "restyle") { %>
+			</ThemeProvider >
 		<% } %>
 	);
 }