create-expo-stack 2.4.0-next.1fb5698 → 2.4.0-next.2c00bdf

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

@@ -4,6 +4,9 @@
     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";
 <% } %>
@@ -11,7 +14,17 @@
 import EditScreenInfo from "../../components/edit-screen-info";
 
 export default function TabTwoScreen() {
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <% 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='app/(tabs)/two.tsx' />
+        </View>
+      );
+    <% } else if (props.stylingPackage?.name === "nativewind") { %>
         return (
 			<View className={styles.container}>
 				<Text className={styles.title}>Tab Two</Text>
@@ -36,7 +49,7 @@ export default function TabTwoScreen() {
           <Box height={1} marginVertical="l_32" width="80%" />
           <EditScreenInfo path="app/(tabs)/two.tsx" />
         </Box>
-      ); 
+      );
     <% } else { %>
         return (
 			<View style={styles.container}>

package/build/templates/packages/expo-router/tabs/app/[...unmatched].tsx.ejs

@@ -1,6 +1,9 @@
 import { Link, Stack } from 'expo-router';
 <% if (props.stylingPackage?.name === "nativewind") {%>
   import { Text, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  import { createStyleSheet, useStyles } from 'react-native-unistyles'
+  import { Text, View } from 'react-native';
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text, View } from 'react-native';
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
@@ -15,6 +18,10 @@ export default function NotFoundScreen() {
   const styles = useStyles();
 <% } %>
 
+<% if (props.stylingPackage?.name === "unistyles") {%>
+  const { styles } = useStyles(stylesheet);
+<% } %>
+
   return (
       <% if (props.stylingPackage?.name === "nativewind") {%>
         <>
@@ -71,6 +78,27 @@ export default function NotFoundScreen() {
     link: `mt-4 pt-4`,
     linkText: `text-base text-[#2e78b7]`,
 	};
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  const stylesheet = createStyleSheet((theme) => ({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 20,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+    },
+    link: {
+      marginTop: 16,
+      paddingVertical: 16,
+    },
+    linkText: {
+      fontSize: 14,
+      color: theme.colors.astral,
+    },
+  }));
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   const styles = StyleSheet.create({
     container: {

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

@@ -1,3 +1,7 @@
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import '../unistyles';
+<% } %>
+
 <% if (props.stylingPackage?.name === "tamagui") { %>
 	import React, { useEffect } from "react";
 	import { TamaguiProvider } from 'tamagui'

package/build/templates/packages/expo-router/tabs/app/modal.tsx.ejs

@@ -6,6 +6,9 @@
 <% } 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";
 <% } %>
@@ -14,7 +17,18 @@ import { StatusBar } from "expo-status-bar";
 import EditScreenInfo from "../components/edit-screen-info";
 
 export default function ModalScreen() {
-    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <% 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='app/modal.tsx' />
+        </View>
+      );
+    <% } else if (props.stylingPackage?.name === "nativewind") { %>
         return (
 			<View className={styles.container}>
 				<StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />

package/build/templates/packages/expo-router/tabs/components/edit-screen-info.tsx.ejs

@@ -4,11 +4,17 @@
     import { YStack, H4, Paragraph } from "tamagui"
 <% } 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";
 <% } %>
 
 export default function EditScreenInfo({ path }: { path: string }) {
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles } = useStyles(stylesheet);
+  <% } %>
     <% if (props.stylingPackage?.name === "nativewind") { %>
         return (
             <View>
@@ -84,6 +90,36 @@ export default function EditScreenInfo({ path }: { path: string }) {
     helpLinkText: `text-center`,
     homeScreenFilename: `my-2`,
     };
+<% } 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 === "stylesheet") { %>
     const styles = StyleSheet.create({
     codeHighlightContainer: {

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

@@ -1,3 +1,6 @@
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import './unistyles';
+<% } %>
 import "react-native-gesture-handler";
 <% if (props.stylingPackage?.name === "tamagui") { %>
 	import React, { useEffect } from "react";

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

@@ -3,6 +3,9 @@ import React from "react";
   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";
 <% } %>
@@ -52,6 +55,32 @@ import React from "react";
       </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 (
@@ -88,6 +117,36 @@ import React from "react";
     helpLink: "py-4",
     helpLinkText: "text-center"
   };
+<% } 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: {

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

@@ -8,6 +8,9 @@
 		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";
 	<% } %>
@@ -26,6 +29,11 @@
     <% if (props.stylingPackage?.name === "restyle") { %>
     const { colors } = useTheme();
     <% } %>
+
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles, theme } = useStyles(stylesheet);
+    <% } %>
+    
 		return (
 			<NavigationContainer>
 				<Stack.Navigator initialRouteName="Overview">
@@ -69,6 +77,15 @@
                   </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: () => (
@@ -90,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: {
@@ -134,7 +162,7 @@
 			</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';
 	
@@ -144,6 +172,7 @@
 		export type RootStackParamList = {
 			DrawerNavigator: undefined;
 			Modal: undefined;
+      TabNavigator: undefined;
 		};
 	
 		const Stack = createStackNavigator<RootStackParamList>();
@@ -160,7 +189,7 @@
 						<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,61 +1,90 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
+import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { StackScreenProps } from '@react-navigation/stack';
-import { Pressable, StyleSheet } from "react-native";
+<% 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 One from "../screens/one";
-import Two from "../screens/two";
+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} />;
 }
 
 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
@@ -63,4 +92,5 @@ const styles = StyleSheet.create({
   tabBarIcon: {
     marginBottom: -3
   }
-});
+});
+<% } %>

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

@@ -6,6 +6,9 @@ import { RouteProp, useRoute } from "@react-navigation/native";
 	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";
 <% } %>
@@ -45,6 +48,16 @@ export default function Details() {
           </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 (
@@ -65,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

@@ -6,6 +6,9 @@
 <% } 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";
 <% } %>
@@ -45,6 +48,16 @@ export default function Modal() {
         <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}>