create-expo-stack 2.4.0-next.f483b52 → 2.4.1-next.9242c21

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

@@ -1,25 +1,49 @@
+import { FontAwesome, Ionicons, MaterialIcons } from '@expo/vector-icons';
+import { Link } from 'expo-router';
 import { Drawer } from 'expo-router/drawer';
-import { Ionicons } from '@expo/vector-icons';
+import { Pressable, StyleSheet } from 'react-native';
 
 const DrawerLayout = () => (
-	<Drawer>
-		<Drawer.Screen
-			name="index"
-			options={{
-				headerTitle: 'Home',
-				drawerLabel: 'Home',
-				drawerIcon: ({ size, color }) => <Ionicons name="home-outline" size={size} color={color} />
-			}}
-		/>
-		<Drawer.Screen
-			name="news"
-			options={{
-				headerTitle: 'Newsfeed',
-				drawerLabel: 'News',
-				drawerIcon: ({ size, color }) => <Ionicons name="newspaper-outline" size={size} color={color} />
-			}}
-		/>
-	</Drawer>
+  <Drawer>
+    <Drawer.Screen
+      name="index"
+      options={{
+        headerTitle: 'Home',
+        drawerLabel: 'Home',
+        drawerIcon: ({ size, color }) => <Ionicons name="home-outline" size={size} color={color} />,
+      }}
+    />
+    <Drawer.Screen
+      name="(tabs)"
+      options={{
+        headerTitle: 'Tabs',
+        drawerLabel: 'Tabs',
+        drawerIcon: ({ size, color }) => (
+          <MaterialIcons name="border-bottom" size={size} 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>
+          </Link>
+        ),
+      }}
+    />
+  </Drawer>
 );
 
+const styles = StyleSheet.create({
+  headerRight: {
+    marginRight: 15,
+  },
+});
+
 export default DrawerLayout;

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

@@ -4,12 +4,27 @@
   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";
 <% } %>
 
+import EditScreenInfo from "../../components/edit-screen-info";
+
 const Page = () => {
-  <% if (props.stylingPackage?.name === "nativewind") { %>
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { theme } = useStyles()
+
+    return (
+      <View style={theme.components.container}>
+        <Text style={theme.components.title}>Home</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}>Home</Text>
@@ -23,6 +38,7 @@ const Page = () => {
       <YStack flex={1} alignItems="center" justifyContent="center">
         <H2>Home</H2>
         <Separator />
+        <EditScreenInfo path="app/(tabs)/index.tsx" />
       </YStack>
     </Theme>
   );    
@@ -31,6 +47,7 @@ const Page = () => {
       <Box flex={1} alignItems="center" justifyContent="center">
         <Text variant="title">Home</Text>
         <Box height={1} marginVertical="l_32" width="80%" />
+        <EditScreenInfo path="app/(tabs)/index.tsx" />
       </Box>
     );
   <% } else { %>
@@ -38,6 +55,7 @@ const Page = () => {
     <View style={styles.container}>
       <Text style={styles.title}>Home</Text>
       <View style={styles.separator} />
+      <EditScreenInfo path="app/(tabs)/index.tsx" />
     </View>
   );
   <% } %>
@@ -59,6 +77,7 @@ export default Page;
     justifyContent: "center",
   },
   separator: {
+    backgroundColor: '#d1d5db',
     height: 1,
     marginVertical: 30,
     width: "80%",

package/build/templates/packages/expo-router/drawer/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") { %>
@@ -13,6 +16,8 @@ import { Link, Stack } from 'expo-router';
 export default function NotFoundScreen() {
 <% if (props.stylingPackage?.name === "restyle") { %>
   const styles = useStyles();
+<% } else if (props.stylingPackage?.name === "unistyles") {%>
+  const { styles } = useStyles(stylesheet);
 <% } %>
 
   return (
@@ -71,6 +76,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/drawer/app/_layout.tsx.ejs

@@ -1,13 +1,19 @@
+<% if (props.stylingPackage?.name === "nativewind") { %>
+import '../global.css';
+<% } %>
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import '../unistyles';
+<% } %>
+
 import 'react-native-gesture-handler';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { Slot } from 'expo-router';
-<% if (props.stylingPackage?.name === "tamagui") { %>
-	import React, { useEffect } from "react";
-	import { TamaguiProvider } from 'tamagui'
-	import { SplashScreen } from "expo-router";
-	import { useFonts } from "expo-font";
+import { Stack } from 'expo-router';
 
-	import config from '../tamagui.config'
+<% if (props.stylingPackage?.name==="tamagui" ) { %>
+  import React, { useEffect } from "react";
+  import { TamaguiProvider } from 'tamagui'
+  import { SplashScreen } from "expo-router";
+  import { useFonts } from "expo-font";
 
 	SplashScreen.preventAutoHideAsync();
 <% }  else if (props.stylingPackage?.name === "restyle") { %>
@@ -17,25 +23,25 @@ import { Slot } from 'expo-router';
 <% } %>
 
 export const unstable_settings = {
-	// Ensure that reloading on `/modal` keeps a back button present.
-	initialRouteName: "(drawer)",
+  // Ensure that reloading on `/modal` keeps a back button present.
+  initialRouteName: "(drawer)",
 };
 
 export default function RootLayout() {
-  	<% if (props.stylingPackage?.name === "tamagui") { %>
-    	const [loaded] = useFonts({
-      		Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
-      		InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf")
-    	});
+  <% if (props.stylingPackage?.name==="tamagui" ) { %>
+    const [loaded] = useFonts({
+      Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
+      InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf")
+    });
 
-    	useEffect(() => {
-      		if (loaded) {
-        		SplashScreen.hideAsync();
-      		}
-    	}, [loaded]);
+    useEffect(() => {
+      if (loaded) {
+        SplashScreen.hideAsync();
+      }
+    }, [loaded]);
 
-    	if (!loaded) return null;
-  	<% } %>
+    if (!loaded) return null;
+  <% } %>
 
   	return (
     	<% if (props.stylingPackage?.name === "tamagui") { %>
@@ -43,13 +49,16 @@ export default function RootLayout() {
     	<% } else if (props.stylingPackage?.name === "restyle") { %>
     		<ThemeProvider theme={theme}>
     	<% } %>
-		  <GestureHandlerRootView style={{ flex: 1 }}>
-      <Slot />
-    </GestureHandlerRootView>
-		<% if (props.stylingPackage?.name === "tamagui") { %>
-			</TamaguiProvider>
-    <% } else if (props.stylingPackage?.name === "restyle") { %>
-    	</ThemeProvider>
-    <% } %>
-  	);
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <Stack>
+            <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
+            <Stack.Screen name="modal" options={{ title: 'Modal', presentation: 'modal' }} />
+          </Stack>
+        </GestureHandlerRootView>
+      <% if (props.stylingPackage?.name === "tamagui") { %>
+        </TamaguiProvider>
+      <% } else if (props.stylingPackage?.name === "restyle") { %>
+        </ThemeProvider>
+      <% } %>
+  );
 }

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

@@ -0,0 +1,96 @@
+ <% 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 { StatusBar } from 'expo-status-bar';
+
+import EditScreenInfo from '../components/edit-screen-info';
+
+export default function ModalScreen() {
+    <% 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'} />
+				<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>
+		);
+    <% } %>
+}
+
+<% 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/drawer/components/edit-screen-info.tsx.ejs

@@ -0,0 +1,153 @@
+<% if (props.stylingPackage?.name === 'nativewind') { %>
+    import { Text, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === 'tamagui') { %>
+    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>
+                <View className={styles.getStartedContainer}>
+                    <Text className={styles.getStartedText}>
+                        Open up the code for this screen:
+                    </Text>
+                    <View className={styles.codeHighlightContainer + styles.homeScreenFilename}>
+                        <Text>{path}</Text>
+                    </View>
+                    <Text className={styles.getStartedText}>
+                        Change any of the text, save the file, and your app will automatically update.
+                    </Text>
+                </View>
+            </View>
+        );
+    <% } else if (props.stylingPackage?.name === 'tamagui') { %>
+        return (
+            <YStack>
+                <YStack alignItems='center' marginHorizontal='$6'>
+                    <H4>
+                        Open up the code for this screen:
+                    </H4>
+                    <YStack borderRadius='$3' marginVertical='$1'>
+                        <Paragraph>{path}</Paragraph>
+                    </YStack>
+                    <Paragraph>
+                        Change any of the text, save the file, and your app will automatically update.
+                    </Paragraph>
+                </YStack>
+            </YStack>
+        );
+    <% } else if (props.stylingPackage?.name === 'restyle') { %>
+        return (
+          <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>
+        );
+    <% } else { %>
+        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>
+        );
+    <% } %>
+}
+
+<% if (props.stylingPackage?.name === 'nativewind') { %>
+    const styles = {
+    codeHighlightContainer: `rounded-md px-1`,
+    getStartedContainer: `items-center mx-12`,
+    getStartedText: `text-lg leading-6 text-center`,
+    helpContainer: `items-center mx-5 mt-4`,
+    helpLink: `py-4`,
+    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: {
+        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
+    }
+    });
+<% } %>

package/build/templates/packages/expo-router/metro.config.js.ejs

@@ -0,0 +1,16 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+<% if (props.stylingPackage?.name === "nativewind") { %>
+  const { withNativeWind } = require("nativewind/metro");
+<% } %>
+
+/** @type {import('expo/metro-config').MetroConfig} */
+// eslint-disable-next-line no-undef
+const config = getDefaultConfig(__dirname);
+
+<% if (props.stylingPackage?.name === "nativewind") { %>
+  module.exports = withNativeWind(config, { input: "./global.css" });
+<% } else { %>
+  module.exports = config;
+<% } %>
+

package/build/templates/packages/expo-router/stack/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({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 20,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+    },
+    link: {
+      marginTop: 16,
+      paddingVertical: 16,
+    },
+    linkText: {
+      fontSize: 14,
+      color: '#2e78b7',
+    },
+  });
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   const styles = StyleSheet.create({
     container: {

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

@@ -1,3 +1,10 @@
+<% if (props.stylingPackage?.name === "nativewind") { %>
+import '../global.css';
+<% } %>
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import '../unistyles';
+<% } %>
+
 <% if (props.stylingPackage?.name === "tamagui") { %>
 	import { useFonts } from 'expo-font';
   import { SplashScreen, Stack } from 'expo-router';

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

@@ -8,6 +8,9 @@
 <% } 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";
 <% } %>
@@ -17,7 +20,19 @@ import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 export default function Details() {
 	const { name } = useLocalSearchParams();
   const router = useRouter();
-	<% if (props.stylingPackage?.name === "nativewind") { %>
+
+  <% 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}>
@@ -84,6 +99,14 @@ export default function Details() {
           </Box>
         </Box>
       </>
+    <% } else if (props.stylingPackage?.name === "unistyles") { %>
+      <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 /> }} />
@@ -105,6 +128,25 @@ export default function Details() {
 		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: {