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

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

@@ -1,177 +1,23 @@
-<% if (props.stylingPackage?.name === "nativewind") { %>
-	import { Text, TouchableOpacity, View } from "react-native";
-<% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import React from "react";
-  import { Stack, useRouter } from "expo-router";
-	import { Button, Text, YStack } from "tamagui";
-	import { Container, Main, Subtitle, Title } from "../tamagui.config";
-<% } else if (props.stylingPackage?.name === "restyle") { %>
-  import { Box, Text } from 'theme';
-  import { TouchableOpacity } from 'react-native';
-<% } 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 { Feather } from '@expo/vector-icons';
-import { Stack, useLocalSearchParams, useRouter } from "expo-router";
+import { ScreenContent } from 'components/ScreenContent';
+import { Stack, useLocalSearchParams } from 'expo-router';
+import { StyleSheet, View } from 'react-native';
 
 export default function Details() {
-	const { name } = useLocalSearchParams();
-  const router = useRouter();
+  const { name } = useLocalSearchParams();
 
-  <% if (props.stylingPackage?.name === "unistyles") { %>
-    const { styles, theme } = useStyles(stylesheet);
-
-    const BackButton = () => (
-			<TouchableOpacity onPress={router.back}>
-        <View style={styles.backButton}>
-          <Feather name='chevron-left' size={16} color={theme.colors.azureRadiance} />
-          <Text style={styles.backButtonText}>Back</Text>
-        </View>
-			</TouchableOpacity>
-		);
-  <% } else if (props.stylingPackage?.name === "nativewind") { %>
-		const BackButton = () => (
-			<TouchableOpacity onPress={router.back}>
-			<View className={styles.backButton}>
-				<Feather name="chevron-left" size={16} color="#007AFF" />
-				<Text className={styles.backButtonText}>Back</Text>
-			</View>
-			</TouchableOpacity>
-		);
-	<% } else if (props.stylingPackage?.name === "tamagui") { %>
-
-		const BackButton = () => (
-			<Button unstyled flexDirection="row" backgroundColor="transparent" paddingLeft={0} pressStyle={{ opacity: 0.5 }} onPress={router.back} icon={<Feather name="chevron-left" size={16} color="#007AFF" />}><Text color="#007AFF">Back</Text></Button>
-		)
-	<% } else if (props.stylingPackage?.name === "restyle") { %>
-    const BackButton = () => (
-      <TouchableOpacity onPress={router.back}>
-        <Box flexDirection="row">
-          <Feather name="chevron-left" size={16} color="#007AFF" />
-          <Text color="blue" marginLeft="xs_4">
-            Back
-          </Text>
-        </Box>
-      </TouchableOpacity>
-    );
-	<% } else { %>
-		const BackButton = () => (
-			<TouchableOpacity onPress={router.back}>
-			<View style={styles.backButton}>
-				<Feather name="chevron-left" size={16} color="#007AFF" />
-				<Text style={styles.backButtonText}>Back</Text>
-			</View>
-			</TouchableOpacity>
-		);
-	<% } %>
-
-	return (
-		<% if (props.stylingPackage?.name === "nativewind") { %>
-			<View className={styles.container}>
-        <Stack.Screen options={{ title: "Details", headerLeft: () => <BackButton /> }} />
-				<View className={styles.main}>
-					<Text className={styles.title}>Details</Text>
-					<Text className={styles.subtitle}>Showing details for user {name}.</Text>
-				</View>
-			</View>
-		<% } else if (props.stylingPackage?.name === "tamagui") { %>
-			<Container>
-        <Stack.Screen options={{ title: "Details", headerLeft: () => <BackButton /> }} />
-				<Main>
-					<YStack>
-						<Title>Details</Title>
-						<Subtitle>Showing details for user {name}.</Subtitle>
-					</YStack>
-				</Main>
-			</Container>
-		<% } else if (props.stylingPackage?.name === "restyle") { %>
-      <>
-        <Stack.Screen options={{ title: 'Details', headerLeft: () => <BackButton /> }} />
-        <Box flex={1} padding="ml_24">
-          <Box flex={1} maxWidth={960}>
-            <Text variant="extra_large">Details</Text>
-            <Text variant="large" color="darkGray">
-              Showing details for user {name}.
-            </Text>
-          </Box>
-        </Box>
-      </>
-    <% } else if (props.stylingPackage?.name === "unistyles") { %>
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Details' }} />
       <View style={styles.container}>
-        <Stack.Screen options={{ title: "Details", headerLeft: () => <BackButton /> }} />
-				<View style={styles.main}>
-					<Text style={theme.components.title}>Details</Text>
-					<Text style={theme.components.subtitle}>Showing details for user {name}.</Text>
-				</View>
-			</View>
-		<% } else { %>
-			<View style={styles.container}>
-        <Stack.Screen options={{ title: "Details", headerLeft: () => <BackButton /> }} />
-				<View style={styles.main}>
-					<Text style={styles.title}>Details</Text>
-					<Text style={styles.subtitle}>Showing details for user {name}.</Text>
-				</View>
-			</View>
-		<% } %>
-	);
+        <ScreenContent path="screens/details.tsx" title={`Showing details for user ${name}`} />
+      </View>
+    </>
+  );
 }
 
-<% if (props.stylingPackage?.name === "nativewind") { %>
-	const styles = {
-    backButton: "flex-row",
-		backButtonText: "text-blue-500 ml-1",
-		container: "flex-1 p-6",
-		main: "flex-1 max-w-[960]",
-		title: "text-[64px] font-bold",
-		subtitle: "text-4xl text-gray-700",
-	};
-<% } else if (props.stylingPackage?.name === "unistyles") { %>
-	const stylesheet = createStyleSheet((theme) => ({
-    backButton: {
-      flexDirection: 'row',
-    },
-    backButtonText: {
-      color: theme.colors.azureRadiance,
-      marginLeft: 4,
-    },
-    container: {
-      flex: 1,
-      padding: 24,
-    },
-    main: {
-      flex: 1,
-      maxWidth: 960,
-      marginHorizontal: 'auto',
-    },
-  }));
-<% } else if (props.stylingPackage?.name === "stylesheet") { %>
-	const styles = StyleSheet.create({
-    backButton: {
-			flexDirection: "row",
-		},
-		backButtonText: {
-			color: "#007AFF",
-			marginLeft: 4,
-		},
-		container: {
-			flex: 1,
-			padding: 24,
-		},
-		main: {
-			flex: 1,
-			maxWidth: 960,
-			marginHorizontal: "auto",
-		},
-		title: {
-			fontSize: 64,
-			fontWeight: "bold",
-		},
-		subtitle: {
-			fontSize: 36,
-			color: "#38434D",
-		},
-	});
-<% } %>
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+});

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

@@ -1,199 +1,35 @@
-<% 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 { Stack } from "expo-router";
+import { Stack, Link } from 'expo-router';
+import { StyleSheet, View } from 'react-native';
 
-import { Link } from "expo-router";
+import { Button } from '../components/Button';
 
-export default function Page() {
-  <% if (props.stylingPackage?.name === "restyle") { %>
-    const styles = useStyles();
-  <% } %>
+import { ScreenContent } from '~/components/ScreenContent';
 
-  <% if (props.stylingPackage?.name === "unistyles") { %>
-    const { styles, theme } = useStyles(stylesheet);
-  <% } %>
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import { InternalizationExample } from 'components/InternalizationExample';
+<% } %>
 
-	return (
-		<% if (props.stylingPackage?.name === "nativewind") { %>
-			<View className={styles.container}>
-        <Stack.Screen options={{ title: "Overview" }} />
-				<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>
-				<Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
-					<TouchableOpacity className={styles.button} >
-					<Text className={styles.buttonText}>Show Details</Text>
-					</TouchableOpacity>
-				</Link>
-				</View>
-			</View>
-		<% } else if (props.stylingPackage?.name === "tamagui") { %>
-			<Container>
-				<Main>
-          <Stack.Screen options={{ title: "Overview" }} />
-          <YStack>
-            <Title>Hello World</Title>
-            <Subtitle>This is the first page of your app.</Subtitle>
-          </YStack>
-          <Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
-            <Button><ButtonText>Show Details</ButtonText></Button>
-          </Link>
-				</Main>
-			</Container>
-		<% } else if (props.stylingPackage?.name === "restyle") { %>
-      <>
-        <Stack.Screen options={{ title: "Overview" }} />
-        <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>
-            <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
-              <TouchableOpacity
-                style={styles.button}
-              >
-                <Text variant="body" textAlign="center" color="white" fontWeight="600">
-                  Show Details
-                </Text>
-              </TouchableOpacity>
-            </Link>
-          </Box>
-        </Box>
-      </>
-    <% } else if (props.stylingPackage?.name === "unistyles") { %>
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Home' }} />
       <View style={styles.container}>
-        <View style={styles.main}>
-          <Stack.Screen options={{ title: 'Overview' }} />
-          <View>
-            <Text style={theme.components.title}>Hello World</Text>
-            <Text style={theme.components.subtitle}>This is the first page of your app.</Text>
-          </View>
-          <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
-            <TouchableOpacity style={theme.components.button} >
-              <Text style={theme.components.buttonText}>Show Details</Text>
-            </TouchableOpacity>
-          </Link>
-        </View>
-			</View>
-  	<% } else { %>
-			<View style={styles.container}>
-				<View style={styles.main}>
-          <Stack.Screen options={{ title: "Overview" }} />
-				<View>
-					<Text style={styles.title}>Hello World</Text>
-					<Text style={styles.subtitle}>This is the first page of your app.</Text>
-				</View>
-				<Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
-					<TouchableOpacity style={styles.button} >
-					<Text style={styles.buttonText}>Show Details</Text>
-					</TouchableOpacity>
-				</Link>
-				</View>
-			</View>
-		<% } %>
-	);
+        <ScreenContent path="app/index.tsx" title="Home">
+        <% if (props.internalizationPackage?.name === "i18next") { %>
+          <InternalizationExample />
+        <% } %>
+        </ScreenContent>
+        <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
+          <Button title="Show Details" />
+        </Link>
+      </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({
+const styles = StyleSheet.create({
   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,
-		}
-	});
-<% } %>

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

@@ -1,26 +1,10 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { Link, Tabs } from "expo-router";
-<% if (props.stylingPackage?.name === "unistyles") { %>
-import { createStyleSheet, useStyles } from 'react-native-unistyles'
-import { Pressable } from 'react-native';
-<% } else { %>
-import { Pressable, StyleSheet } from "react-native";
-<% } %>
+import { HeaderButton } from '../../components/HeaderButton';
+import { TabBarIcon } from '../../components/TabBarIcon';
+
 
-function TabBarIcon(props: {
-  name: React.ComponentProps<typeof FontAwesome>["name"];
-  color: string;
-}) {
-  <% if (props.stylingPackage?.name === "unistyles") { %>
-  const {styles} = useStyles(stylesheet)
-  <% } %>
-  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
-}
 
 export default function TabLayout() {
-  <% if (props.stylingPackage?.name === "unistyles") { %>
-  const { styles } = useStyles(stylesheet)
-  <% } %>
   return (
     <Tabs
       screenOptions={{
@@ -30,19 +14,10 @@ export default function TabLayout() {
         name='index'
         options={{
           title: 'Tab One',
-          tabBarIcon: ({ color }) => <TabBarIcon name='code' color={color} />,
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
           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>
           ),
         }}
@@ -50,7 +25,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="two"
         options={{
-          title: "Tab Two",
+          title: 'Tab Two',
           tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
         }}
       />
@@ -58,22 +33,3 @@ export default function TabLayout() {
   );
 }
 
-<% if (props.stylingPackage?.name === "unistyles") { %>
-const stylesheet = createStyleSheet({
-  headerRight: {
-    marginRight: 15
-  },
-  tabBarIcon: {
-    marginBottom: -3
-  }
-});
-<% } else { %>
-const styles = StyleSheet.create({
-  headerRight: {
-    marginRight: 15
-  },
-  tabBarIcon: {
-    marginBottom: -3
-  }
-});
-<% } %>

package/build/templates/packages/expo-router/tabs/app/(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/(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/(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/(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/(tabs)/index.tsx" />
-        </Box>
-      );
-    <% } else { %>
-        return (
-			<View style={styles.container}>
-				<Text style={styles.title}>Tab One</Text>
-				<View style={styles.separator} />
-				<EditScreenInfo path="app/(tabs)/index.tsx" />
-			</View>
-		);
-    <% } %>
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab One' }} />
+      <View style={styles.container}>
+        <ScreenContent path="app/(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,
+  },
+});