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

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";

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

@@ -1,96 +1,42 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { StackScreenProps } from '@react-navigation/stack';
-<% if (props.stylingPackage?.name === 'unistyles') { %>
-import { createStyleSheet, useStyles } from 'react-native-unistyles'
-import { Pressable } from 'react-native';
-<% } else if (props.navigationPackage?.options.type === 'drawer + tabs' ) { %>
-import { StyleSheet } from 'react-native';
-<% } else { %>
-import { Pressable, StyleSheet } from 'react-native';
-<% } %>
 
 import { RootStackParamList } from '.';
+import { HeaderButton } from '../components/HeaderButton';
+import { TabBarIcon } from '../components/TabBarIcon';
 import One from '../screens/one';
 import Two from '../screens/two';
 
 const Tab = createBottomTabNavigator();
 
-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} />;
-}
-
 type Props = StackScreenProps<RootStackParamList, 'TabNavigator'>;
 
 export default function TabLayout({ navigation }: Props) {
-  <% if (props.stylingPackage?.name === 'unistyles') {%>
-  const { styles } = useStyles(stylesheet) 
-  <% } %>
-  
   return (
     <Tab.Navigator
       screenOptions={{
         tabBarActiveTintColor: 'black',
-      <% if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
+	    <% if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
         headerShown: false,
       <% } %>
       }}>
       <Tab.Screen
-        name='One'
+        name="One"
         component={One}
         options={{
           title: 'Tab One',
-          tabBarIcon: ({ color }) => <TabBarIcon name='code' color={color} />,
-        <% if (props.navigationPackage?.options.type === 'tabs') { %>
-          headerRight: () => (
-            <Pressable onPress={() => navigation.navigate('Modal')}>
-              {({ pressed }) => (
-                <FontAwesome
-                  name='info-circle'
-                  size={25}
-                  color='gray'
-                  style={[styles.headerRight, { opacity: pressed ? 0.5 : 1 }]}
-                />
-              )}
-            </Pressable>
-            )
-        <% } %>
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          headerRight: () => <HeaderButton onPress={() => navigation.navigate('Modal')} />,
         }}
       />
       <Tab.Screen
-        name='Two'
+        name="Two"
         component={Two}
         options={{
           title: 'Tab Two',
-          tabBarIcon: ({ color }) => <TabBarIcon name='code' color={color} />,
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
         }}
       />
     </Tab.Navigator>
   );
 }
-
-<% 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/react-navigation/screens/details.tsx.ejs

@@ -1,113 +1,27 @@
-import { RouteProp, useRoute } from "@react-navigation/native";
-<% if (props.stylingPackage?.name === "nativewind") { %>
-	import { View, Text } from "react-native";
-<% } else if (props.stylingPackage?.name === "tamagui") { %>
-	import { YStack } from "tamagui";
-	import { Container, Main, Subtitle, Title } from "../../tamagui.config";
-<% } else if (props.stylingPackage?.name === "restyle") { %>
-	import { Box, Text } from 'theme';
-<% } else if (props.stylingPackage?.name === "unistyles") { %>
-  import { createStyleSheet, useStyles } from 'react-native-unistyles'
-	import { View, Text } from 'react-native';
-<% } else { %>
-	import { View, StyleSheet, Text } from "react-native";
-<% } %>
-import { RootStackParamList } from "../navigation";
+import { RouteProp, useRoute } from '@react-navigation/native';
+import { ScreenContent } from 'components/ScreenContent';
+import { StyleSheet, View } from 'react-native';
 
-type DetailsSreenRouteProp = RouteProp<RootStackParamList, "Details">;
+import { RootStackParamList } from '../navigation';
+
+type DetailsSreenRouteProp = RouteProp<RootStackParamList, 'Details'>;
 
 export default function Details() {
-	const router = useRoute<DetailsSreenRouteProp>();
-	<% if (props.stylingPackage?.name === "nativewind") { %>
-		return (
-			<View className={styles.container}>
-				<View className={styles.main}>
-					<Text className={styles.title}>Details</Text>
-					<Text className={styles.subtitle}>Showing details for user {router.params.name}.</Text>
-				</View>
-			</View>
-		);
-	<% } else if (props.stylingPackage?.name === "tamagui") { %>
-		return (
-			<Container>
-				<Main>
-					<YStack>
-						<Title>Details</Title>
-						<Subtitle>Showing details for user {router.params.name}.</Subtitle>
-					</YStack>
-				</Main>
-			</Container>
-		);
-	<% } else if (props.stylingPackage?.name === "restyle") { %>
-    return (
-      <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 {router.params.name}.
-          </Text>
-        </Box>
-      </Box>
-    );
-  <% } else if (props.stylingPackage?.name === "unistyles") { %>
-    const { styles, theme } = useStyles(stylesheet)
-    return (
-      <View style={styles.container}>
-        <View style={styles.main}>
-          <Text style={theme.components.title}>Details</Text>
-          <Text style={theme.components.subtitle}>Showing details for user {router.params.name}.</Text>
-        </View>
-      </View>
-    );
-	<% } else { %>
-		return (
-			<View style={styles.container}>
-				<View style={styles.main}>
-					<Text style={styles.title}>Details</Text>
-					<Text style={styles.subtitle}>Showing details for user {router.params.name}.</Text>
-				</View>
-			</View>
-		);
-	<% } %>
+  const router = useRoute<DetailsSreenRouteProp>();
+
+  return (
+    <View style={styles.container}>
+      <ScreenContent
+        path="screens/details.tsx"
+        title={`Showing details for user ${router.params.name}`}
+      />
+    </View>
+  );
 }
 
-<% if (props.stylingPackage?.name === "nativewind") { %>
-	const styles = {
-		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({
-		container: {
-			flex: 1,
-			padding: 24,
-		},
-		main: {
-			flex: 1,
-			maxWidth: 960,
-			marginHorizontal: 'auto',
-		},
-	});
-<% } else if (props.stylingPackage?.name === "stylesheet") { %>
-	const styles = StyleSheet.create({
-		container: {
-			flex: 1,
-			padding: 24,
-		},
-		main: {
-			flex: 1,
-			maxWidth: 960,
-			marginHorizontal: "auto",
-		},
-		title: {
-			fontSize: 64,
-			fontWeight: "bold",
-		},
-		subtitle: {
-			fontSize: 36,
-			color: "#38434D",
-		},
-	});
-<% } %>
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+});

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

@@ -1,102 +1,5 @@
-<% if (props.stylingPackage?.name === 'nativewind') { %>
-  import { Text, View } from 'react-native';
-  import EditScreenInfo from '../components/edit-screen-info';
-<% } 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 { 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} />
-      </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 />
-      </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%' />
-      </Box>
-    );
-  <% } else { %>
-      return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Home</Text>
-    <% if (props.internalizationPackage?.name === "i18next") { %>
-        <InternalizationExample />
-    <% } %>
-      <View style={styles.separator} />
-    </View>
-  );
-  <% } %>
+export default function Home() {
+  return <ScreenContent path="screens/home.tsx" title="Home" />;
 }
-
-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({
-  container: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  separator: {
-    height: 1,
-    marginVertical: 30,
-    width: '80%',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  }
-});
-<% } %>

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

@@ -1,108 +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, makeStyles } 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 { ScreenContent } from 'components/ScreenContent';
+import { StatusBar } from 'expo-status-bar';
+import { Platform } from 'react-native';
 
-import EditScreenInfo from "../components/edit-screen-info";
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import { InternalizationExample } from 'components/InternalizationExample';
+<% } %>
 
 export default function Modal() {
-	<% 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="src/screens/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="src/screens/modal.tsx" />
-						</YStack>
-					</Theme>
-				);
-	<% } else if (props.stylingPackage?.name === "restyle") { %>
-    const styles = useStyles();
-
-    return (
-      <Box flex={1} alignItems="center" justifyContent="center">
-        <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
-        <Text variant="title">Modal</Text>
-        <Box style={styles.separator} />
-        <EditScreenInfo path="src/screens/modal.tsx" />
-      </Box>
-    );
-  <% } else if (props.stylingPackage?.name === "unistyles") { %>
-    const { theme } = useStyles()
-    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='src/screens/modal.tsx' />
-			</View>
-		);
-	<% } 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="src/screens/modal.tsx" />
-			</View>
-		);
-	<% } %>
+  return (
+    <>
+      <ScreenContent path="screens/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 === "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"
-		}
-	});
-<% } %>