create-expo-stack 2.4.3-next.e841ea5 → 2.5.0-next.00da55e

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

@@ -1,10 +1,13 @@
 {
   "name": "<%= props.projectName %>",
   "version": "1.0.0",
+  <% if (props.navigationPackage?.name === "expo-router") { %>
+  "main": "expo-router/entry",
+  <% } %>
   "scripts": {
     "android": "expo start --android",
 	<% if (props.packageManager === "bun") { %>
-		"format": "bun run eslint \"**/*.{js,jsx,ts,tsx}\" --fix && prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
+		"format": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix && prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
 	<% } else { %>
     	"format": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix && prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
 	<% } %>
@@ -66,13 +69,13 @@
     <% if (props.navigationPackage?.name === "expo-router") { %>
       "@expo/vector-icons": "^14.0.0",
       "expo-linking": "~6.2.2",
-      "expo-router": "^3.4.6", 
+      "expo-router": "^3.4.7", 
       "expo-constants": "~15.4.5",     
       "expo-system-ui": "~2.9.3",
       "expo-web-browser": "~12.8.2",
       "react-dom": "18.2.0",
       "react-native-reanimated": "~3.6.2",
-      "react-native-web": "~0.19.6",
+      "react-native-web": "~0.19.10",
     <% } %>
 
 	<% if (props.authenticationPackage?.name === "supabase") { %>
@@ -85,27 +88,38 @@
 	  "firebase": "^10.5.2",
 	  "react-native-url-polyfill": "^2.0.0",
 	<% } %>
+  
+  <% if (props.internalizationPackage?.name === "i18next") { %>
+    "i18next": "^23.7.20",
+    "react-i18next": "^14.0.1",
+    "expo-localization": "~14.8.3",
+  <% } %> 
 
-    "expo": "~50.0.5",
+    "expo": "~50.0.7",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
-    "react-native": "0.73.4"
+    "react-native": "0.73.6"
   },
   "devDependencies": {
+  <%# patch for this issue : https://github.com/expo/expo/issues/26641 %>
+  <% if (props.packageManager === "bun" && props.navigationPackage?.name === "expo-router") { %>
+	  "ajv": "^8.12.0",
+	<% } %>
     "@babel/core": "^7.20.0",
     "@types/react": "~18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
     "eslint": "^8.50.0",
     "eslint-config-universe": "^12.0.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.5",
     <% if (props.stylingPackage?.name === "nativewind") { %>
       "tailwindcss": "^3.4.0",
+      "prettier-plugin-tailwindcss": "^0.5.11",
     <% } %>
     <% if (props.stylingPackage?.name === "tamagui") { %>
       "@tamagui/babel-plugin": "1.74.8",
     <% } %>
-    "typescript": "^5.1.3"
+    "typescript": "^5.3.3"
   },
   "eslintConfig": {
     "extends": "universe/native"

package/build/templates/base/prettier.config.js.ejs

@@ -0,0 +1,11 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  singleQuote: true,
+  bracketSameLine: true,
+  trailingComma: 'es5',
+  <% if (props.stylingPackage?.name === "nativewind") { %>
+  plugins: [require.resolve("prettier-plugin-tailwindcss")],
+  tailwindAttributes: ["className"],
+  <% } %>
+};

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

@@ -1,13 +1,7 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { Tabs } from 'expo-router';
 import { StyleSheet } from 'react-native';
+import { TabBarIcon } from '~/components/TabBarIcon';
 
-function TabBarIcon(props: {
-  name: React.ComponentProps<typeof FontAwesome>['name'];
-  color: string;
-}) {
-  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
-}
 
 export default function TabLayout() {
   return (
@@ -33,9 +27,3 @@ export default function TabLayout() {
     </Tabs>
   );
 }
-
-const styles = StyleSheet.create({
-  tabBarIcon: {
-    marginBottom: -3,
-  },
-});

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

@@ -1,88 +1,22 @@
-<% if (props.stylingPackage?.name === 'nativewind') { %>
-    import { Text, View } from 'react-native';
-<% } else if (props.stylingPackage?.name === 'tamagui') { %>
-    import { YStack, H2, Separator, Theme } from 'tamagui';
-<% } else if (props.stylingPackage?.name === 'restyle') { %>
-    import { Box, Text } from 'theme';
-<% } else if (props.stylingPackage?.name === 'unistyles') { %>
-    import { useStyles } from 'react-native-unistyles'
-    import { Text, View } from 'react-native';
-<% } else { %>
-    import { StyleSheet, Text, View } from 'react-native';
-<% } %>
+import { Stack } from 'expo-router';
+import { StyleSheet, View } from 'react-native';
 
-import EditScreenInfo from '../../../components/edit-screen-info';
+import { ScreenContent } from '~/components/ScreenContent';
 
-export default function TabOneScreen() {
-  <% if (props.stylingPackage?.name === 'unistyles') { %>
-    const { theme } = useStyles()
-
-    return (
-			<View style={theme.components.container}>
-				<Text style={theme.components.title}>Tab One</Text>
-				<View style={theme.components.separator} />
-				<EditScreenInfo path='app/(drawer)/(tabs)/index.tsx' />
-			</View>
-    );
-  <% } else if (props.stylingPackage?.name === 'nativewind') { %>
-        return (
-			<View className={styles.container}>
-				<Text className={styles.title}>Tab One</Text>
-				<View className={styles.separator} />
-				<EditScreenInfo path='app/(drawer)/(tabs)/index.tsx' />
-			</View>
-		);
-    <% } else if (props.stylingPackage?.name === 'tamagui') { %>
-        return (
-			<Theme name='light'>
-				<YStack flex={1} alignItems='center' justifyContent='center'>
-					<H2>Tab One</H2>
-					<Separator />
-					<EditScreenInfo path='app/(drawer)/(tabs)/index.tsx' />
-				</YStack>
-			</Theme>
-		);    
-    <% } else if (props.stylingPackage?.name === 'restyle') { %>
-      return (
-        <Box flex={1} alignItems='center' justifyContent='center'>
-          <Text variant='title'>Tab One</Text>
-          <Box height={1} marginVertical='l_32' width='80%' />
-          <EditScreenInfo path='app/(drawer)/(tabs)/index.tsx' />
-        </Box>
-      );
-    <% } else { %>
-        return (
-			<View style={styles.container}>
-				<Text style={styles.title}>Tab One</Text>
-				<View style={styles.separator} />
-				<EditScreenInfo path='app/(drawer)/(tabs)/index.tsx' />
-			</View>
-		);
-    <% } %>
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab One' }} />
+      <View style={styles.container}>
+        <ScreenContent path="app/(drawer)/(tabs)/index.tsx" title="Tab One" />
+      </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',
-		}
-	});
-<% } %>
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+});

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

@@ -1,88 +1,22 @@
-<% if (props.stylingPackage?.name === 'nativewind') { %>
-    import { Text, View } from 'react-native';
-<% } else if (props.stylingPackage?.name === 'tamagui') { %>
-    import { YStack, H2, Separator, Theme } from 'tamagui';
-<% } else if (props.stylingPackage?.name === 'restyle') { %>
-    import { Box, Text } from 'theme';
-<% } else if (props.stylingPackage?.name === 'unistyles') { %>
-    import { useStyles } from 'react-native-unistyles'
-    import { Text, View } from 'react-native';
-<% } else { %>
-    import { StyleSheet, Text, View } from 'react-native';
-<% } %>
+import { Stack } from 'expo-router';
+import { StyleSheet, View } from 'react-native';
 
-import EditScreenInfo from '../../../components/edit-screen-info';
+import { ScreenContent } from '~/components/ScreenContent';
 
-export default function TabTwoScreen() {
-    <% if (props.stylingPackage?.name === 'unistyles') { %>
-      const { theme } = useStyles()
-
-      return (
-        <View style={theme.components.container}>
-          <Text style={theme.components.title}>Tab Two</Text>
-          <View style={theme.components.separator} />
-          <EditScreenInfo path='app/(drawer)/(tabs)/two.tsx' />
-        </View>
-      );
-    <% } else if (props.stylingPackage?.name === 'nativewind') { %>
-        return (
-			<View className={styles.container}>
-				<Text className={styles.title}>Tab Two</Text>
-				<View className={styles.separator} />
-				<EditScreenInfo path='app/(drawer)/(tabs)/two.tsx' />
-			</View>
-		);
-    <% } else if (props.stylingPackage?.name === 'tamagui') { %>
-        return (
-			<Theme name='light'>
-				<YStack flex={1} alignItems='center' justifyContent='center'>
-					<H2>Tab Two</H2>
-					<Separator />
-					<EditScreenInfo path='app/(drawer)/(tabs)/two.tsx' />
-				</YStack>
-			</Theme>
-		);    
-    <% } else if (props.stylingPackage?.name === 'restyle') { %>
-      return (
-        <Box flex={1} alignItems='center' justifyContent='center'>
-          <Text variant='title'>Tab Two</Text>
-          <Box height={1} marginVertical='l_32' width='80%' />
-          <EditScreenInfo path='app/(drawer)/(tabs)/two.tsx' />
-        </Box>
-      );
-    <% } else { %>
-        return (
-			<View style={styles.container}>
-				<Text style={styles.title}>Tab Two</Text>
-				<View style={styles.separator} />
-				<EditScreenInfo path='app/(drawer)/(tabs)/two.tsx' />
-			</View>
-		);
-    <% } %>
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab Two' }} />
+      <View style={styles.container}>
+        <ScreenContent path="app/(drawer)/(tabs)/two.tsx" title="Tab Two" />
+      </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',
-		}
-	});
-<% } %>
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+});

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

@@ -1,7 +1,8 @@
-import { FontAwesome, Ionicons, MaterialIcons } from '@expo/vector-icons';
+import { Ionicons, MaterialIcons } from '@expo/vector-icons';
 import { Link } from 'expo-router';
 import { Drawer } from 'expo-router/drawer';
-import { Pressable, StyleSheet } from 'react-native';
+
+import { HeaderButton } from '../../components/HeaderButton';
 
 const DrawerLayout = () => (
   <Drawer>
@@ -23,16 +24,7 @@ const DrawerLayout = () => (
         ),
         headerRight: () => (
           <Link href="/modal" asChild>
-            <Pressable>
-              {({ pressed }) => (
-                <FontAwesome
-                  name="info-circle"
-                  size={25}
-                  color="gray"
-                  style={[styles.headerRight, { opacity: pressed ? 0.5 : 1 }]}
-                />
-              )}
-            </Pressable>
+            <HeaderButton />
           </Link>
         ),
       }}
@@ -40,10 +32,4 @@ const DrawerLayout = () => (
   </Drawer>
 );
 
-const styles = StyleSheet.create({
-  headerRight: {
-    marginRight: 15,
-  },
-});
-
 export default DrawerLayout;

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

@@ -1,90 +1,22 @@
-<% if (props.stylingPackage?.name === "nativewind") { %>
-  import { Text, View } from "react-native";
-<% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack, H2, Separator, Theme } from "tamagui";
-<% } else if (props.stylingPackage?.name === "restyle") { %>
-  import { Box, Text } from 'theme';
-<% } else if (props.stylingPackage?.name === "unistyles") { %>
-  import { useStyles } from 'react-native-unistyles'
-  import { Text, View } from 'react-native';
-<% } else if (props.stylingPackage?.name === "stylesheet") { %>
-  import { StyleSheet, Text, View } from "react-native";
-<% } %>
+import { Stack } from 'expo-router';
+import { StyleSheet, View } from 'react-native';
 
-import EditScreenInfo from "../../components/edit-screen-info";
+import { ScreenContent } from '~/components/ScreenContent';
 
-const Page = () => {
-  <% 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} />
-        <EditScreenInfo path="app/(tabs)/index.tsx" />
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Home' }} />
+      <View style={styles.container}>
+        <ScreenContent path="app/(drawer)/(tabs)/index.tsx" title="Home" />
       </View>
-    );
-  <% } else if (props.stylingPackage?.name === "nativewind") { %>
-      return (
-    <View className={styles.container}>
-      <Text className={styles.title}>Home</Text>
-      <View className={styles.separator} />
-      <EditScreenInfo path="app/(tabs)/index.tsx" />
-    </View>
-  );
-  <% } else if (props.stylingPackage?.name === "tamagui") { %>
-      return (
-    <Theme name="light">
-      <YStack flex={1} alignItems="center" justifyContent="center">
-        <H2>Home</H2>
-        <Separator />
-        <EditScreenInfo path="app/(tabs)/index.tsx" />
-      </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%" />
-        <EditScreenInfo path="app/(tabs)/index.tsx" />
-      </Box>
-    );
-  <% } else { %>
-      return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Home</Text>
-      <View style={styles.separator} />
-      <EditScreenInfo path="app/(tabs)/index.tsx" />
-    </View>
+    </>
   );
-  <% } %>
 }
 
-export default Page;
-
-<% 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({
+const styles = StyleSheet.create({
   container: {
-    alignItems: "center",
     flex: 1,
-    justifyContent: "center",
-  },
-  separator: {
-    backgroundColor: '#d1d5db',
-    height: 1,
-    marginVertical: 30,
-    width: "80%",
+    padding: 24,
   },
-  title: {
-    fontSize: 20,
-    fontWeight: "bold",
-  }
 });
-<% } %>

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

@@ -5,6 +5,10 @@ import '../global.css';
 import '../unistyles';
 <% } %>
 
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import '../translation';
+<% } %>
+
 import 'react-native-gesture-handler';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Stack } from 'expo-router';

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

@@ -1,96 +1,20 @@
- <% 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 { ScreenContent } from 'components/ScreenContent';
 import { StatusBar } from 'expo-status-bar';
+import { Platform } from 'react-native';
 
-import EditScreenInfo from '../components/edit-screen-info';
-
-export default function ModalScreen() {
-    <% if (props.stylingPackage?.name === 'unistyles') { %>
-      const { theme } = useStyles()
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import { InternalizationExample } from 'components/InternalizationExample';
+<% } %>
 
-      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>
-		);
-    <% } %>
+export default function Modal() {
+  return (
+    <>
+      <ScreenContent path="app/modal.tsx" title="Modal">
+      <% if (props.internalizationPackage?.name === "i18next") { %>
+        <InternalizationExample />
+      <% } %>
+      </ScreenContent>
+      <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
+    </>
+  );
 }
-
-<% 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/stack/app/_layout.tsx.ejs

@@ -4,6 +4,9 @@ import '../global.css';
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import '../unistyles';
 <% } %>
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import '../translation';
+<% } %>
 
 <% if (props.stylingPackage?.name === "tamagui") { %>
 	import { useFonts } from 'expo-font';