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

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

@@ -5,6 +5,12 @@
   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";
 <% } %>
@@ -14,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}>
@@ -28,6 +46,17 @@ export default function Details() {
 		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}>
@@ -58,6 +87,26 @@ export default function Details() {
 					</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") { %>
+      <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 /> }} />
@@ -79,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: {

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

@@ -3,6 +3,12 @@
 <% } 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";
 <% } %>
@@ -11,6 +17,14 @@ import { Stack } from "expo-router";
 import { Link } from "expo-router";
 
 export default function Page() {
+  <% if (props.stylingPackage?.name === "restyle") { %>
+    const styles = useStyles();
+  <% } %>
+
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles, theme } = useStyles(stylesheet);
+  <% } %>
+
 	return (
 		<% if (props.stylingPackage?.name === "nativewind") { %>
 			<View className={styles.container}>
@@ -27,7 +41,7 @@ export default function Page() {
 				</Link>
 				</View>
 			</View>
-			<% } else if (props.stylingPackage?.name === "tamagui") { %>
+		<% } else if (props.stylingPackage?.name === "tamagui") { %>
 			<Container>
 				<Main>
           <Stack.Screen options={{ title: "Overview" }} />
@@ -40,7 +54,45 @@ export default function Page() {
           </Link>
 				</Main>
 			</Container>
-			<% } else { %>
+		<% } 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>
+            </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") { %>
+      <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>
+          </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" }} />
@@ -68,6 +120,39 @@ export default function Page() {
 		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({
+  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: {

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

@@ -1,33 +1,44 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { Link, Tabs } from "expo-router";
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { createStyleSheet, useStyles } from 'react-native-unistyles'
+import { Pressable } from 'react-native';
+<% } else { %>
 import { Pressable, StyleSheet } from "react-native";
+<% } %>
 
 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} />;
 }
 
 export default function TabLayout() {
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+  const { styles } = useStyles(stylesheet)
+  <% } %>
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: "black",
+        tabBarActiveTintColor: 'black',
       }}>
       <Tabs.Screen
-        name="index"
+        name='index'
         options={{
-          title: "Tab One",
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          title: 'Tab One',
+          tabBarIcon: ({ color }) => <TabBarIcon name='code' color={color} />,
           headerRight: () => (
-            <Link href="/modal" asChild>
+            <Link href='/modal' asChild>
               <Pressable>
                 {({ pressed }) => (
                   <FontAwesome
-                    name="info-circle"
+                    name='info-circle'
                     size={25}
-                    color="gray"
+                    color='gray'
                     style={[styles.headerRight, { opacity: pressed ? 0.5 : 1 }]}
                   />
                 )}
@@ -47,6 +58,16 @@ export default function TabLayout() {
   );
 }
 
+<% if (props.stylingPackage?.name === "unistyles") { %>
+const stylesheet = createStyleSheet({
+  headerRight: {
+    marginRight: 15
+  },
+  tabBarIcon: {
+    marginBottom: -3
+  }
+});
+<% } else { %>
 const styles = StyleSheet.create({
   headerRight: {
     marginRight: 15
@@ -54,4 +75,5 @@ const styles = StyleSheet.create({
   tabBarIcon: {
     marginBottom: -3
   }
-});
+});
+<% } %>

package/build/templates/packages/expo-router/tabs/app/(tabs)/index.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 } 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";
 <% } %>
@@ -9,7 +14,17 @@
 import EditScreenInfo from "../../components/edit-screen-info";
 
 export default function TabOneScreen() {
-    <% 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 One</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}>Tab One</Text>
@@ -27,6 +42,14 @@ export default function TabOneScreen() {
 				</YStack>
 			</Theme>
 		);    
+    <% } else if (props.stylingPackage?.name === "restyle") { %>
+      return (
+        <Box flex={1} alignItems="center" justifyContent="center">
+          <Text variant="title">Tab One</Text>
+          <Box height={1} marginVertical="l_32" width="80%" />
+          <EditScreenInfo path="app/(tabs)/index.tsx" />
+        </Box>
+      );
     <% } else { %>
         return (
 			<View style={styles.container}>
@@ -52,6 +75,7 @@ export default function TabOneScreen() {
 			justifyContent: "center",
 		},
 		separator: {
+      backgroundColor: '#d1d5db',
 			height: 1,
 			marginVertical: 30,
 			width: "80%",

package/build/templates/packages/expo-router/tabs/app/(tabs)/two.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 } 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";
 <% } %>
@@ -9,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>
@@ -27,6 +42,14 @@ export default function TabTwoScreen() {
 				</YStack>
 			</Theme>
 		);    
+    <% } else if (props.stylingPackage?.name === "restyle") { %>
+      return (
+        <Box flex={1} alignItems="center" justifyContent="center">
+          <Text variant="title">Tab Two</Text>
+          <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,14 +1,27 @@
 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") { %>
   import { YStack } from "tamagui";
 	import { Container, Main, Subtitle, Title } from "../tamagui.config";
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  import { Box, Text, makeStyles } from 'theme';
 <% } %>
 
 export default function NotFoundScreen() {
+<% if (props.stylingPackage?.name === "restyle") { %>
+  const styles = useStyles();
+<% } %>
+
+<% if (props.stylingPackage?.name === "unistyles") {%>
+  const { styles } = useStyles(stylesheet);
+<% } %>
+
   return (
       <% if (props.stylingPackage?.name === "nativewind") {%>
         <>
@@ -32,6 +45,18 @@ export default function NotFoundScreen() {
             </YStack>
           </Main>
         </Container>
+      <% } else if (props.stylingPackage?.name === "restyle") {%>
+        <>
+          <Stack.Screen options={{ title: 'Oops!' }} />
+          <Box flex={1} justifyContent="center" alignItems="center" padding="ml_24">
+            <Text variant="title">This screen doesn't exist.</Text>
+            <Link href="/" style={styles.link}>
+              <Text variant="body" color="blue">
+                Go to home screen!
+              </Text>
+            </Link>
+          </Box>
+        </>
       <% } else { %>
         <>
           <Stack.Screen options={{ title: "Oops!" }} />
@@ -53,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: {
@@ -74,4 +120,11 @@ export default function NotFoundScreen() {
       color: '#2e78b7',
     },
   });
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  const useStyles = makeStyles((theme) => ({
+    link: {
+      marginTop: theme.spacing.m_16,
+      paddingVertical: theme.spacing.m_16,
+    },
+  }));
 <% } %>

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'
@@ -7,6 +11,10 @@
 	import config from '../tamagui.config'
 
 	SplashScreen.preventAutoHideAsync();
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  import { ThemeProvider } from '@shopify/restyle';
+  import { Stack } from 'expo-router';
+  import { theme } from 'theme';
 <% } else { %>
 	import { Stack } from "expo-router";
 <% } %>
@@ -35,6 +43,8 @@ export default function RootLayout() {
   	return (
     	<% if (props.stylingPackage?.name === "tamagui") { %>
     		<TamaguiProvider config={config}>
+    	<% } else if (props.stylingPackage?.name === "restyle") { %>
+    		<ThemeProvider theme={theme}>
     	<% } %>
 		<Stack>
 			<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
@@ -42,6 +52,8 @@ export default function RootLayout() {
 		</Stack>
 		<% if (props.stylingPackage?.name === "tamagui") { %>
 			</TamaguiProvider>
+		<% } else if (props.stylingPackage?.name === "restyle") { %>
+			</ThemeProvider>
 		<% } %>
   	);
 }

package/build/templates/packages/expo-router/tabs/app/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 } 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";
 <% } %>
@@ -11,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"} />
@@ -31,6 +48,15 @@ export default function ModalScreen() {
 				</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}>

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

@@ -1,13 +1,20 @@
-import React from "react";
 <% 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>
@@ -40,6 +47,20 @@ export default function EditScreenInfo({ path }: { path: string }) {
                 </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>
@@ -69,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";
@@ -8,7 +11,11 @@ import "react-native-gesture-handler";
 	import config from './tamagui.config'
 
 	SplashScreen.preventAutoHideAsync();
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  import { ThemeProvider } from '@shopify/restyle';
+  import { theme } from 'theme';
 <% } %>
+
 import RootStack from "./src/navigation";
 
 export default function App() {
@@ -33,7 +40,13 @@ export default function App() {
 				<RootStack />
 			</TamaguiProvider>
 		);
-	<% } else { %>
+	<% } else if (props.stylingPackage?.name === "restyle") { %>
+		return (
+      <ThemeProvider theme={theme}>
+        <RootStack />
+      </ThemeProvider>
+    );
+	<% } else { %> 
 		return <RootStack />;
 	<% } %>
 }