create-expo-stack 2.4.3 → 2.5.0-next.160eed8

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

@@ -1,188 +1,43 @@
-import { useNavigation } from "@react-navigation/native";
-import { StackNavigationProp } from "@react-navigation/stack";
-<% if (props.stylingPackage?.name === "nativewind") { %>
-	import { Text, TouchableOpacity, View } from "react-native";
-<% } else if (props.stylingPackage?.name === "tamagui") { %>
-	import { YStack } from "tamagui";
-	import { Container, Main, Title, Subtitle, Button, ButtonText } from '../../tamagui.config';
-<% } else if (props.stylingPackage?.name === "restyle") { %>
-  import { TouchableOpacity } from 'react-native';
-  import { Box, Text, makeStyles } from 'theme';
-<% } else if (props.stylingPackage?.name === "unistyles") { %>
-  import { createStyleSheet, useStyles } from 'react-native-unistyles'
-	import { Text, TouchableOpacity, View } from 'react-native';
-<% } else { %>
-	import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useNavigation } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { ScreenContent } from 'components/ScreenContent';
+import { StyleSheet, View } from 'react-native';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import { InternalizationExample } from 'components/InternalizationExample';
 <% } %>
-import { RootStackParamList } from "../navigation";
 
-type OverviewScreenNavigationProps = StackNavigationProp<RootStackParamList, "Overview">;
+import { Button } from '../components/Button';
+import { RootStackParamList } from '../navigation';
+
+type OverviewScreenNavigationProps = StackNavigationProp<RootStackParamList, 'Overview'>;
 
 export default function Overview() {
-	const navigation = useNavigation<OverviewScreenNavigationProps>();
-  	<% if (props.stylingPackage?.name === "nativewind") { %>
-		return (
-			<View className={styles.container}>
-				<View className={styles.main}>
-					<View>
-						<Text className={styles.title}>Hello World</Text>
-						<Text className={styles.subtitle}>This is the first page of your app.</Text>
-					</View>
-					<TouchableOpacity className={styles.button} onPress={() => navigation.navigate("Details", { name: "Dan" })}>
-						<Text className={styles.buttonText}>Show Details</Text>
-					</TouchableOpacity>
-				</View>
-			</View>
-		);
-	<% } else if (props.stylingPackage?.name === "tamagui") { %>
-		return (
-			<Container>
-				<Main>
-					<YStack>
-						<Title>Hello World</Title>
-						<Subtitle>This is the first page of your app.</Subtitle>
-					</YStack>
-					<Button  onPress={() => navigation.navigate("Details", { name: "Dan" })}>
-						<ButtonText>Show Details</ButtonText>
-					</Button>
-				</Main>
-			</Container>
-		);
-	<% } else if (props.stylingPackage?.name === "restyle") { %>
-    const styles = useStyles();
-    return (
-      <Box flex={1} padding="ml_24">
-        <Box flex={1} maxWidth={960} justifyContent="space-between">
-          <Box>
-            <Text variant="extra_large">Hello World</Text>
-            <Text variant="large" color="darkGray">
-              This is the first page of your app.
-            </Text>
-          </Box>
-          <TouchableOpacity
-            style={styles.button}
-            onPress={() => navigation.navigate('Details', { name: 'Dan' })}>
-            <Text variant="body" textAlign="center" color="white" fontWeight="600">
-              Show Details
-            </Text>
-          </TouchableOpacity>
-        </Box>
-      </Box>
-    );
-	<% } else if (props.stylingPackage?.name === "unistyles") { %>
-    const { styles, theme } = useStyles(stylesheet)
-		return (
-			<View style={styles.container}>
-				<View style={styles.main}>
-					<View>
-						<Text style={theme.components.title}>Hello World</Text>
-						<Text style={theme.components.subtitle}>This is the first page of your app.</Text>
-					</View>
-					<TouchableOpacity style={theme.components.button} onPress={() => navigation.navigate('Details', { name: 'Dan' })}>
-						<Text style={theme.components.buttonText}>Show Details</Text>
-					</TouchableOpacity>
-				</View>
-			</View>
-		);
-  <% } else { %>
-		return (
-			<View style={styles.container}>
-				<View style={styles.main}>
-					<View>
-						<Text style={styles.title}>Hello World</Text>
-						<Text style={styles.subtitle}>This is the first page of your app.</Text>
-					</View>
-					<TouchableOpacity style={styles.button} onPress={() => navigation.navigate("Details", { name: "Dan" })}>
-						<Text style={styles.buttonText}>Show Details</Text>
-					</TouchableOpacity>
-				</View>
-			</View>
-		);
-	<% } %>
+  const navigation = useNavigation<OverviewScreenNavigationProps>();
+
+  return (
+    <View style={styles.container}>
+      <ScreenContent path="screens/overview.tsx" title="Overview">
+      <% if (props.internalizationPackage?.name === "i18next") { %>
+        <InternalizationExample />
+      <% } %>
+      </ScreenContent>
+      <Button
+        onPress={() =>
+          navigation.navigate('Details', {
+            name: 'Dan',
+          })
+        }
+        title="Show Details"
+      />
+    </View>
+  );
 }
 
-<% if (props.stylingPackage?.name === "nativewind") { %>
-	const styles = {
-		button: "items-center bg-indigo-500 rounded-[28px] shadow-md p-4",
-		buttonText: "text-white text-lg font-semibold text-center",
-		container: "flex-1 p-6",
-		main: "flex-1 max-w-[960] justify-between",
-		title: "text-[64px] font-bold",
-		subtitle: "text-4xl text-gray-700",
-	};
-<% } else if (props.stylingPackage?.name === "restyle") { %>
-  const useStyles = makeStyles((theme) => ({
-    button: {
-      alignItems: 'center',
-      backgroundColor: theme.colors.purple,
-      borderRadius: theme.borderRadii.xl_24,
-      elevation: 5,
-      flexDirection: 'row',
-      justifyContent: 'center',
-      padding: theme.spacing.m_16,
-      shadowColor: theme.colors.black,
-      shadowOffset: {
-        height: 2,
-        width: 0,
-      },
-      shadowOpacity: 0.25,
-      shadowRadius: 3.84,
-    },
-  }));
-<% } else if (props.stylingPackage?.name === "unistyles") { %>
-  const stylesheet = createStyleSheet({
-		container: {
-			flex: 1,
-			padding: 24,
-		},
-		main: {
-			flex: 1,
-			maxWidth: 960,
-			marginHorizontal: 'auto',
-			justifyContent: 'space-between',
-		},
-	});
-<% } else if (props.stylingPackage?.name === "stylesheet") { %>
-	const styles = StyleSheet.create({
-		button: {
-			alignItems: "center",
-			backgroundColor: "#6366F1",
-			borderRadius: 24,
-			elevation: 5,
-			flexDirection: "row",
-			justifyContent: "center",
-			padding: 16,
-			shadowColor: "#000",
-			shadowOffset: {
-			height: 2,
-			width: 0
-			},
-			shadowOpacity: 0.25,
-			shadowRadius: 3.84
-		},
-		buttonText: {
-			color: "#FFFFFF",
-			fontSize: 16,
-			fontWeight: "600",
-			textAlign: "center",
-		},
-		container: {
-			flex: 1,
-			padding: 24,
-		},
-		main: {
-			flex: 1,
-			maxWidth: 960,
-			marginHorizontal: "auto",
-			justifyContent: "space-between",
-		},
-		title: {
-			fontSize: 64,
-			fontWeight: "bold",
-		},
-		subtitle: {
-			color: "#38434D",
-			fontSize: 36,
-		}
-	});
-<% } %>
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+});

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

@@ -1,100 +1,5 @@
-<% 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, makeStyles } 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 EditScreenInfo from "../components/edit-screen-info";
+import { ScreenContent } from 'components/ScreenContent';
 
 export default function TabTwoScreen() {
-	<% if (props.stylingPackage?.name === "nativewind") { %>
-		return (
-			<View className={styles.container}>
-				<Text className={styles.title}>Tab Two</Text>
-				<View className={styles.separator} />
-				<EditScreenInfo path="src/screens/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="src/screens/two.tsx" />
-				</YStack>
-			</Theme>
-		);    
-  <% } else 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='src/screens/two.tsx' />
-			</View>
-		);
-	<% } else if (props.stylingPackage?.name === "restyle") { %>
-    const styles = useStyles();
-
-    return (
-      <Box flex={1} alignItems="center" justifyContent="center">
-        <Text variant="title">Tab Two</Text>
-        <Box style={styles.separator} />
-        <EditScreenInfo path="src/screens/two.tsx" />
-      </Box>
-    );   
-	<% } else { %>
-		return (
-			<View style={styles.container}>
-				<Text style={styles.title}>Tab Two</Text>
-				<View style={styles.separator} />
-				<EditScreenInfo path="src/screens/two.tsx" />
-			</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 === "restyle") { %>
-    const useStyles = makeStyles((theme) => ({
-      separator: {
-        backgroundColor: theme.colors.gray,
-        height: 1,
-        marginVertical: theme.spacing.l_32,
-        opacity: 0.25,
-        width: '80%',
-      },
-    }));
-<% } else if (props.stylingPackage?.name === "stylesheet") { %>
-  	const styles = StyleSheet.create({
-		container: {
-			alignItems: "center",
-			flex: 1,
-			justifyContent: "center",
-		},
-		separator: {
-			backgroundColor: "gray",
-			height: 1,
-			marginVertical: 30,
-			opacity: 0.25,
-			width: "80%",
-		},
-		title: {
-			fontSize: 20,
-			fontWeight: "bold",
-		}
-	});
-<% } %>
+  return <ScreenContent path="screens/two.tsx" title="Tab Two" />;
+}

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

@@ -0,0 +1,15 @@
+import { Feather } from '@expo/vector-icons';
+import { Box, Text, useTheme } from 'theme';
+
+export const BackButton = ({ onPress }: { onPress: () => void }) => {
+  const { colors } = useTheme();
+
+  return (
+    <Box flexDirection="row" paddingLeft="m_16">
+      <Feather name="chevron-left" size={16} color={colors.blue} />
+      <Text marginLeft="xs_4" color="blue" onPress={onPress}>
+        Back
+      </Text>
+    </Box>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { TouchableOpacity } from 'react-native';
+import { Text, makeStyles } from 'theme';
+
+export const Button = ({ onPress, title }: { onPress: () => void; title: string }) => {
+  const styles = useStyles();
+
+  return (
+    <TouchableOpacity style={styles.button} onPress={onPress}>
+      <Text variant="body" textAlign="center" color="white" fontWeight="600">
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+export const useStyles = makeStyles((theme) => ({
+  button: {
+    alignItems: 'center',
+    backgroundColor: theme.colors.purple,
+    borderRadius: theme.borderRadii.xl_24,
+    elevation: 5,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: theme.spacing.m_16,
+    shadowColor: theme.colors.black,
+    shadowOffset: {
+      height: 2,
+      width: 0,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+  },
+}));

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

@@ -0,0 +1,29 @@
+import { Box, Text } from 'theme';
+
+<% 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 (
+    <Box alignItems="center" marginHorizontal="xl_64">
+      <Text variant="body" lineHeight={24} textAlign="center">
+        {title}
+      </Text>
+      <Box borderRadius="s_3" paddingHorizontal="xs_4" marginVertical="s_8">
+        <Text>{path}</Text>
+      </Box>
+      <Text variant="body" lineHeight={24} textAlign="center">
+        {description}
+      </Text>
+    </Box>
+  );
+};

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

@@ -0,0 +1,20 @@
+import { Box, Text } from 'theme';
+
+import { EditScreenInfo } from './EditScreenInfo';
+
+type ScreenContentProps = {
+  title: string;
+  path: string;
+  children?: React.ReactNode;
+};
+
+export const ScreenContent = ({ title, path, children }: ScreenContentProps ) => {
+  return (
+    <Box flex={1} alignItems="center" justifyContent="center">
+      <Text variant="title">{title}</Text>
+      <Box height={1} marginVertical="l_32" width="80%" backgroundColor="gray" />
+      <EditScreenInfo path={path} />
+      {children}
+    </Box>
+  );
+};

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

@@ -0,0 +1,19 @@
+import { Feather } from '@expo/vector-icons';
+import { Button, Text } from 'tamagui';
+
+export const BackButton = ({ onPress }: { onPress: () => void }) => {
+  return (
+    <Button
+      unstyled
+      flexDirection="row"
+      backgroundColor="transparent"
+      pressStyle={{
+        opacity: 0.5,
+      }}
+      paddingLeft={20}
+      onPress={onPress}
+      icon={<Feather name="chevron-left" size={16} color="#007AFF" />}>
+      <Text color="#007AFF">Back</Text>
+    </Button>
+  );
+};

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

@@ -0,0 +1,9 @@
+import { Button as TButton, ButtonText } from '../tamagui.config';
+
+export const Button = ({ onPress, title }: { onPress: () => void; title: string }) => {
+  return (
+    <TButton onPress={onPress}>
+      <ButtonText>{title}</ButtonText>
+    </TButton>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { YStack, H4, Paragraph } from 'tamagui';
+
+<% 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 (
+    <YStack>
+      <YStack alignItems="center" marginHorizontal="$6">
+        <H4>{title}</H4>
+        <YStack borderRadius="$3" marginVertical="$1">
+          <Paragraph>{path}</Paragraph>
+        </YStack>
+        <Paragraph>
+          {description}
+        </Paragraph>
+      </YStack>
+    </YStack>
+  );
+};

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

@@ -0,0 +1,22 @@
+import { YStack, H2, Separator, Theme } from 'tamagui';
+
+import { EditScreenInfo } from './EditScreenInfo';
+
+type ScreenContentProps = {
+  title: string;
+  path: string;
+  children?: React.ReactNode;
+};
+
+export const ScreenContent = ({ title, path, children}: ScreenContentProps) => {
+  return (
+    <Theme name="light">
+      <YStack flex={1} alignItems="center" justifyContent="center">
+        <H2>{title}</H2>
+        <Separator />
+        <EditScreenInfo path={path} />
+        {children}
+      </YStack>
+    </Theme>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { Feather } from '@expo/vector-icons';
+import { Text, View } from 'react-native';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
+
+export const BackButton = ({ onPress }: { onPress: () => void; }) => {
+  const { styles, theme } = useStyles(stylesheet);
+
+  return (
+    <View style={styles.backButton}>
+      <Feather name="chevron-left" size={16} color={theme.colors.azureRadiance} />
+      <Text style={styles.backButtonText} onPress={onPress}>
+        Back
+      </Text>
+    </View>
+  );
+};
+const stylesheet = createStyleSheet((theme) => ({
+  backButton: {
+    flexDirection: 'row',
+    paddingLeft: 20,
+  },
+  backButtonText: {
+    color: theme.colors.azureRadiance,
+    marginLeft: 4,
+  },
+}));

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

@@ -0,0 +1,12 @@
+import { Text, TouchableOpacity } from 'react-native';
+import { useStyles } from 'react-native-unistyles';
+
+export const Button = ({ onPress, title }: { onPress: () => void; title: string }) => {
+  const { theme } = useStyles();
+
+  return (
+    <TouchableOpacity style={theme.components.button} onPress={onPress}>
+      <Text style={theme.components.buttonText}>{title}</Text>
+    </TouchableOpacity>
+  );
+};

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

@@ -0,0 +1,61 @@
+import { Text, View } from 'react-native';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+import { useTranslation } from 'react-i18next';
+<% } %>
+
+export const EditScreenInfo = ({ path }: { path: string }) => {
+  const { styles } = useStyles(stylesheet);
+<% 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 style={styles.getStartedContainer}>
+        <Text style={styles.getStartedText}>{title}</Text>
+        <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
+          <Text>{path}</Text>
+        </View>
+        <Text style={styles.getStartedText}>
+          {description}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const stylesheet = createStyleSheet({
+  codeHighlightContainer: {
+    borderRadius: 3,
+    paddingHorizontal: 4,
+  },
+  getStartedContainer: {
+    alignItems: 'center',
+    marginHorizontal: 50,
+  },
+  getStartedText: {
+    fontSize: 17,
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+  helpContainer: {
+    alignItems: 'center',
+    marginHorizontal: 20,
+    marginTop: 15,
+  },
+  helpLink: {
+    paddingVertical: 15,
+  },
+  helpLinkText: {
+    textAlign: 'center',
+  },
+  homeScreenFilename: {
+    marginVertical: 7,
+  },
+});

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

@@ -0,0 +1,24 @@
+import { Text, View } from 'react-native';
+import { useStyles } from 'react-native-unistyles';
+
+import { EditScreenInfo } from './EditScreenInfo';
+
+type ScreenContentProps = {
+  title: string;
+  path: string;
+  children?: React.ReactNode;
+};
+
+
+export const ScreenContent = ({ title, path, children } : ScreenContentProps) => {
+  const { theme } = useStyles();
+
+  return (
+    <View style={theme.components.container}>
+      <Text style={theme.components.title}>{title}</Text>
+      <View style={theme.components.separator} />
+      <EditScreenInfo path={path} />
+      {children}
+    </View>
+  );
+};