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

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

@@ -1,87 +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/(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/(tabs)/index.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/(tabs)/index.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/(tabs)/two.tsx" />
-        </Box>
-      );
-    <% } else { %>
-        return (
-			<View style={styles.container}>
-				<Text style={styles.title}>Tab Two</Text>
-				<View style={styles.separator} />
-				<EditScreenInfo path="app/(tabs)/two.tsx" />
-			</View>
-		);
-    <% } %>
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab Two' }} />
+      <View style={styles.container}>
+        <ScreenContent path="app/(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: {
-			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/tabs/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 React, { useEffect } from "react";

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

@@ -1,95 +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 { StatusBar } from "expo-status-bar";
-
-import EditScreenInfo from "../components/edit-screen-info";
+import { ScreenContent } from 'components/ScreenContent';
+import { StatusBar } from 'expo-status-bar';
+import { Platform } from 'react-native';
 
-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: {
-			height: 1,
-			marginVertical: 30,
-			width: "80%"
-		},
-		title: {
-			fontSize: 20,
-			fontWeight: "bold"
-		}
-	});
-<% } %>

package/build/templates/packages/i18next/components/InternalizationExample.tsx.ejs

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, StyleSheet, View } from 'react-native';
+
+export const InternalizationExample = () => {
+  const { t, i18n } = useTranslation();
+
+  const toggleLanguage = (locale: 'en' | 'fr') => {
+    i18n.changeLanguage(locale);
+  };
+  return (
+    <>
+      <View style={styles.content}>
+        <Button title={t('button.french')} onPress={() => toggleLanguage('fr')} />
+        <Button title={t('button.english')} onPress={() => toggleLanguage('en')} />
+      </View>
+    </>
+  );
+};
+
+export const styles = StyleSheet.create({
+  content: { gap: 20, padding: 20 },
+});

package/build/templates/packages/i18next/core/i18n/fallbackChecker.ts.ejs

@@ -0,0 +1,13 @@
+import { Resource } from 'i18next';
+
+export const fallbackChecker = (resources: Resource, fallbackLng: string) => {
+  const languages = Object.keys(resources);
+  const hasFallback = languages.find((key) => fallbackLng === key);
+
+  if (!hasFallback) {
+    throw new Error(
+      `fallbackLng  "${fallbackLng}", is not present in your resources, please check your config, languages available: ${languages.join(', ')}`
+    );
+  }
+  return fallbackLng;
+};

package/build/templates/packages/i18next/core/i18n/init.ts.ejs

@@ -0,0 +1,24 @@
+import i18n, { Resource } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import { fallbackChecker } from './fallbackChecker';
+import { languageDetector } from './languageDetector';
+
+type Init18n = {
+  resources: Resource;
+  fallbackLng: string;
+};
+
+export const init18n = ({ resources, fallbackLng }: Init18n) => {
+  return i18n
+    .use(languageDetector)
+    .use(initReactI18next)
+    .init({
+      resources,
+      fallbackLng: fallbackChecker(resources, fallbackLng),
+      compatibilityJSON: 'v3', // By default React Native projects does not support Intl
+      interpolation: {
+        escapeValue: false,
+      },
+    });
+};

package/build/templates/packages/i18next/core/i18n/languageDetector.ts.ejs

@@ -0,0 +1,13 @@
+import * as Localization from 'expo-localization';
+import { LanguageDetectorModule } from 'i18next';
+
+export const languageDetector: LanguageDetectorModule = {
+  type: 'languageDetector',
+  detect: () => {
+    const locales = Localization.getLocales();
+    const firstLanguageCode = locales[0].languageCode ?? 'en';
+    return firstLanguageCode;
+  },
+  init: () => {},
+  cacheUserLanguage: () => {},
+};

package/build/templates/packages/i18next/translation/en.json.ejs

@@ -0,0 +1,8 @@
+{
+  "button": {
+    "french": "Switch language to French",
+    "english": "Switch language to English"
+  },
+  "getStarted": "Open up the code for this screen:",
+  "changeCode": "Change any of the text, save the file, and your app will automatically update."
+}

package/build/templates/packages/i18next/translation/fr.json.ejs

@@ -0,0 +1,8 @@
+{
+  "button": {
+    "french": "Changer la langue en français",
+    "english": "Changer la langue en anglais"
+  },
+  "getStarted": "Ouvrez le code de cet écran :",
+  "changeCode": "Modifiez n'importe quel texte, enregistrez le fichier et votre application sera automatiquement mise à jour."
+}

package/build/templates/packages/i18next/translation/index.ts.ejs

@@ -0,0 +1,20 @@
+import { init18n } from 'core/i18n/init';
+import en from 'translation/en.json';
+import fr from 'translation/fr.json';
+
+export const resources = {
+  en: {
+    translation: en,
+  },
+  fr: {
+    translation: fr,
+  },
+};
+
+export const fallbackLng = 'en';
+
+export type LanguageCode = keyof typeof resources;
+
+const i18n = init18n({ resources, fallbackLng });
+
+export default i18n;

package/build/templates/packages/nativewind/components/BackButton.tsx.ejs

@@ -0,0 +1,18 @@
+import { Feather } from '@expo/vector-icons';
+import { Text, View } from 'react-native';
+
+export const BackButton = ({ onPress }: { onPress: () => void }) => {
+  return (
+    <View className={styles.backButton}>
+      <Feather name="chevron-left" size={16} color="#007AFF" />
+      <Text className={styles.backButtonText} onPress={onPress}>
+        Back
+      </Text>
+    </View>
+  );
+};
+
+const styles = {
+  backButton: 'flex-row',
+  backButtonText: 'text-blue-500 ml-1',
+};

package/build/templates/packages/nativewind/components/Button.tsx.ejs

@@ -0,0 +1,14 @@
+import { Text, TouchableOpacity } from 'react-native';
+
+export const Button = ({ onPress, title }: { onPress: () => void; title: string }) => {
+  return (
+    <TouchableOpacity className={styles.button} onPress={onPress}>
+      <Text className={styles.buttonText}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export const styles = {
+  button: 'items-center bg-indigo-500 rounded-[28px] shadow-md p-4',
+  buttonText: 'text-white text-lg font-semibold text-center',
+};

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

@@ -0,0 +1,40 @@
+import { Text, View } from 'react-native';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+import { useTranslation } from 'react-i18next';
+<% } %>
+
+
+export const EditScreenInfo = ({ path }: { path: string }) => {
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  const { t } = useTranslation();
+  const title = t('getStarted');
+  const description = t('changeCode')
+<% } else { %>
+  const title = "Open up the code for this screen:"
+  const description = "Change any of the text, save the file, and your app will automatically update."
+<% } %>
+  return (
+    <View>
+      <View className={styles.getStartedContainer}>
+        <Text className={styles.getStartedText}>{title}</Text>
+        <View className={styles.codeHighlightContainer + styles.homeScreenFilename}>
+          <Text>{path}</Text>
+        </View>
+        <Text className={styles.getStartedText}>
+          {description}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = {
+  codeHighlightContainer: `rounded-md px-1`,
+  getStartedContainer: `items-center mx-12`,
+  getStartedText: `text-lg leading-6 text-center`,
+  helpContainer: `items-center mx-5 mt-4`,
+  helpLink: `py-4`,
+  helpLinkText: `text-center`,
+  homeScreenFilename: `my-2`,
+};

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

@@ -0,0 +1,25 @@
+import { Text, View } from 'react-native';
+
+import { EditScreenInfo } from './EditScreenInfo';
+
+type ScreenContentProps = {
+  title: string;
+  path: string;
+  children?: React.ReactNode;
+};
+
+export const ScreenContent = ({ title, path, children} : ScreenContentProps) => {
+  return (
+    <View className={styles.container}>
+      <Text className={styles.title}>{title}</Text>
+      <View className={styles.separator} />
+      <EditScreenInfo path={path} />
+      {children}
+    </View>
+  );
+};
+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`,
+};

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

@@ -4,6 +4,9 @@ import './global.css';
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import './unistyles';
 <% } %>
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import './translation';
+<% } %>
 import "react-native-gesture-handler";
 <% if (props.stylingPackage?.name === "tamagui") { %>
 	import React, { useEffect } from "react";
@@ -19,7 +22,7 @@ import "react-native-gesture-handler";
   import { theme } from 'theme';
 <% } %>
 
-import RootStack from "./src/navigation";
+import RootStack from "./navigation";
 
 export default function App() {
 	<% if (props.stylingPackage?.name === "tamagui") { %>

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

@@ -1,7 +1,7 @@
-import { FontAwesome, Ionicons, MaterialIcons } from '@expo/vector-icons';
+import { Ionicons, MaterialIcons } from '@expo/vector-icons';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { Pressable } from 'react-native';
 import { StackScreenProps } from '@react-navigation/stack';
+import { HeaderButton } from 'components/HeaderButton';
 
 import { RootStackParamList } from '.';
 import TabNavigator from './tab-navigator';
@@ -12,39 +12,27 @@ type Props = StackScreenProps<RootStackParamList, 'DrawerNavigator'>;
 const Drawer = createDrawerNavigator();
 
 export default function DrawerNavigator({ navigation }: Props) {
-	return (
-		<Drawer.Navigator>
+  return (
+    <Drawer.Navigator>
       <Drawer.Screen
         name="Home"
         component={Home}
         options={{
-          drawerIcon: ({ size, color }) => <Ionicons name="home-outline" size={size} color={color} />,
+          drawerIcon: ({ size, color }) => (
+            <Ionicons name="home-outline" size={size} color={color} />
+          ),
         }}
       />
-			<Drawer.Screen name="Tabs" component={TabNavigator}
+      <Drawer.Screen
+        name="Tabs"
+        component={TabNavigator}
         options={{
-          headerRight: () => (
-            <Pressable onPress={() => navigation.navigate('Modal')}>
-              {({ pressed }) => (
-                <FontAwesome
-                  name="info-circle"
-                  size={25}
-                  color="gray"
-                  style={[
-                    {
-                      marginRight: 16,
-                      opacity: pressed ? 0.5 : 1,
-                    },
-                  ]}
-                />
-              )}
-            </Pressable>
-          ),
+          headerRight: () => <HeaderButton onPress={() => navigation.navigate('Modal')} />,
           drawerIcon: ({ size, color }) => (
             <MaterialIcons name="border-bottom" size={size} color={color} />
           ),
         }}
-       />
-		</Drawer.Navigator>
-	);
+      />
+    </Drawer.Navigator>
+  );
 }

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

@@ -1,22 +1,10 @@
 <% if (props.navigationPackage?.options.type === 'stack') { %>
-	import { Feather } from "@expo/vector-icons";
 	import { NavigationContainer } from "@react-navigation/native";
 	import { createStackNavigator } from "@react-navigation/stack";
-	<% if (props.stylingPackage?.name === "nativewind") { %>
-		import { Text, View } from "react-native";
-	<% } else if (props.stylingPackage?.name === "tamagui") { %>
-		import { Button, Text } from "tamagui";
-	<% } else if (props.stylingPackage?.name === "restyle") { %>
-    import { Box, Text, useTheme } from 'theme';
-  <% } else if (props.stylingPackage?.name === "unistyles") { %>
-    import { createStyleSheet, useStyles } from 'react-native-unistyles'
-		import { Text, View } from 'react-native';
-	<% } else { %>
-		import { Text, View, StyleSheet } from "react-native";
-	<% } %>
 
 	import Overview from "../screens/overview";
 	import Details from "../screens/details";
+  import { BackButton } from '../components/BackButton';
 
 	export type RootStackParamList = {
 		Overview: undefined;
@@ -26,14 +14,7 @@
 	const Stack = createStackNavigator<RootStackParamList>();
 
 	export default function RootStack() {
-    <% if (props.stylingPackage?.name === "restyle") { %>
-    const { colors } = useTheme();
-    <% } %>
 
-    <% if (props.stylingPackage?.name === "unistyles") { %>
-    const { styles, theme } = useStyles(stylesheet);
-    <% } %>
-    
 		return (
 			<NavigationContainer>
 				<Stack.Navigator initialRouteName="Overview">
@@ -41,95 +22,15 @@
 					<Stack.Screen
 						name="Details"
 						component={Details}
-						<% if (props.stylingPackage?.name === "nativewind") { %>
 							options={({ navigation }) => ({
-								headerLeft: () => (
-									<View className={styles.backButton}>
-										<Feather name="chevron-left" size={16} color="#007AFF" />
-										<Text className={styles.backButtonText} onPress={navigation.goBack}>Back</Text>
-									</View>
-								)
+                headerLeft: () => <BackButton onPress={navigation.goBack} />,
 							})}
-						<% } else if (props.stylingPackage?.name === "tamagui") { %>
-							options={({ navigation }) => ({
-								headerLeft: () => (
-									<Button
-										unstyled
-										flexDirection="row"
-										backgroundColor="transparent"
-										pressStyle={{ opacity: 0.5 }}
-										paddingLeft={20}
-										onPress={navigation.goBack}
-										icon={<Feather name="chevron-left" size={16} color="#007AFF" />}
-									>
-										<Text color="#007AFF">Back</Text>
-									</Button>
-								),
-							})}
-						<% } else if (props.stylingPackage?.name === "restyle") { %>
-              options={({ navigation }) => ({
-                headerLeft: () => (
-                  <Box flexDirection="row" paddingLeft="m_16">
-                    <Feather name="chevron-left" size={16} color={colors.blue} />
-                    <Text marginLeft="xs_4" color="blue" onPress={navigation.goBack}>
-                      Back
-                    </Text>
-                  </Box>
-                ),
-              })}
-            <% } else if (props.stylingPackage?.name === "unistyles") { %>
-              options={({ navigation }) => ({
-								headerLeft: () => (
-									<View style={styles.backButton}>
-										<Feather name="chevron-left" size={16} color={theme.colors.azureRadiance} />
-										<Text style={styles.backButtonText} onPress={navigation.goBack}>Back</Text>
-									</View>
-								)
-							})}
-						<% } else { %>
-							options={({ navigation }) => ({
-								headerLeft: () => (
-									<View style={styles.backButton}>
-										<Feather name="chevron-left" size={16} color="#007AFF" />
-										<Text style={styles.backButtonText} onPress={navigation.goBack}>Back</Text>
-									</View>
-								)
-							})}
-						<% } %>
 					/>
 				</Stack.Navigator>
 			</NavigationContainer>
 		);
 	}
 
-	<% if (props.stylingPackage?.name === "nativewind") { %>
-		const styles = {
-			backButton: "flex-row",
-			backButtonText: "text-blue-500 ml-1"
-		};
-  <% } else if (props.stylingPackage?.name === "unistyles") { %>
-		const stylesheet = createStyleSheet((theme) => ({
-      backButton: {
-        flexDirection: 'row',
-        paddingLeft: 20,
-      },
-      backButtonText: {
-        color: theme.colors.azureRadiance,
-        marginLeft: 4,
-      },
-    }));
-	<% } else if (props.stylingPackage?.name === "stylesheet") { %>
-		const styles = StyleSheet.create({
-			backButton: {
-				flexDirection: "row",
-				paddingLeft: 20,
-			},
-			backButtonText: {
-				color: "#007AFF",
-				marginLeft: 4
-			}
-		});
-	<% } %>
 <% } else if (props.navigationPackage?.options.type === 'tabs') { %>
 	import { NavigationContainer } from "@react-navigation/native";
 	import { createStackNavigator } from "@react-navigation/stack";