create-expo-stack 2.20.0-next.7f9c8bc → 2.20.0

package/build/templates/packages/expo-router/drawer/app/+not-found.tsx.ejs

@@ -11,67 +11,33 @@ import { Link, Stack } from 'expo-router';
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text } from 'react-native';
 
-  import { Container } from '~/components/Container';
-<% } 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';
-
   import { Container } from '~/components/Container';
 <% } %>
 
 export default function NotFoundScreen() {
-<% if (props.stylingPackage?.name === "restyle") { %>
-  const styles = useStyles();
-<% } %>
 
   return (
-      <% if (props.stylingPackage?.name === "nativewind") {%>
-        <>
-          <Stack.Screen options={{ title: "Oops!" }} />
-          <Container>
-            <Text className={styles.title}>{"This screen doesn't exist."}</Text>
-            <Link href="/" className={styles.link}>
-              <Text className={styles.linkText}>Go to home screen!</Text>
-            </Link>
-          </Container>
-        </>
-      <% } else if (props.stylingPackage?.name === "tamagui") {%>
+    <% if (props.stylingPackage?.name === "nativewind") {%>
+      <>
+        <Stack.Screen options={{ title: "Oops!" }} />
+        <Container>
+          <Text className={styles.title}>{"This screen doesn't exist."}</Text>
+          <Link href="/" className={styles.link}>
+            <Text className={styles.linkText}>Go to home screen!</Text>
+          </Link>
+        </Container>
+      </>
+    <% } else { %>
+      <>
+        <Stack.Screen options={{ title: "Oops!" }} />
         <Container>
-          <Stack.Screen options={{ title: "Oops!" }} />
-          <Main>
-            <YStack>
-              <Title>{"This screen doesn't exist."}</Title>
-              <Link href="/">
-                <Subtitle>Go to home screen!</Subtitle>
-              </Link>
-            </YStack>
-          </Main>
+          <Text style={styles.title}>{"This screen doesn't exist."}</Text>
+          <Link href="/" style={styles.link}>
+            <Text style={styles.linkText}>Go to home screen!</Text>
+          </Link>
         </Container>
-      <% } else if (props.stylingPackage?.name === "restyle") {%>
-        <>
-          <Stack.Screen options={{ title: 'Oops!' }} />
-          <Container>
-            <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>
-          </Container>
-        </>
-      <% } else { %>
-        <>
-          <Stack.Screen options={{ title: "Oops!" }} />
-          <Container>
-            <Text style={styles.title}>{"This screen doesn't exist."}</Text>
-            <Link href="/" style={styles.link}>
-              <Text style={styles.linkText}>Go to home screen!</Text>
-            </Link>
-          </Container>
-        </>
-      <% } %>
+      </>
+    <% } %>
   );
 }
 
@@ -112,11 +78,4 @@ 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

@@ -13,23 +13,8 @@ import 'react-native-gesture-handler';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Stack } 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 config from '../tamagui.config';
-
-	SplashScreen.preventAutoHideAsync();
-<% }  else if (props.stylingPackage?.name === "restyle") { %>
-  import { ThemeProvider } from '@shopify/restyle';
-
-  import { theme } from '../theme';
-<% } %>
-
 <% if (props.stylingPackage?.name === "unistyles") { %>
-    import { useUnistyles } from "react-native-unistyles";
+  import { useUnistyles } from "react-native-unistyles";
 <% } %>
 
 <% if (props.analyticsPackage?.name === "vexo-analytics") { %>
@@ -44,30 +29,11 @@ export const unstable_settings = {
 };
 
 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")
-    });
-
-    useEffect(() => {
-      if (loaded) {
-        SplashScreen.hideAsync();
-      }
-    }, [loaded]);
-
-    if (!loaded) return null;
-  <% } %>
   <% if (props.stylingPackage?.name === "unistyles") { %>
     const { theme } = useUnistyles();
   <% } %>
 
-  	return (
-    	<% if (props.stylingPackage?.name === "tamagui") { %>
-    		<TamaguiProvider config={config}>
-    	<% } else if (props.stylingPackage?.name === "restyle") { %>
-    		<ThemeProvider theme={theme}>
-    	<% } %>
+  return (
         <GestureHandlerRootView style={{ flex: 1 }}>
          <% if (props.stylingPackage?.name === "unistyles") { %>
             <Stack
@@ -95,10 +61,5 @@ export default function RootLayout() {
             <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/stack/app/+not-found.tsx.ejs

@@ -1,88 +1,59 @@
 import { Link, Stack } from 'expo-router';
 <% if (props.stylingPackage?.name === "nativewind") {%>
-  import { Text } from 'react-native';
+  import { Text, View } from 'react-native';
 
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
   import { StyleSheet } from 'react-native-unistyles'
-  import { Text } from 'react-native';
+  import { Text, View } from 'react-native';
 
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
-  import { StyleSheet, Text } from 'react-native';
+  import { StyleSheet, Text, View } from 'react-native';
 
-  import { Container } from '~/components/Container';
-<% } 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';
-
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } %>
 
 export default function NotFoundScreen() {
-<% if (props.stylingPackage?.name === "restyle") { %>
-  const styles = useStyles();
-<% } %>
 
   return (
-      <% if (props.stylingPackage?.name === "nativewind") {%>
-        <>
-          <Stack.Screen options={{ title: "Oops!" }} />
-          <Container>
-            <Text className={styles.title}>{"This screen doesn't exist."}</Text>
-            <Link href="/" className={styles.link}>
-              <Text className={styles.linkText}>Go to home screen!</Text>
-            </Link>
-          </Container>
-        </>
-      <% } else if (props.stylingPackage?.name === "tamagui") {%>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
+      <View className={styles.container}>
+        <Stack.Screen options={{ title: "Oops!" }} />
+        <Container>
+          <Text className={styles.title}>{"This screen doesn't exist."}</Text>
+          <Link href="/" className={styles.link}>
+            <Text className={styles.linkText}>Go to home screen!</Text>
+          </Link>
+        </Container>
+      </View>
+    <% } else { %>
+      <View style={styles.container}>
+        <Stack.Screen options={{ title: "Oops!" }} />
         <Container>
-          <Stack.Screen options={{ title: "Oops!" }} />
-          <Main>
-            <YStack>
-              <Title>{"This screen doesn't exist."}</Title>
-              <Link href="/">
-                <Subtitle>Go to home screen!</Subtitle>
-              </Link>
-            </YStack>
-          </Main>
+          <Text style={styles.title}>{"This screen doesn't exist."}</Text>
+          <Link href="/" style={styles.link}>
+            <Text style={styles.linkText}>Go to home screen!</Text>
+          </Link>
         </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!" }} />
-          <Container>
-            <Text style={styles.title}>{"This screen doesn't exist."}</Text>
-            <Link href="/" style={styles.link}>
-              <Text style={styles.linkText}>Go to home screen!</Text>
-            </Link>
-          </Container>
-        </>
-      <% } %>
+      </View>
+    <% } %>
   );
 }
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
   const styles = {
+    container: `flex flex-1 bg-white`,
     title: `text-xl font-bold`,
     link: `mt-4 pt-4`,
     linkText: `text-base text-[#2e78b7]`,
 	};
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
 const styles = StyleSheet.create((theme) => ({
+    container: {
+      flex: 1,
+      backgroundColor: 'white',
+    },
     title: {
       fontSize: 20,
       fontWeight: 'bold',
@@ -99,6 +70,10 @@ const styles = StyleSheet.create((theme) => ({
 }));
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
 const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: 'white',
+    },
     title: {
       fontSize: 20,
       fontWeight: 'bold',
@@ -112,11 +87,4 @@ const styles = StyleSheet.create({
       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

@@ -8,18 +8,6 @@
 <% if (props.internalizationPackage?.name === "i18next") { %>
   import '../translation';
 <% } %>
-
-<% if (props.stylingPackage?.name === "tamagui") { %>
-	import { useFonts } from 'expo-font';
-  import { SplashScreen, Stack } from 'expo-router';
-  import { useEffect } from 'react';
-  import { TamaguiProvider } from 'tamagui';
-
-  import config from '../tamagui.config';
-<% } else if (props.stylingPackage?.name === "restyle") { %>
-  import { ThemeProvider } from '@shopify/restyle';
-  import { theme } from 'theme';
-<% } %>
 	import { Stack } from "expo-router";
 
 <% if (props.analyticsPackage?.name === "vexo-analytics") { %>
@@ -32,46 +20,22 @@ export default function Layout() {
   <% if (props.stylingPackage?.name === "unistyles") { %>
     const { theme } = useUnistyles();
   <% } %>
-  <% 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]);
-
-		if (!loaded) return null;
-  <% } %>
 
 	return (
-		<% if (props.stylingPackage?.name === "tamagui") { %>
-			<TamaguiProvider config={config}>
-		<% } else if (props.stylingPackage?.name === "restyle") { %>
-			<ThemeProvider theme={theme}>
-		<% } %>
-        <% if (props.stylingPackage?.name === "unistyles") { %>
-            <Stack
-                screenOptions={{
-                    headerStyle: {
-                        backgroundColor: theme.colors.background,
-                    },
-                    headerTitleStyle: {
-                        color: theme.colors.typography,
-                    },
-                    headerTintColor: theme.colors.typography
-                }}
-            />
-        <% } else { %>
-            <Stack />
-        <% } %>
-		<% if (props.stylingPackage?.name === "tamagui") { %>
-			</TamaguiProvider>
-		<% } else if (props.stylingPackage?.name === "restyle") { %>
-			</ThemeProvider >
-		<% } %>
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+      <Stack
+        screenOptions={{
+          headerStyle: {
+            backgroundColor: theme.colors.background,
+          },
+          headerTitleStyle: {
+            color: theme.colors.typography,
+          },
+          headerTintColor: theme.colors.typography
+        }}
+      />
+    <% } else { %>
+      <Stack />
+    <% } %>
 	);
 }

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

@@ -1,17 +1,49 @@
+<% if (props.stylingPackage?.name === "stylesheet") { %>
+import { StyleSheet, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+import { StyleSheet } from 'react-native-unistyles';
+import { View } from 'react-native';
+<% } else { %>
+import { View } from 'react-native';
+<% } %>
 import { Stack, useLocalSearchParams } from 'expo-router';
 
-import { Container } from '~/components/Container';
-import { ScreenContent } from '~/components/ScreenContent';
+import { Container } from '@/components/Container';
+import { ScreenContent } from '@/components/ScreenContent';
 
 export default function Details() {
   const { name } = useLocalSearchParams();
 
   return (
-    <>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
+      <View className={styles.container}>
+    <% } else { %>
+      <View style={styles.container}>
+    <% } %>
       <Stack.Screen options={{ title: 'Details' }} />
       <Container>
         <ScreenContent path="screens/details.tsx" title={`Showing details for user ${name}`} />
       </Container>
-    </>
+    </View>
   );
-}
+}
+
+<% if (props.stylingPackage?.name === "nativewind") { %>
+const styles = {
+  container: "flex flex-1 bg-white",
+}
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+});
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+}));
+<% } %>

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

@@ -1,12 +1,16 @@
 import { Stack, Link } from 'expo-router';
-
-<% if (props.stylingPackage?.name === "unistyles") { %>
+<% if (props.stylingPackage?.name === "stylesheet") { %>
+import { StyleSheet, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
 import { StyleSheet } from 'react-native-unistyles';
+import { View } from 'react-native';
+<% } else { %>
+import { View } from 'react-native';
 <% } %>
 
-import { Button } from '~/components/Button';
-import { Container } from '~/components/Container';
-import { ScreenContent } from '~/components/ScreenContent';
+import { Button } from '@/components/Button';
+import { Container } from '@/components/Container';
+import { ScreenContent } from '@/components/ScreenContent';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
   import { InternalizationExample } from 'components/InternalizationExample';
@@ -14,7 +18,11 @@ import { ScreenContent } from '~/components/ScreenContent';
 
 export default function Home() {
   return (
-    <>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
+      <View className={styles.container}>
+    <% } else { %>
+      <View style={styles.container}>
+    <% } %>
       <Stack.Screen options={{ title: 'Home' }} />
       <Container>
         <ScreenContent path="app/index.tsx" title="Home">
@@ -30,14 +38,29 @@ export default function Home() {
           <% } %>
         </Link>
       </Container>
-    </>
+    </View>
   );
 }
 
-<% if (props.stylingPackage?.name === "unistyles") { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
+const styles = {
+  container: "flex flex-1 bg-white",
+}
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+});
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
 const styles = StyleSheet.create((theme) => ({
-    button: {
-        marginHorizontal: theme.margins.xl,
-    },
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  button: {
+      marginHorizontal: theme.margins.xl,
+  },
 }));
 <% } %>

package/build/templates/packages/expo-router/tabs/app/+not-found.tsx.ejs

@@ -6,64 +6,32 @@ import { Link, Stack } from 'expo-router';
   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();
-<% } %>
 
   return (
-      <% if (props.stylingPackage?.name === "nativewind") {%>
-        <>
-          <Stack.Screen options={{ title: "Oops!" }} />
-          <View className={styles.container}>
-            <Text className={styles.title}>{"This screen doesn't exist."}</Text>
-            <Link href="/" className={styles.link}>
-              <Text className={styles.linkText}>Go to home screen!</Text>
-            </Link>
-          </View>
-        </>
-      <% } else if (props.stylingPackage?.name === "tamagui") {%>
-        <Container>
-          <Stack.Screen options={{ title: "Oops!" }} />
-          <Main>
-            <YStack>
-              <Title>{"This screen doesn't exist."}</Title>
-              <Link href="/">
-                <Subtitle>Go to home screen!</Subtitle>
-              </Link>
-            </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!" }} />
-          <View style={styles.container}>
-            <Text style={styles.title}>{"This screen doesn't exist."}</Text>
-            <Link href="/" style={styles.link}>
-              <Text style={styles.linkText}>Go to home screen!</Text>
-            </Link>
-          </View>
-        </>
-      <% } %>
+    <% if (props.stylingPackage?.name === "nativewind") {%>
+      <>
+        <Stack.Screen options={{ title: "Oops!" }} />
+        <View className={styles.container}>
+          <Text className={styles.title}>{"This screen doesn't exist."}</Text>
+          <Link href="/" className={styles.link}>
+            <Text className={styles.linkText}>Go to home screen!</Text>
+          </Link>
+        </View>
+      </>
+    <% } else { %>
+      <>
+        <Stack.Screen options={{ title: "Oops!" }} />
+        <View style={styles.container}>
+          <Text style={styles.title}>{"This screen doesn't exist."}</Text>
+          <Link href="/" style={styles.link}>
+            <Text style={styles.linkText}>Go to home screen!</Text>
+          </Link>
+        </View>
+      </>
+    <% } %>
   );
 }
 
@@ -116,11 +84,4 @@ 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,
-    },
-  }));
 <% } %>