create-expo-stack 2.20.0-next.ff2bed4 → 2.21.0-next.0cb36d0

package/build/templates/base/tsconfig.json.ejs

@@ -1,24 +1,24 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true,
-    "jsx": "react-jsx"
     <% if (props.flags.importAlias) { %>
-      ,
+    "strict": true,
     "baseUrl": ".",
     "paths": {
       <% if (props.stylingPackage?.name === 'nativewindui') { %>
-        "~/*": [ "./*" ]
+        "@/*": [ "./*" ]
       <% } else { %>  
         <% if  (props.navigationPackage?.name === "expo-router" && props.flags.importAlias === true) { %>
-        "~/*": ["*"]
+        "@/*": ["*"]
         <% } else if  (props.flags.importAlias === true) { %>
-        "~/*": ["src/*"]
+        "@/*": ["src/*"]
         <% } else { %>
         "<%= props.flags.importAlias %>": ["src/*"]
         <% } %>
       <% } %>
     }
+    <% } else { %>
+      "strict": true
     <% } %>
   <% if (props.navigationPackage?.name === 'expo-router') { %>
   },
@@ -26,7 +26,12 @@
     "**/*.ts",
     "**/*.tsx",
     ".expo/types/**/*.ts",
-    "expo-env.d.ts"
+    <% if (props.stylingPackage?.name === 'nativewind' || props.stylingPackage?.name === 'nativewindui') { %>
+      "expo-env.d.ts",
+      "nativewind-env.d.ts"
+    <% } else { %>
+      "expo-env.d.ts"
+    <% } %>
   ]
   <% } else { %>
     }

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/metro.config.js.ejs

@@ -1,7 +1,7 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
 <% if (["nativewind", "nativewindui"].includes(props.stylingPackage?.name)) { %>
-  const { withNativeWind } = require("nativewind/metro");
+  const { withNativewind } = require("nativewind/metro");
 <% } %>
 
 /** @type {import('expo/metro-config').MetroConfig} */
@@ -9,9 +9,9 @@ const { getDefaultConfig } = require('expo/metro-config');
 const config = getDefaultConfig(__dirname);
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  module.exports = withNativeWind(config, { input: "./global.css" });
+  module.exports = withNativewind(config);
 <% } else if (props.stylingPackage?.name === "nativewindui") { %>
-  module.exports = withNativeWind(config, { input: "./global.css", inlineRem: 16 });
+  module.exports = withNativewind(config, { inlineRem: 16 });
 <% } else { %>
   module.exports = config;
 <% } %>

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

@@ -1,88 +1,61 @@
 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';
 <% } 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';
 <% } 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';
 <% } %>
 
 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") {%>
-        <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!" }} />
-          <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>
-        </>
-      <% } %>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
+      <View className={styles.container}>
+        <Stack.Screen options={{ title: "Oops!" }} />
+        <View className={styles.contentContainer}>
+          <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>
+      </View>
+    <% } else { %>
+      <View style={styles.container}>
+        <Stack.Screen options={{ title: "Oops!" }} />
+        <View style={styles.contentContainer}>
+          <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>
+      </View>
+    <% } %>
   );
 }
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
   const styles = {
+    container: `flex flex-1 bg-white`,
+    contentContainer: `flex flex-1 m-6`,
     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',
+    },
+    contentContainer: {
+      flex: 1,
+      margin: 24,
+    },
     title: {
       fontSize: 20,
       fontWeight: 'bold',
@@ -99,6 +72,14 @@ const styles = StyleSheet.create((theme) => ({
 }));
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
 const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: 'white',
+    },
+    contentContainer: {
+      flex: 1,
+      margin: 24,
+    },
     title: {
       fontSize: 20,
       fontWeight: 'bold',
@@ -112,11 +93,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,27 @@ 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 if (props.stylingPackage?.name === "nativewind") { %>
+      <Stack>
+        <Stack.Screen name="index" options={{ title: 'Home' }} />
+        <Stack.Screen name="details" options={{ title: 'Details' }} />
+      </Stack>
+    <% } else { %>
+      <Stack />
+    <% } %>
 	);
 }

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

@@ -1,17 +1,48 @@
+<% 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';
+<% } %>
 import { Stack, useLocalSearchParams } from 'expo-router';
 
-import { Container } from '~/components/Container';
-import { ScreenContent } from '~/components/ScreenContent';
+<% if (props.stylingPackage?.name !== "nativewind") { %>
+import { Container } from '@/components/Container';
+<% } %>
+import { ScreenContent } from '@/components/ScreenContent';
 
 export default function Details() {
   const { name } = useLocalSearchParams();
 
   return (
-    <>
-      <Stack.Screen options={{ title: 'Details' }} />
-      <Container>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
+      <>
+        <Stack.Screen options={{ title: 'Details' }} />
         <ScreenContent path="screens/details.tsx" title={`Showing details for user ${name}`} />
-      </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 === "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,43 +1,91 @@
+<% if (props.stylingPackage?.name === "stylesheet") { %>
+import { StyleSheet, View } from 'react-native';
 import { Stack, Link } from 'expo-router';
-
-<% if (props.stylingPackage?.name === "unistyles") { %>
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
 import { StyleSheet } from 'react-native-unistyles';
+import { Stack, Link } from 'expo-router';
+import { View } from 'react-native';
+<% } else { %>
+import { View } from 'react-native';
+import { router } from 'expo-router';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 <% } %>
 
-import { Button } from '~/components/Button';
-import { Container } from '~/components/Container';
-import { ScreenContent } from '~/components/ScreenContent';
+import { Button } from '@/components/Button';
+<% if (props.stylingPackage?.name !== "nativewind") { %>
+import { Container } from '@/components/Container';
+<% } %>
+import { ScreenContent } from '@/components/ScreenContent';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
   import { InternalizationExample } from 'components/InternalizationExample';
 <% } %>
 
 export default function Home() {
+  <% if (props.stylingPackage?.name === "nativewind") { %>
+    const insets = useSafeAreaInsets();
+  <% } %>
   return (
-    <>
-      <Stack.Screen options={{ title: 'Home' }} />
-      <Container>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
+      <View className="flex-1 px-4 bg-white">
+      <% if (props.internalizationPackage?.name === "i18next") { %>
         <ScreenContent path="app/index.tsx" title="Home">
-        <% if (props.internalizationPackage?.name === "i18next") { %>
           <InternalizationExample />
-        <% } %>
         </ScreenContent>
-        <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
-          <% if (props.stylingPackage?.name === "unistyles") { %>
-              <Button title="Show Details" style={styles.button} />
+      <% } else { %>
+      <ScreenContent path="app/index.tsx" title="Home" />
+      <% } %>
+      <View className={styles.buttonWrapper} style={{ paddingBottom: insets.bottom }}>
+        <Button
+          title="Show Details"
+          onPress={() => router.push({ pathname: '/details', params: { name: 'Dan' } })} 
+        />
+      </View>
+    </View>
+    <% } else { %>
+      <View style={styles.container}>
+        <Stack.Screen options={{ title: 'Home' }} />
+        <Container>
+          <% if (props.internalizationPackage?.name === "i18next") { %>
+            <ScreenContent path="app/index.tsx" title="Home">
+              <InternalizationExample />
+            </ScreenContent>
           <% } else { %>
-              <Button title="Show Details" />
+            <ScreenContent path="app/index.tsx" title="Home" />
           <% } %>
-        </Link>
-      </Container>
-    </>
+          <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
+            <% if (props.stylingPackage?.name === "unistyles") { %>
+                <Button title="Show Details" style={styles.button} />
+            <% } else { %>
+                <Button title="Show Details" />
+            <% } %>
+          </Link>
+        </Container>
+      </View>
+    <% } %>
   );
 }
 
-<% if (props.stylingPackage?.name === "unistyles") { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
+const styles = {
+  buttonWrapper: "w-full",
+  container: "flex flex-1 bg-white px-4",
+}
+<% } 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,
+  },
 }));
 <% } %>