create-expo-stack 2.5.0-next.738ca1b → 2.5.0-next.77e2bc3

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

@@ -1,108 +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";
-<% } %>
-<% if (props.internalizationPackage?.name === "i18next") { %>
-  import { InternalizationExample } from '../../components/InternalizationExample';
-<% } %>
+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>
-      <% if (props.internalizationPackage?.name === "i18next") { %>
-          <InternalizationExample />
-      <% } %>
-        <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>
-    <% if (props.internalizationPackage?.name === "i18next") { %>
-      <InternalizationExample />
-    <% } %>
-      <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>
-      <% if (props.internalizationPackage?.name === "i18next") { %>
-        <InternalizationExample />
-      <% } %>
-        <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>
-      <% if (props.internalizationPackage?.name === "i18next") { %>
-        <InternalizationExample />
-      <% } %>
-        <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>
-    <% if (props.internalizationPackage?.name === "i18next") { %>
-      <InternalizationExample />
-    <% } %>
-      <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/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/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,217 +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";
-<% } %>
-<% if (props.internalizationPackage?.name === "i18next") { %>
-  import { InternalizationExample } from '../components/InternalizationExample';
-<% } %>
-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>
-          <% if (props.internalizationPackage?.name === "i18next") { %>
-            <InternalizationExample />
-          <% } %>
-				</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>
-          <% if (props.internalizationPackage?.name === "i18next") { %>
-            <InternalizationExample />
-          <% } %>
-          </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>
-            <% if (props.internalizationPackage?.name === "i18next") { %>
-              <InternalizationExample />
-            <% } %>
-            </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>
-          <% if (props.internalizationPackage?.name === "i18next") { %>
-            <InternalizationExample   />
-          <% } %>
-          </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>
+        <ScreenContent path="app/index.tsx" title="Home">
         <% if (props.internalizationPackage?.name === "i18next") { %>
           <InternalizationExample />
         <% } %>
-				</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>
+        <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,
-		}
-	});
-<% } %>