create-expo-stack 2.3.15 → 2.4.0-next.2c00bdf

package/build/templates/packages/react-navigation/components/edit-screen-info.tsx.ejs

@@ -1,6 +1,11 @@
 import React from "react";
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import { Text, View } from "react-native";
+<% } 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 { Text, View } from 'react-native';
 <% } else { %>
   import { StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -30,6 +35,52 @@ import React from "react";
       </View>
     );
   }
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  export default function EditScreenInfo({ path }: { path: string }) {
+    return (
+      <Box>
+        <Box alignItems="center" marginHorizontal="xl_64">
+          <Text variant="body" lineHeight={24} textAlign="center">
+            Open up the code for this screen:
+          </Text>
+
+          <Box borderRadius="s_3" paddingHorizontal="xs_4" marginVertical="s_8">
+            <Text>{path}</Text>
+          </Box>
+
+          <Text variant="body" lineHeight={24} textAlign="center">
+            Change any of the text, save the file, and your app will automatically update.
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  export default function EditScreenInfo({ path }: { path: string }) {
+    const { styles } = useStyles(stylesheet)
+    return (
+      <View>
+        <View style={styles.getStartedContainer}>
+          <Text
+            style={styles.getStartedText}>
+            Open up the code for this screen:
+          </Text>
+
+          <View
+            style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
+            >
+            <Text>{path}</Text>
+          </View>
+
+          <Text
+            style={styles.getStartedText}
+            >
+            Change any of the text, save the file, and your app will automatically update.
+          </Text>
+        </View>
+      </View>
+    );
+  }
 <% } else { %>
   export default function EditScreenInfo({ path }: { path: string }) {
     return (
@@ -66,7 +117,37 @@ import React from "react";
     helpLink: "py-4",
     helpLinkText: "text-center"
   };
-<% } else { %>
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  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
+    }
+  });
+<% } else if (props.stylingPackage?.name !== "restyle") { %>
   const styles = StyleSheet.create({
     codeHighlightContainer: {
       borderRadius: 3,

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

@@ -1,15 +1,50 @@
+import { FontAwesome, Ionicons, MaterialIcons } from '@expo/vector-icons';
 import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Pressable } from 'react-native';
+import { StackScreenProps } from '@react-navigation/stack';
 
-import One from '../screens/one';
-import Two from '../screens/two';
+import TabNavigator from './tab-navigator';
+import Home from '../screens/home';
+import { RootStackParamList } from '.';
+
+type Props = StackScreenProps<RootStackParamList, 'DrawerNavigator'>;
 
 const Drawer = createDrawerNavigator();
 
-export default function DrawerNavigator() {
+export default function DrawerNavigator({ navigation }: Props) {
 	return (
-		<Drawer.Navigator initialRouteName="One">
-			<Drawer.Screen name="One" component={One} />
-			<Drawer.Screen name="Two" component={Two} />
+		<Drawer.Navigator>
+      <Drawer.Screen
+        name="Home"
+        component={Home}
+        options={{
+          drawerIcon: ({ size, color }) => <Ionicons name="home-outline" size={size} color={color} />,
+        }}
+      />
+			<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>
+          ),
+          drawerIcon: ({ size, color }) => (
+            <MaterialIcons name="border-bottom" size={size} color={color} />
+          ),
+        }}
+       />
 		</Drawer.Navigator>
 	);
 }

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

@@ -6,6 +6,11 @@
 		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";
 	<% } %>
@@ -21,6 +26,14 @@
 	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">
@@ -53,6 +66,26 @@
 									</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: () => (
@@ -74,6 +107,17 @@
 			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: {
@@ -112,13 +156,13 @@
 					<Stack.Screen
 						name="Modal"
 						component={Modal}
-						options={{ presentation: "modal", headerLeft: null }}
+						options={{ presentation: "modal", headerLeft: () => null }}
 					/>
 				</Stack.Navigator>
 			</NavigationContainer>
 		);
 	}
-	<% } else if (props.navigationPackage?.options.type === 'drawer') { %>
+	<% } else if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
 		import { NavigationContainer } from "@react-navigation/native";
 		import { createStackNavigator } from '@react-navigation/stack';
 	
@@ -128,6 +172,7 @@
 		export type RootStackParamList = {
 			DrawerNavigator: undefined;
 			Modal: undefined;
+      TabNavigator: undefined;
 		};
 	
 		const Stack = createStackNavigator<RootStackParamList>();
@@ -144,10 +189,10 @@
 						<Stack.Screen
 							name="Modal"
 							component={Modal}
-							options={{ presentation: "modal" }}
+							options={{ presentation: "modal", headerLeft: () => null }}
 						/>
 					</Stack.Navigator>
 				</NavigationContainer>
 			);
 		}
-	<% } %>
+<% } %>

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

@@ -1,57 +1,90 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { Pressable, StyleSheet } from "react-native";
+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 One from "../screens/one";
-import Two from "../screens/two";
+import { RootStackParamList } from '.';
+import One from '../screens/one';
+import Two from '../screens/two';
 
 const Tab = createBottomTabNavigator();
 
 function TabBarIcon(props: {
-  name: React.ComponentProps<typeof FontAwesome>["name"];
+  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({ navigation }) {
+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",
+        tabBarActiveTintColor: 'black',
+      <% 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} />,
+          title: 'Tab One',
+          tabBarIcon: ({ color }) => <TabBarIcon name='code' color={color} />,
+        <% if (props.navigationPackage?.options.type === 'tabs') { %>
           headerRight: () => (
-            <Pressable onPress={() => navigation.navigate("Modal")}>
+            <Pressable onPress={() => navigation.navigate('Modal')}>
               {({ pressed }) => (
                 <FontAwesome
-                  name="info-circle"
+                  name='info-circle'
                   size={25}
-                  color="gray"
+                  color='gray'
                   style={[styles.headerRight, { opacity: pressed ? 0.5 : 1 }]}
                 />
               )}
             </Pressable>
-          ),
+            )
+        <% } %>
         }}
       />
       <Tab.Screen
-        name="Two"
+        name='Two'
         component={Two}
         options={{
-          title: "Tab Two",
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          title: 'Tab Two',
+          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
@@ -59,4 +92,5 @@ const styles = StyleSheet.create({
   tabBarIcon: {
     marginBottom: -3
   }
-});
+});
+<% } %>

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

@@ -4,6 +4,11 @@ import { RouteProp, useRoute } from "@react-navigation/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";
 <% } %>
@@ -33,6 +38,27 @@ export default function Details() {
 				</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}>
@@ -52,6 +78,18 @@ export default function Details() {
 		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: {

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

@@ -0,0 +1,83 @@
+<% 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';
+<% } %>
+
+const Page = () => {
+  <% if (props.stylingPackage?.name === 'unistyles') { %>
+    const { theme } = useStyles();
+
+    return (
+      <View style={theme.components.container}>
+        <Text style={theme.components.title}>News</Text>
+        <View style={theme.components.separator} />
+      </View>
+    );
+  <% } else if (props.stylingPackage?.name === 'nativewind') { %>
+      return (
+    <View className={styles.container}>
+      <Text className={styles.title}>Home</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>Home</H2>
+        <Separator />
+      </YStack>
+    </Theme>
+  );    
+  <% } else if (props.stylingPackage?.name === 'restyle') { %>
+    return (
+      <Box flex={1} alignItems='center' justifyContent='center'>
+        <Text variant='title'>Home</Text>
+        <Box height={1} marginVertical='l_32' width='80%' />
+      </Box>
+    );
+  <% } else { %>
+      return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Home</Text>
+      <View style={styles.separator} />
+    </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({
+  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

@@ -3,6 +3,12 @@
 <% } 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";
 <% } %>
@@ -20,7 +26,7 @@ export default function Modal() {
 				<EditScreenInfo path="src/screens/modal.tsx" />
 			</View>
 		)
-			<% } else if (props.stylingPackage?.name === "tamagui") { %>
+	<% } else if (props.stylingPackage?.name === "tamagui") { %>
 		return (
 					<Theme name="light">
 						<YStack flex={1} alignItems="center" justifyContent="center">
@@ -31,6 +37,27 @@ export default function Modal() {
 						</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}>
@@ -49,6 +76,16 @@ export default function Modal() {
 		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: {

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

@@ -2,6 +2,11 @@
   	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";
 <% } %>
@@ -27,6 +32,25 @@ export default function TabOneScreen() {
 				</YStack>
 			</Theme>
 		);    
+	<% } else if (props.stylingPackage?.name === "restyle") { %>
+    const styles = useStyles();
+
+    return (
+      <Box flex={1} alignItems="center" justifyContent="center">
+        <Text variant="title">Tab One</Text>
+        <Box style={styles.separator} />
+        <EditScreenInfo path="src/screens/one.tsx" />
+      </Box>
+    );   
+  <% } else 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='src/screens/one.tsx' />
+			</View>
+		);
 	<% } else { %>
 		return (
 			<View style={styles.container}>
@@ -44,6 +68,16 @@ export default function TabOneScreen() {
 		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: {