create-expo-stack 2.18.5 → 2.18.6-next.1dd14ce

package/build/cli.js

@@ -33,7 +33,7 @@ function run() {
         if (!isVersionOk) {
             console.error(`Error: rn-new requires Node.js version 20.19.0 or higher, or version 22.0.0 or higher.`);
             console.error(`You are currently running Node.js ${process.versions.node}.`);
-            console.error('Please update your Node.js version.');
+            console.error('Please update your Node version.');
             process.exit(1);
         }
         // enable the following method if you'd like to skip loading one of these core extensions
@@ -46,4 +46,4 @@ function run() {
     });
 }
 exports.run = run;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xpLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vc3JjL2NsaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7QUFBQSxxQ0FBZ0M7QUFFaEM7O0dBRUc7QUFDSCxTQUFzQixHQUFHOztRQUN2QixNQUFNLElBQUksR0FBRyxPQUFPLENBQUMsSUFBSSxDQUFDO1FBQzFCLHVCQUF1QjtRQUN2QixNQUFNLEdBQUcsR0FBRyxJQUFBLGVBQUssR0FBRTthQUNoQixLQUFLLENBQUMsbUJBQW1CLENBQUM7YUFDMUIsR0FBRyxDQUFDLFNBQVMsQ0FBQzthQUNkLE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRTtZQUN6QixRQUFRLEVBQUUscUJBQXFCO1lBQy9CLE1BQU0sRUFBRSxJQUFJO1NBQ2IsQ0FBQzthQUNELE9BQU8sRUFBRSxDQUFDLGlEQUFpRDthQUMzRCxNQUFNLEVBQUUsQ0FBQztRQUVaLHFCQUFxQjtRQUNyQixNQUFNLENBQUMsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsR0FBRyxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzVFLE1BQU0sV0FBVyxHQUFHLEtBQUssR0FBRyxFQUFFLElBQUksQ0FBQyxLQUFLLEtBQUssRUFBRSxJQUFJLEtBQUssSUFBSSxFQUFFLENBQUMsQ0FBQztRQUVoRSxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDakIsT0FBTyxDQUFDLEtBQUssQ0FBQyx3RkFBd0YsQ0FBQyxDQUFDO1lBQ3hHLE9BQU8sQ0FBQyxLQUFLLENBQUMscUNBQXFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQztZQUM3RSxPQUFPLENBQUMsS0FBSyxDQUFDLHFDQUFxQyxDQUFDLENBQUM7WUFDckQsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNsQixDQUFDO1FBRUQseUZBQXlGO1FBQ3pGLDBFQUEwRTtRQUMxRSx3SUFBd0k7UUFDeEksYUFBYTtRQUNiLE1BQU0sT0FBTyxHQUFHLE1BQU0sR0FBRyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVwQyxxQ0FBcUM7UUFDckMsT0FBTyxPQUFPLENBQUM7SUFDakIsQ0FBQztDQUFBO0FBaENELGtCQWdDQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xpLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vc3JjL2NsaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7QUFBQSxxQ0FBZ0M7QUFFaEM7O0dBRUc7QUFDSCxTQUFzQixHQUFHOztRQUN2QixNQUFNLElBQUksR0FBRyxPQUFPLENBQUMsSUFBSSxDQUFDO1FBQzFCLHVCQUF1QjtRQUN2QixNQUFNLEdBQUcsR0FBRyxJQUFBLGVBQUssR0FBRTthQUNoQixLQUFLLENBQUMsbUJBQW1CLENBQUM7YUFDMUIsR0FBRyxDQUFDLFNBQVMsQ0FBQzthQUNkLE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRTtZQUN6QixRQUFRLEVBQUUscUJBQXFCO1lBQy9CLE1BQU0sRUFBRSxJQUFJO1NBQ2IsQ0FBQzthQUNELE9BQU8sRUFBRSxDQUFDLGlEQUFpRDthQUMzRCxNQUFNLEVBQUUsQ0FBQztRQUVaLHFCQUFxQjtRQUNyQixNQUFNLENBQUMsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsR0FBRyxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzVFLE1BQU0sV0FBVyxHQUFHLEtBQUssR0FBRyxFQUFFLElBQUksQ0FBQyxLQUFLLEtBQUssRUFBRSxJQUFJLEtBQUssSUFBSSxFQUFFLENBQUMsQ0FBQztRQUVoRSxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDakIsT0FBTyxDQUFDLEtBQUssQ0FBQyx3RkFBd0YsQ0FBQyxDQUFDO1lBQ3hHLE9BQU8sQ0FBQyxLQUFLLENBQUMscUNBQXFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQztZQUM3RSxPQUFPLENBQUMsS0FBSyxDQUFDLGtDQUFrQyxDQUFDLENBQUM7WUFDbEQsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNsQixDQUFDO1FBRUQseUZBQXlGO1FBQ3pGLDBFQUEwRTtRQUMxRSx3SUFBd0k7UUFDeEksYUFBYTtRQUNiLE1BQU0sT0FBTyxHQUFHLE1BQU0sR0FBRyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVwQyxxQ0FBcUM7UUFDckMsT0FBTyxPQUFPLENBQUM7SUFDakIsQ0FBQztDQUFBO0FBaENELGtCQWdDQyJ9

package/build/templates/packages/nativewindui/components/EditScreenInfo.tsx.ejs

@@ -1,4 +1,6 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
+import { Text } from '~/components/nativewindui/Text';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
 import { useTranslation } from 'react-i18next';
@@ -15,11 +17,15 @@ export default function EditScreenInfo({ path }: { path: string }) {
 <% } %>
   return (
     <View style={styles.getStartedContainer}>
-      <Text style={styles.getStartedText}>{title}</Text>
+      <Text variant="heading" className="text-center">
+        {title}
+      </Text>
       <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
         <Text>{path}</Text>
       </View>
-      <Text style={styles.getStartedText}>{description}</Text>
+      <Text variant="body" className="text-center">
+        {description}
+      </Text>
     </View>
   );
 }
@@ -33,11 +39,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginHorizontal: 50,
   },
-  getStartedText: {
-    fontSize: 17,
-    lineHeight: 24,
-    textAlign: 'center',
-  },
   helpContainer: {
     alignItems: 'center',
     marginHorizontal: 20,

package/build/templates/packages/nativewindui/components/ScreenContent.tsx.ejs

@@ -1,4 +1,6 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
+import { Text } from '~/components/nativewindui/Text';
 
 import EditScreenInfo from './EditScreenInfo';
 
@@ -11,7 +13,9 @@ type ScreenContentProps = {
 export const ScreenContent = ({ title, path, children }: ScreenContentProps) => {
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>{title}</Text>
+      <Text variant="title1" className="text-center">
+        {title}
+      </Text>
       <View style={styles.separator} />
       <EditScreenInfo path={path} />
       {children}
@@ -31,8 +35,4 @@ const styles = StyleSheet.create({
     marginVertical: 30,
     width: '80%',
   },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
 });

package/build/templates/packages/react-navigation/App.tsx.ejs

@@ -6,13 +6,20 @@
 <% } %>
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import './unistyles';
+import { DefaultTheme, DarkTheme } from '@react-navigation/native';
+import { useUnistyles } from 'react-native-unistyles';
+import { useMemo } from 'react';
+<% } else if (props.stylingPackage?.name === "tamagui" || props.stylingPackage?.name === "restyle" || props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %>
+import { DefaultTheme, DarkTheme } from '@react-navigation/native';
+import { useColorScheme } from 'react-native';
+import { useMemo } from 'react';
 <% } %>
 <% if (props.internalizationPackage?.name === "i18next") { %>
   import './translation';
 <% } %>
 import "react-native-gesture-handler";
 <% if (props.stylingPackage?.name === "tamagui") { %>
-	import React, { useEffect } from "react";
+	import React from "react";
 	import { TamaguiProvider } from 'tamagui';
 	import * as SplashScreen from 'expo-splash-screen';
 	import { useFonts } from 'expo-font';
@@ -30,9 +37,9 @@ import "react-native-gesture-handler";
 
   vexo(process.env.VEXO_API_KEY); // eslint-disable-line
 
-  import RootStack from "./navigation"; // eslint-disable-line
+  import Navigation from "./navigation"; // eslint-disable-line
 <% } else { %>
-  import RootStack from "./navigation";
+  import Navigation from "./navigation";
 <% } %>
 
 export default function App() {
@@ -42,11 +49,8 @@ export default function App() {
 			InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf"),
 		});
 
-		useEffect(() => {
-			if (loaded) {
-				SplashScreen.hideAsync();
-			}
-		}, [loaded])
+		const colorScheme = useColorScheme();
+		const theme = useMemo(() => colorScheme === 'dark' ? DarkTheme : DefaultTheme, [colorScheme]);
 
 		if (!loaded) {
 			return null;
@@ -54,16 +58,43 @@ export default function App() {
 
 		return (
 			<TamaguiProvider config={config}>
-				<RootStack />
+				<Navigation theme={theme} onReady={() => SplashScreen.hideAsync()} />
 			</TamaguiProvider>
 		);
 	<% } else if (props.stylingPackage?.name === "restyle") { %>
+		const colorScheme = useColorScheme();
+		const navigationTheme = useMemo(() => colorScheme === 'dark' ? DarkTheme : DefaultTheme, [colorScheme]);
+
 		return (
       <ThemeProvider theme={theme}>
-        <RootStack />
+        <Navigation theme={navigationTheme} />
       </ThemeProvider>
     );
+	<% } else if (props.stylingPackage?.name === "unistyles")  { %> 
+    const { theme, rt } = useUnistyles();
+
+    const baseTheme = rt.colorScheme === 'dark' ? DarkTheme : DefaultTheme;
+    const mergedTheme = useMemo(() => ({
+      ...baseTheme,
+      colors: {
+        ...baseTheme.colors,
+        background: theme.colors.background,
+        text: theme.colors.typography,
+        primary: theme.colors.astral,
+        secondary: theme.colors.cornflowerBlue,
+        border: theme.colors.limedSpruce,
+        card: theme.colors.background,
+        notification: theme.colors.astral,
+      },
+    }), [baseTheme, theme.colors.background, theme.colors.typography, theme.colors.astral, theme.colors.cornflowerBlue, theme.colors.limedSpruce]);
+
+    return <Navigation theme={mergedTheme} />;
+	<% } else if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "stylesheet") { %> 
+		const colorScheme = useColorScheme();
+		const theme = useMemo(() => colorScheme === 'dark' ? DarkTheme : DefaultTheme, [colorScheme]);
+
+		return <Navigation theme={theme} />;
 	<% } else { %> 
-		return <RootStack />;
+		return <Navigation />;
 	<% } %>
 }

package/build/templates/packages/react-navigation/navigation/drawer-navigator.tsx.ejs

@@ -1,66 +1,31 @@
 import { Ionicons, MaterialIcons } from '@expo/vector-icons';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { StackScreenProps } from '@react-navigation/stack';
 import { HeaderButton } from 'components/HeaderButton';
-<% if (props.stylingPackage?.name === "unistyles") { %>
-import { useUnistyles } from 'react-native-unistyles';
-<% } %>
-
-import { RootStackParamList } from '.';
 import TabNavigator from './tab-navigator';
 import Home from '../screens/home';
 
-type Props = StackScreenProps<RootStackParamList, 'DrawerNavigator'>;
-
-const Drawer = createDrawerNavigator();
 
-export default function DrawerNavigator({ navigation }: Props) {
-<% if (props.stylingPackage?.name === "unistyles") { %>
-  const { theme } = useUnistyles();
-<% } %>
-
-  return (
-    <% if (props.stylingPackage?.name === "unistyles") { %>
-    <Drawer.Navigator
-        screenOptions={{
-            headerStyle: {
-                backgroundColor: theme.colors.background,
-            },
-            headerTitleStyle: {
-                color: theme.colors.typography,
-            },
-            headerTintColor: theme.colors.typography,
-            drawerStyle: {
-                backgroundColor: theme.colors.background,
-            },
-            drawerLabelStyle: {
-                color: theme.colors.typography,
-            },
-            drawerInactiveTintColor: theme.colors.typography,
-        }}
-    >
-    <% } else { %>
-    <Drawer.Navigator>
-    <% } %>
-      <Drawer.Screen
-        name="Home"
-        component={Home}
-        options={{
-          drawerIcon: ({ size, color }) => (
-            <Ionicons name="home-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      <Drawer.Screen
-        name="Tabs"
-        component={TabNavigator}
-        options={{
+const Drawer = createDrawerNavigator({
+  screens: {
+    Home: {
+      screen: Home,
+      options: {
+        drawerIcon: ({ size, color }) => (
+          <Ionicons name="home-outline" size={size} color={color} />
+        ),
+      }
+    },
+    Tabs: {
+      screen: TabNavigator,
+      options: ({ navigation })=> ({
           headerRight: () => <HeaderButton onPress={() => navigation.navigate('Modal')} />,
           drawerIcon: ({ size, color }) => (
             <MaterialIcons name="border-bottom" size={size} color={color} />
           ),
-        }}
-      />
-    </Drawer.Navigator>
-  );
-}
+      })
+    },
+  }
+});
+
+export default Drawer;
+

package/build/templates/packages/react-navigation/navigation/index.tsx.ejs

@@ -1,156 +1,108 @@
 <% if (props.navigationPackage?.options.type === 'stack') { %>
-	import { NavigationContainer } from "@react-navigation/native";
-	import { createStackNavigator } from "@react-navigation/stack";
-
-    <% if (props.stylingPackage?.name === "unistyles") { %>
-        import { useUnistyles } from 'react-native-unistyles';
-    <% } %>
-
+	import { createStaticNavigation, StaticParamList } from '@react-navigation/native';
+	import { createStackNavigator } from '@react-navigation/stack';
 	import Overview from "../screens/overview";
 	import Details from "../screens/details";
-    import { BackButton } from '../components/BackButton';
+  import { BackButton } from '../components/BackButton';
 
-	export type RootStackParamList = {
-		Overview: undefined;
-		Details: { name: string };
-	};
+	const Stack = createStackNavigator({
+    screens: {
+      Overview: {
+        screen: Overview,
+      },
+      Details: {
+        screen: Details,
+        options: ({ navigation }) => ({
+          headerLeft: () => <BackButton onPress={navigation.goBack} />,
+        })
+      },
+    }
+  });
 
-	const Stack = createStackNavigator<RootStackParamList>();
+  type RootNavigatorParamList = StaticParamList<typeof Stack>;
 
-	export default function RootStack() {
-        <% if (props.stylingPackage?.name === "unistyles") { %>
-        const { theme } = useUnistyles();
-        <% } %>
-		return (
-			<NavigationContainer>
-				<Stack.Navigator
-                    initialRouteName="Overview"
-                    <% if (props.stylingPackage?.name === "unistyles") { %>
-                    screenOptions={{
-                        headerStyle: {
-                            backgroundColor: theme.colors.background,
-                        },
-                        headerTitleStyle: {
-                            color: theme.colors.typography,
-                        },
-                        headerTintColor: theme.colors.typography,
-                    }}
-                    <% } %>
-                >
-					<Stack.Screen name="Overview" component={Overview} />
-					<Stack.Screen
-						name="Details"
-						component={Details}
-							options={({ navigation }) => ({
-                headerLeft: () => <BackButton onPress={navigation.goBack} />,
-							})}
-					/>
-				</Stack.Navigator>
-			</NavigationContainer>
-		);
-	}
+  declare global {
+    namespace ReactNavigation {
+      // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+      interface RootParamList extends RootNavigatorParamList {}
+    }
+  }
+
+  const Navigation = createStaticNavigation(Stack);
+  export default Navigation;
 
 <% } else if (props.navigationPackage?.options.type === 'tabs') { %>
-	import { NavigationContainer } from "@react-navigation/native";
+  import { createStaticNavigation, StaticParamList } from '@react-navigation/native';
 	import { createStackNavigator } from "@react-navigation/stack";
-    <% if (props.stylingPackage?.name === "unistyles") { %>
-        import { useUnistyles } from 'react-native-unistyles';
-    <% } %>
-
 	import Modal from "../screens/modal";
 	import TabNavigator from "./tab-navigator";
 
-	export type RootStackParamList = {
-		TabNavigator: undefined;
-		Modal: undefined;
-	};
 
-	const Stack = createStackNavigator<RootStackParamList>();
+	const Stack = createStackNavigator({
+    screens: {
+      TabNavigator: {
+        screen: TabNavigator,
+        options: {
+          headerShown: false,
+        },
+      },
+      Modal: {
+        screen: Modal,
+        options: {
+          presentation: "modal",
+          headerLeft: () => null,
+        },
+      },
+    }
+  });
 
-	export default function RootStack() {
-        <% if (props.stylingPackage?.name === "unistyles") { %>
-        const { theme } = useUnistyles();
-        <% } %>
-		return (
-			<NavigationContainer>
-				<Stack.Navigator
-                    initialRouteName="TabNavigator"
-                    <% if (props.stylingPackage?.name === "unistyles") { %>
-                        screenOptions={{
-                            headerStyle: {
-                                backgroundColor: theme.colors.background,
-                            },
-                            headerTitleStyle: {
-                                color: theme.colors.typography,
-                            },
-                            headerTintColor: theme.colors.typography,
-                        }}
-                    <% } %>
-                >
-					<Stack.Screen
-						name="TabNavigator"
-						component={TabNavigator}
-						options={{ headerShown: false }}
-					/>
-					<Stack.Screen
-						name="Modal"
-						component={Modal}
-						options={{ presentation: "modal", headerLeft: () => null }}
-					/>
-				</Stack.Navigator>
-			</NavigationContainer>
-		);
-	}
-	<% } else if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
-		import { NavigationContainer } from "@react-navigation/native";
-		import { createStackNavigator } from '@react-navigation/stack';
-        <% if (props.stylingPackage?.name === "unistyles") { %>
-            import { useUnistyles } from 'react-native-unistyles';
-        <% } %>
+  type RootNavigatorParamList = StaticParamList<typeof Stack>;
+
+  declare global {
+    namespace ReactNavigation {
+      // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+      interface RootParamList extends RootNavigatorParamList {}
+    }
+  }
+
+  const Navigation = createStaticNavigation(Stack);
+  export default Navigation;
 
+<% } else if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
+	  import { createStaticNavigation, StaticParamList } from '@react-navigation/native';
+		import { createStackNavigator } from '@react-navigation/stack';
 		import Modal from "../screens/modal";
 		import DrawerNavigator from "./drawer-navigator";
 
-		export type RootStackParamList = {
-			DrawerNavigator: undefined;
-			Modal: undefined;
-      TabNavigator: undefined;
-		};
+	
+    const Stack = createStackNavigator({
+      screens: {
+        DrawerNavigator: {
+          screen: DrawerNavigator,
+          options: {
+            headerShown: false,
+          },
+        },
+        Modal: {
+          screen: Modal,
+          options: {
+            presentation: "modal",
+            headerLeft: () => null,
+          },
+        },
+      }
+    });
+
+    type RootNavigatorParamList = StaticParamList<typeof Stack>;
 
-		const Stack = createStackNavigator<RootStackParamList>();
+    declare global {
+      namespace ReactNavigation {
+        // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+        interface RootParamList extends RootNavigatorParamList {}
+      }
+    }
 
-		export default function RootStack() {
-            <% if (props.stylingPackage?.name === "unistyles") { %>
-            const { theme } = useUnistyles();
-            <% } %>
-			return (
-				<NavigationContainer>
-					<Stack.Navigator
-                        initialRouteName="DrawerNavigator"
-                        <% if (props.stylingPackage?.name === "unistyles") { %>
-                        screenOptions={{
-                            headerStyle: {
-                                backgroundColor: theme.colors.background,
-                            },
-                            headerTitleStyle: {
-                                color: theme.colors.typography,
-                            },
-                            headerTintColor: theme.colors.typography,
-                        }}
-                        <% } %>
-                    >
-						<Stack.Screen
-							name="DrawerNavigator"
-							component={DrawerNavigator}
-							options={{ headerShown: false }}
-						/>
-						<Stack.Screen
-							name="Modal"
-							component={Modal}
-							options={{ presentation: "modal", headerLeft: () => null }}
-						/>
-					</Stack.Navigator>
-				</NavigationContainer>
-			);
-		}
+    const Navigation = createStaticNavigation(Stack);
+  export default Navigation;
+	
 <% } %>

package/build/templates/packages/react-navigation/navigation/tab-navigator.tsx.ejs

@@ -1,60 +1,38 @@
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { StackScreenProps } from '@react-navigation/stack';
-<% if (props.stylingPackage?.name === "unistyles") { %>
-import { useUnistyles } from 'react-native-unistyles';
-<% } %>
-import { RootStackParamList } from '.';
 import { HeaderButton } from '../components/HeaderButton';
 import { TabBarIcon } from '../components/TabBarIcon';
 import One from '../screens/one';
 import Two from '../screens/two';
 
-const Tab = createBottomTabNavigator();
-
-type Props = StackScreenProps<RootStackParamList, 'TabNavigator'>;
-
-export default function TabLayout({ navigation }: Props) {
-  <% if (props.stylingPackage?.name === "unistyles") { %>
-  const { theme } = useUnistyles();
-  <% } %>
-  return (
-    <Tab.Navigator
-        screenOptions={{
-        <% if (props.stylingPackage?.name === "unistyles") { %>
-            headerStyle: {
-                backgroundColor: theme.colors.background,
-            },
-            headerTitleStyle: {
-                color: theme.colors.typography,
-            },
-            tabBarActiveTintColor: theme.colors.astral,
-            tabBarStyle: {
-                backgroundColor: theme.colors.background,
-            },
-        <% } else { %>
-            tabBarActiveTintColor: 'black',
-        <% } %>
-	    <% if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
+const Tab = createBottomTabNavigator({
+  screenOptions: function ScreenOptions() {
+    return {
+      <% if (props.stylingPackage?.name !== "unistyles") { %>
+        tabBarActiveTintColor: 'black',
+      <% } %>
+      <% if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
         headerShown: false,
       <% } %>
-      }}>
-      <Tab.Screen
-        name="One"
-        component={One}
-        options={{
-          title: 'Tab One',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
-          headerRight: () => <HeaderButton onPress={() => navigation.navigate('Modal')} />,
-        }}
-      />
-      <Tab.Screen
-        name="Two"
-        component={Two}
-        options={{
-          title: 'Tab Two',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
-        }}
-      />
-    </Tab.Navigator>
-  );
-}
+    }
+  },
+  screens: {
+    One: {
+      screen: One,
+      options: ({ navigation }) => ({
+        title: 'Tab One',
+        tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        headerRight: () => <HeaderButton onPress={() => navigation.navigate('Modal')} />,
+      })
+    },
+    Two: {
+      screen: Two,
+      options: {
+        title: 'Tab Two',
+        tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+      }
+    },
+  }
+});
+
+export default Tab;
+

package/build/templates/packages/react-navigation/screens/details.tsx.ejs

@@ -1,4 +1,4 @@
-import { RouteProp, useRoute } from '@react-navigation/native';
+import type { StaticScreenProps } from '@react-navigation/native';
 import { ScreenContent } from 'components/ScreenContent';
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import { View } from 'react-native';
@@ -7,18 +7,16 @@ import { StyleSheet } from 'react-native-unistyles';
 import { StyleSheet, View } from 'react-native';
 <% } %>
 
-import { RootStackParamList } from '../navigation';
-
-type DetailsScreenRouteProp = RouteProp<RootStackParamList, 'Details'>;
-
-export default function Details() {
-  const router = useRoute<DetailsScreenRouteProp>();
+type Props = StaticScreenProps<{
+  name: string;
+}>;
 
+export default function Details({ route }: Props) {
   return (
     <View style={styles.container}>
       <ScreenContent
         path="screens/details.tsx"
-        title={`Showing details for user ${router.params.name}`}
+        title={`Showing details for user ${route.params?.name}`}
       />
     </View>
   );

package/build/templates/packages/react-navigation/screens/overview.tsx.ejs

@@ -1,5 +1,4 @@
 import { useNavigation } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
 import { ScreenContent } from 'components/ScreenContent';
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import { View } from 'react-native';
@@ -13,12 +12,9 @@ import { StyleSheet, View } from 'react-native';
 <% } %>
 
 import { Button } from '../components/Button';
-import { RootStackParamList } from '../navigation';
-
-type OverviewScreenNavigationProps = StackNavigationProp<RootStackParamList, 'Overview'>;
 
 export default function Overview() {
-  const navigation = useNavigation<OverviewScreenNavigationProps>();
+  const navigation = useNavigation();
 
   return (
     <View style={styles.container}>

package/package.json

@@ -1,74 +1,75 @@
 {
-  "name": "create-expo-stack",
-  "version": "2.18.5",
-  "description": "CLI tool to initialize a React Native application with Expo",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/roninoss/create-expo-stack.git",
-    "directory": "cli"
-  },
-  "homepage": "https://rn.new",
-  "license": "MIT",
-  "types": "build/types/types.d.ts",
-  "bin": {
-    "create-expo-stack": "bin/create-expo-stack.js"
-  },
-  "files": [
-    "build",
-    "LICENSE",
-    "readme.md",
-    "docs",
-    "bin"
-  ],
-  "scripts": {
-    "build": "bun run clean-build && bun run compile && bun run copy-templates && bun run lint-templates",
-    "bump": "bun run ./src/utilities/bumpVersion.ts",
-    "clean-build": "rm -rf ./build",
-    "compile": "tsc -p .",
-    "copy-templates": "bun run copyfiles -u 2 -a \"./src/templates/**/*\" ./build/templates",
-    "dev": "bun run build && NODE_ENV=development bun run bin/create-expo-stack.js",
-    "format": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix --resolve-plugins-relative-to . && prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
-    "lint-templates": "bun run ejslint ./src/templates",
-    "prepublishOnly": "bun run build",
-    "publishPublic": "bun run build && npm publish --access public",
-    "snapshot-update": "bun test --bail=1 --timeout 160000 --update-snapshots",
-    "test:watch": "bun test --watch",
-    "test": "bun test --bail=1 --timeout 160000",
-    "test:all": "ALL_PACKAGE_MANAGERS=true bun test --bail=1 --timeout 160000"
-  },
-  "prettier": {
-    "arrowParens": "always",
-    "bracketSameLine": false,
-    "bracketSpacing": true,
-    "printWidth": 120,
-    "semi": true,
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "none",
-    "useTabs": false
-  },
-  "dependencies": {
-    "@clack/prompts": "^0.7.0",
-    "ejs-lint": "^2.0.0",
-    "expo": "~53.0.6",
-    "figlet": "^1.6.0",
-    "gluegun": "latest",
-    "google-auth-library": "^9.11.0",
-    "googleapis": "^140.0.0",
-    "gradient-string": "^2.0.2"
-  },
-  "devDependencies": {
-    "@types/gradient-string": "^1.1.2",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
-    "copyfiles": "^2.4.1",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "husky": "^5.1.3",
-    "prettier": "^3.1.0"
-  },
-  "publishConfig": {
-    "provenance": false
-  }
+	"name": "create-expo-stack",
+	"version": "2.18.6-next.1dd14ce",
+	"description": "CLI tool to initialize a React Native application with Expo",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/roninoss/create-expo-stack.git",
+		"directory": "cli"
+	},
+	"homepage": "https://rn.new",
+	"license": "MIT",
+	"types": "build/types/types.d.ts",
+	"bin": {
+		"create-expo-stack": "bin/create-expo-stack.js"
+	},
+	"files": [
+		"build",
+		"LICENSE",
+		"readme.md",
+		"docs",
+		"bin"
+	],
+	"scripts": {
+		"build": "bun run clean-build && bun run compile && bun run copy-templates && bun run lint-templates",
+		"bump": "bun run ./src/utilities/bumpVersion.ts",
+		"clean-build": "rm -rf ./build",
+		"compile": "tsc -p .",
+		"copy-templates": "bun run copyfiles -u 2 -a \"./src/templates/**/*\" ./build/templates",
+		"dev": "bun run build && NODE_ENV=development bun run bin/create-expo-stack.js",
+		"format": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix --resolve-plugins-relative-to . && prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
+		"lint-templates": "bun run ejslint ./src/templates",
+		"prepublishOnly": "bun run build",
+		"publishPublic": "bun run build && npm publish --access public",
+		"snapshot-update": "bun test --bail=1 --timeout 160000 --update-snapshots",
+		"test:watch": "bun test --watch",
+		"test": "bun test --bail=1 --timeout 160000",
+		"test:skip-snapshots": "INCLUDE_REACT_NAVIGATION_TESTS=1 SKIP_SNAPSHOTS=1 bun test bun test --bail=1 --timeout 160000",
+		"test:all": "ALL_PACKAGE_MANAGERS=true bun test --bail=1 --timeout 160000"
+	},
+	"prettier": {
+		"arrowParens": "always",
+		"bracketSameLine": false,
+		"bracketSpacing": true,
+		"printWidth": 120,
+		"semi": true,
+		"singleQuote": true,
+		"tabWidth": 2,
+		"trailingComma": "none",
+		"useTabs": false
+	},
+	"dependencies": {
+		"@clack/prompts": "^0.7.0",
+		"ejs-lint": "^2.0.0",
+		"expo": "~53.0.6",
+		"figlet": "^1.6.0",
+		"gluegun": "latest",
+		"google-auth-library": "^9.11.0",
+		"googleapis": "^140.0.0",
+		"gradient-string": "^2.0.2"
+	},
+	"devDependencies": {
+		"@types/gradient-string": "^1.1.2",
+		"@typescript-eslint/eslint-plugin": "^6.9.1",
+		"@typescript-eslint/parser": "^6.9.1",
+		"copyfiles": "^2.4.1",
+		"eslint": "^8.53.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-prettier": "^5.0.1",
+		"husky": "^5.1.3",
+		"prettier": "^3.1.0"
+	},
+	"publishConfig": {
+		"provenance": false
+	}
 }