create-expo-stack 2.1.10 → 2.1.11

package/build/commands/create-expo-stack.js

@@ -42,7 +42,7 @@ var command = {
     name: 'create-expo-stack',
     description: 'Create a new Expo project',
     run: function (toolbox) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, first, options, _b, info, highlight, warning, cliResults, useDefault, skipCLI, useBlankTypescript, packages, useNativewind, navigationPackage, files, formattedFiles, error_1;
+        var _a, first, options, _b, info, highlight, warning, cliResults, useDefault, skipCLI, useBlankTypescript, packages, navigationPackage, stylingPackage, files, formattedFiles, error_1;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
@@ -103,17 +103,21 @@ var command = {
                         // Add nativewind package
                         cliResults.packages.push({ name: "nativewind", type: 'styling', options: {} });
                     }
+                    if (options.tamagui) {
+                        // Add tamagui package
+                        cliResults.packages.push({ name: "tamagui", type: 'styling', options: {} });
+                    }
                     // Destructure the results but set the projectName if the first param is passed in
                     if (first) {
                         cliResults.projectName = first;
                     }
                     packages = cliResults.packages;
-                    useNativewind = (0, utilities_1.usePackage)("nativewind", packages);
                     navigationPackage = packages.find(function (p) { return p.type === "navigation"; }) || undefined;
+                    stylingPackage = packages.find(function (p) { return p.type === "styling"; });
                     files = [];
-                    files = (0, utilities_1.configureProjectFiles)(files, navigationPackage, useNativewind);
+                    files = (0, utilities_1.configureProjectFiles)(files, navigationPackage, stylingPackage);
                     formattedFiles = [];
-                    formattedFiles = (0, utilities_1.generateProjectFiles)(cliResults, files, formattedFiles, navigationPackage, toolbox, useNativewind);
+                    formattedFiles = (0, utilities_1.generateProjectFiles)(cliResults, files, formattedFiles, navigationPackage, toolbox, stylingPackage);
                     return [4 /*yield*/, (0, utilities_1.printOutput)(cliResults, formattedFiles, toolbox)];
                 case 8:
                     _c.sent();
@@ -133,4 +137,4 @@ var command = {
     }); },
 };
 exports.default = command;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3JlYXRlLWV4cG8tc3RhY2suanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvY29tbWFuZHMvY3JlYXRlLWV4cG8tc3RhY2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFQSwwQ0FTc0I7QUFDdEIsMENBQThDO0FBRzlDLElBQU0sT0FBTyxHQUFtQjtJQUM5QixJQUFJLEVBQUUsbUJBQW1CO0lBQ3pCLFdBQVcsRUFBRSwyQkFBMkI7SUFDeEMsR0FBRyxFQUFFLFVBQU8sT0FBTzs7Ozs7b0JBRWYsS0FFRSxPQUFPLFdBRnFCLEVBQWhCLEtBQUssV0FBQSxFQUFFLE9BQU8sYUFBQSxFQUM1QixLQUNFLE9BQU8sTUFEMEIsRUFBMUIsSUFBSSxVQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsT0FBTyxhQUFBLENBQ3ZCO29CQUNaLElBQUksT0FBTyxDQUFDLElBQUksSUFBSSxPQUFPLENBQUMsQ0FBQyxFQUFFO3dCQUM3QixJQUFBLG9CQUFRLEVBQUMsSUFBSSxFQUFFLFNBQVMsRUFBRSxPQUFPLENBQUMsQ0FBQTt3QkFFbEMsc0JBQU87cUJBQ1I7Ozs7b0JBRUMscUJBQU0sSUFBQSx1QkFBVyxFQUFDLE9BQU8sQ0FBQyxFQUFBOztvQkFBMUIsU0FBMEIsQ0FBQztvQkFFM0IsMERBQTBEO29CQUMxRCw0RUFBNEU7b0JBQzVFLHFCQUFNLElBQUksT0FBTyxDQUFDLFVBQUMsT0FBTyxJQUFLLE9BQUEsVUFBVSxDQUFDLE9BQU8sRUFBRSxHQUFHLENBQUMsRUFBeEIsQ0FBd0IsQ0FBQyxFQUFBOztvQkFGeEQsMERBQTBEO29CQUMxRCw0RUFBNEU7b0JBQzVFLFNBQXdELENBQUM7b0JBR3JELFVBQVUsR0FBZSwwQkFBYyxDQUFDO3lCQUd4QyxPQUFPLENBQUMsTUFBTSxFQUFkLHdCQUFjO29CQUNoQixxQkFBTSxJQUFBLHFCQUFTLEVBQUMsT0FBTyxDQUFDLEVBQUE7O29C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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3JlYXRlLWV4cG8tc3RhY2suanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvY29tbWFuZHMvY3JlYXRlLWV4cG8tc3RhY2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFQSwwQ0FRc0I7QUFDdEIsMENBQThDO0FBRzlDLElBQU0sT0FBTyxHQUFtQjtJQUM5QixJQUFJLEVBQUUsbUJBQW1CO0lBQ3pCLFdBQVcsRUFBRSwyQkFBMkI7SUFDeEMsR0FBRyxFQUFFLFVBQU8sT0FBTzs7Ozs7b0JBRWYsS0FFRSxPQUFPLFdBRnFCLEVBQWhCLEtBQUssV0FBQSxFQUFFLE9BQU8sYUFBQSxFQUM1QixLQUNFLE9BQU8sTUFEMEIsRUFBMUIsSUFBSSxVQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsT0FBTyxhQUFBLENBQ3ZCO29CQUNaLElBQUksT0FBTyxDQUFDLElBQUksSUFBSSxPQUFPLENBQUMsQ0FBQyxFQUFFO3dCQUM3QixJQUFBLG9CQUFRLEVBQUMsSUFBSSxFQUFFLFNBQVMsRUFBRSxPQUFPLENBQUMsQ0FBQTt3QkFFbEMsc0JBQU87cUJBQ1I7Ozs7b0JBRUMscUJBQU0sSUFBQSx1QkFBVyxFQUFDLE9BQU8sQ0FBQyxFQUFBOztvQkFBMUIsU0FBMEIsQ0FBQztvQkFFM0IsMERBQTBEO29CQUMxRCw0RUFBNEU7b0JBQzVFLHFCQUFNLElBQUksT0FBTyxDQUFDLFVBQUMsT0FBTyxJQUFLLE9BQUEsVUFBVSxDQUFDLE9BQU8sRUFBRSxHQUFHLENBQUMsRUFBeEIsQ0FBd0IsQ0FBQyxFQUFBOztvQkFGeEQsMERBQTBEO29CQUMxRCw0RUFBNEU7b0JBQzVFLFNBQXdELENBQUM7b0JBR3JELFVBQVUsR0FBZSwwQkFBYyxDQUFDO3lCQUd4QyxPQUFPLENBQUMsTUFBTSxFQUFkLHdCQUFjO29CQUNoQixxQkFBTSxJQUFBLHFCQUFTLEVBQUMsT0FBTyxDQUFDLEVBQUE7O29C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

package/build/templates/base/App.tsx.ejs

@@ -1,13 +1,19 @@
 import React from 'react';
 
-<% if (props.useNativewind) {%>
+<% if (props.stylingPackage?.name === "nativewind") {%>
   import { Text, View } from 'react-native';
+<% } else if (props.stylingPackage?.name === "tamagui") {%>
+  import { View } from 'react-native';
+  import { TamaguiProvider, Text, styled } from 'tamagui';
+
+  import config from './tamagui.config'
 <% } else {%>
   import { StyleSheet, Text, View } from 'react-native';
 <% } %>
+
 import { StatusBar } from 'expo-status-bar';
 
-<% if (props.useNativewind) {%>
+<% if (props.stylingPackage?.name === "nativewind") {%>
   export default function App() {
     return (
       <View className={styles.container} %>>
@@ -20,6 +26,24 @@ import { StatusBar } from 'expo-status-bar';
   const styles = {
     container: 'flex flex-1 items-center justify-center bg-white',
   };
+<% } else if (props.stylingPackage?.name === "tamagui") {%>
+  const MyView = styled(View, {
+    name: "MyView",
+    flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+  });
+
+  export default function App() {
+    return (
+      <TamaguiProvider config={config}>
+        <MyView %>>
+          <Text>Open up App.tsx to start working on your app!</Text>
+          <StatusBar style="auto" />
+        </MyView>
+      </TamaguiProvider>
+    );
+  }
 <% } else {%>
   export default function App() {
     return (

package/build/templates/base/babel.config.js.ejs

@@ -2,10 +2,20 @@ module.exports = function(api) {
   api.cache(true);
   let plugins = [];
   
-  <% if (props.useNativewind) { %>
+  <% if (props.stylingPackage?.name === "nativewind") { %>
     plugins.push('nativewind/babel');
   <% } %>
 
+  <% if (props.stylingPackage?.name === "tamagui") { %>
+    plugins.push([
+      '@tamagui/babel-plugin',
+      {
+        components: ['@my/ui', 'tamagui'],
+        config: './tamagui.config.ts',
+      },
+    ]);
+  <% } %>
+
   <% if (props.navigationPackage?.name === 'expo-router') { %>
     plugins.push('expo-router/babel');
   <% } %>

package/build/templates/base/package.json.ejs

@@ -9,10 +9,18 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    <% if (props.useNativewind) { %>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
       "nativewind": "^2.0.11",
     <% } %>
 
+    <% if (props.stylingPackage?.name === "tamagui") { %>
+      "tamagui": "1.74.8",
+      "@tamagui/font-inter": "1.74.8",
+      "@tamagui/shorthands": "1.74.8",
+      "@tamagui/themes": "1.74.8",
+      "@tamagui/react-native-media-driver": "1.74.8",
+    <% } %>
+
     <% if (props.navigationPackage?.type === "navigation") { %>
       "@react-navigation/native": "^6.1.7",
       "react-native-gesture-handler": "~2.12.0",
@@ -51,9 +59,12 @@
     "eslint": "^8.50.0",
     "eslint-config-universe": "^12.0.0",
     "prettier": "^3.0.3",
-    <% if (props.useNativewind) { %>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
       "tailwindcss": "3.3.2",
     <% } %>
+    <% if (props.stylingPackage?.name === "tamagui") { %>
+      "@tamagui/babel-plugin": "1.74.8",
+    <% } %>
     "typescript": "^5.1.3"
   },
   "eslintConfig": {

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

@@ -1,14 +1,16 @@
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
   import { Text, TouchableOpacity, View } from "react-native";
+<% } else if (props.stylingPackage?.name === "tamagui") { %>
+  import { TamaguiProvider, Button } from "tamagui";
 <% } else { %>
   import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 <% } %>
 
 export default function Layout() {
   const router = useRouter();
-  <% if (props.useNativewind) { %>
+  <% if (props.stylingPackage?.name === "nativewind") { %>
     const BackButton = () => (
       <TouchableOpacity onPress={router.back}>
         <View className={styles.backButton}>
@@ -17,6 +19,10 @@ export default function Layout() {
         </View>
       </TouchableOpacity>
     );
+  <% } else if (props.stylingPackage?.name === "tamagui") { %>
+    const BackButton = () => {
+      <Button onPress={router.back} icon={<Feather name="chevron-left" size={16} color="#007AFF" />}>Back</Button>
+    }
   <% } else { %>
     const BackButton = () => (
       <TouchableOpacity onPress={router.back}>
@@ -29,21 +35,27 @@ export default function Layout() {
   <% } %>
 
   return (
+    <% if (props.stylingPackage?.name === "tamagui") { %>
+      <TamaguiProvider config={config}>
+      <% } %>
     <Stack>
       <Stack.Screen name="index" options={{ title: "Overview" }} />
       <Stack.Screen name="details"
         options={{ title: "Details", headerLeft: () => <BackButton /> }}
       />
     </Stack>
+    <% if (props.stylingPackage?.name === "tamagui") { %>
+      </TamaguiProvider>
+    <% } %>
   );
 }
 
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
   const styles = {
     backButton: "flex-row",
     backButtonText: "text-blue-500 ml-1",
   };
-<% } else { %>
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
   const styles = StyleSheet.create({
     backButton: {
       flexDirection: "row",

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

@@ -1,5 +1,7 @@
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
   import { View, Text } from "react-native";
+<% } else if (props.stylingPackage?.name === "tamagui") { %>
+  import { YStack, H2, Paragraph } from "tamagui";
 <% } else { %>
   import { StyleSheet, View, Text } from "react-native";
 <% } %>
@@ -7,7 +9,7 @@ import { useLocalSearchParams } from "expo-router";
 
 export default function Details() {
   const { name } = useLocalSearchParams();
-  <% if (props.useNativewind) { %>
+  <% if (props.stylingPackage?.name === "nativewind") { %>
     return (
       <View className={styles.container}>
         <View className={styles.main}>
@@ -16,6 +18,15 @@ export default function Details() {
         </View>
       </View>
     );
+  <% } else if (props.stylingPackage?.name === "tamagui") { %>
+    return (
+      <YStack flex={1} p="$2">
+        <YStack flex={1} maxWidth={960}>
+          <H2>Details</H2>
+          <Paragraph theme="alt1">Showing details for user {name}.</Paragraph>
+        </YStack>
+      </YStack>
+    );
   <% } else { %>
     return (
       <View style={styles.container}>
@@ -28,14 +39,14 @@ export default function Details() {
   <% } %>
 }
 
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
   const styles = {
     container: "flex-1 p-6",
     main: "flex-1 max-w-[960]",
     title: "text-[64px] font-bold",
     subtitle: "text-4xl text-gray-700",
   };
-<% } else { %>
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
   const styles = StyleSheet.create({
     container: {
       flex: 1,

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

@@ -1,12 +1,14 @@
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
   import { Text, TouchableOpacity, View } from "react-native";
+<% } else if (props.stylingPackage?.name === "tamagui") { %>
+  import { YStack, H2, Paragraph } from "tamagui"
 <% } else { %>
   import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 <% } %>
 import { Link } from "expo-router";
 
 export default function Page() {
-  <% if (props.useNativewind) { %>
+  <% if (props.stylingPackage?.name === "nativewind") { %>
     return (
       <View className={styles.container}>
         <View className={styles.main}>
@@ -22,6 +24,20 @@ export default function Page() {
         </View>
       </View>
     );
+  <% } else if (props.stylingPackage?.name === "tamagui") { %>
+    return (
+      <YStack flex={1} padding="$3">
+        <YStack flex={1} mawidth="{960}" justifyContent="space-between">
+          <YStack>
+            <H2>Hello World</H2>
+            <Paragraph>This is the first page of your app.</Paragraph>
+          </YStack>
+          <Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
+            <Button>Show Details</Button>
+          </Link>
+        </YStack>
+      </YStack>
+    )
   <% } else { %>
     return (
       <View style={styles.container}>
@@ -41,7 +57,7 @@ export default function Page() {
   <% } %>
 }
 
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
   const styles = {
     button: "items-center bg-indigo-500 rounded-[28px] shadow-md p-4",
     buttonText: "text-white text-lg font-semibold text-center",
@@ -50,7 +66,7 @@ export default function Page() {
     title: "text-[64px] font-bold",
     subtitle: "text-4xl text-gray-700",
   };
-<% } else { %>
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
   const styles = StyleSheet.create({
     button: {
       alignItems: "center",

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

@@ -1,5 +1,7 @@
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
     import { Text, View } from "react-native";
+<% } else if (props.stylingPackage?.name === "tamagui") { %>
+    import { YStack, H2, Separator } from "tamagui";
 <% } else { %>
     import { StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -7,7 +9,7 @@
 import EditScreenInfo from "../../components/edit-screen-info";
 
 export default function TabOneScreen() {
-    <% if (props.useNativewind) { %>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
         return (
             <View className={styles.container}>
                 <Text className={styles.title}>Tab One</Text>
@@ -15,7 +17,15 @@ export default function TabOneScreen() {
                 <EditScreenInfo path="app/(tabs)/index.tsx" />
             </View>
         );
-    <% } else { %>
+        <% } else if (props.stylingPackage?.name === "tamagui") { %>
+        return (
+            <YStack flex={1} alignItems="center" justifyContent="center">
+                <H2>Tab One</H2>
+                <Separator />
+                <EditScreenInfo path="app/(tabs)/index.tsx" />
+            </YStack>
+        );    
+        <% } else { %>
         return (
             <View style={styles.container}>
                 <Text style={styles.title}>Tab One</Text>
@@ -26,13 +36,13 @@ export default function TabOneScreen() {
     <% } %>
 }
 
-<% if (props.useNativewind) { %>
+<% 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 { %>
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
         container: {
             alignItems: "center",

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

@@ -1,5 +1,7 @@
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
     import { Text, View } from "react-native";
+<% } else if (props.stylingPackage?.name === "tamagui") { %>
+    import { YStack, H2, Separator } from "tamagui";
 <% } else { %>
     import { StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -7,7 +9,7 @@
 import EditScreenInfo from "../../components/edit-screen-info";
 
 export default function TabTwoScreen() {
-    <% if (props.useNativewind) { %>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
         return (
             <View className={styles.container}>
                 <Text className={styles.title}>Tab Two</Text>
@@ -15,6 +17,14 @@ export default function TabTwoScreen() {
                 <EditScreenInfo path="app/(tabs)/index.tsx" />
             </View>
         );
+    <% } else if (props.stylingPackage?.name === "tamagui") { %>
+        return (
+            <YStack flex={1} alignItems="center" justifyContent="center">
+                <H2>Tab Two</H2>
+                <Separator />
+                <EditScreenInfo path="app/(tabs)/index.tsx" />
+            </YStack>
+        );    
     <% } else { %>
         return (
             <View style={styles.container}>
@@ -26,13 +36,13 @@ export default function TabTwoScreen() {
     <% } %>
 }
 
-<% if (props.useNativewind) { %>
+<% 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 { %>
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
         container: {
             alignItems: "center",

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

@@ -1,4 +1,8 @@
 import { Stack } from "expo-router";
+<% if (props.stylingPackage?.name === "tamagui") { %>
+import { TamaguiProvider } from 'tamagui'
+import { config } from './tamagui.config'
+<% } %>
 
 export const unstable_settings = {
   // Ensure that reloading on `/modal` keeps a back button present.
@@ -7,9 +11,15 @@ export const unstable_settings = {
 
 export default function RootLayout() {
   return (
+    <% if (props.stylingPackage?.name === "tamagui") { %>
+    <TamaguiProvider config={config}>
+    <% } %>
     <Stack>
       <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       <Stack.Screen name="modal" options={{ presentation: "modal" }} />
     </Stack>
+    <% if (props.stylingPackage?.name === "tamagui") { %>
+      </TamaguiProvider>
+    <% } %>
   );
 }

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

@@ -1,5 +1,7 @@
- <% if (props.useNativewind) { %>
+ <% if (props.stylingPackage?.name === "nativewind") { %>
     import { Platform, Text, View } from "react-native";
+<% } else if (props.stylingPackage?.name === "nativewind") { %>
+    import { YStack, Paragraph, Separator } from "tamagui";
 <% } else { %>
     import { Platform, StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -8,7 +10,7 @@ import { StatusBar } from "expo-status-bar";
 import EditScreenInfo from "../components/edit-screen-info";
 
 export default function ModalScreen() {
-    <% if (props.useNativewind) { %>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
         return (
             <View className={styles.container}>
                 <StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
@@ -17,6 +19,15 @@ export default function ModalScreen() {
                 <EditScreenInfo path="app/modal.tsx" />
             </View>
         );
+    <% } else if (props.stylingPackage?.name === "tamagui") { %>
+        return (
+            <YStack flex={1} alignItems="center" justifyContent="center">
+                <StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
+                <Paragraph>Modal</Paragraph>
+                <Separator />
+                <EditScreenInfo path="app/modal.tsx" />
+            </YStack>
+        );
     <% } else { %>
         return (
             <View style={styles.container}>
@@ -29,13 +40,13 @@ export default function ModalScreen() {
     <% } %>
 }
 
-<% if (props.useNativewind) { %>
+<% 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 { %>
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
         container: {
             alignItems: "center",

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

@@ -1,12 +1,14 @@
 import React from "react";
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
     import { Text, View } from "react-native";
+<% } else if (props.stylingPackage?.name === "tamagui") { %>
+    import { YStack, H4, Paragraph } from "tamagui"
 <% } else { %>
     import { StyleSheet, Text, View } from "react-native";
 <% } %>
 
 export default function EditScreenInfo({ path }: { path: string }) {
-    <% if (props.useNativewind) { %>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
         return (
             <View>
                 <View className={styles.getStartedContainer}>
@@ -22,6 +24,22 @@ export default function EditScreenInfo({ path }: { path: string }) {
                 </View>
             </View>
         );
+    <% } else if (props.stylingPackage?.name === "tamagui") { %>
+        return (
+            <YStack>
+                <YStack alignItems="center" mx="$6">
+                    <H4>
+                        Open up the code for this screen:
+                    </H4>
+                    <YStack borderRadius="$3" my="$1">
+                        <Paragraph>{path}</Paragraph>
+                    </YStack>
+                    <Paragraph>
+                        Change any of the text, save the file, and your app will automatically update.
+                    </Paragraph>
+                </YStack>
+            </YStack>
+        );
     <% } else { %>
         return (
             <View>
@@ -41,7 +59,7 @@ export default function EditScreenInfo({ path }: { path: string }) {
     <% } %>
 }
 
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
     const styles = {
     codeHighlightContainer: `rounded-md px-1`,
     getStartedContainer: `items-center mx-12`,
@@ -51,7 +69,7 @@ export default function EditScreenInfo({ path }: { path: string }) {
     helpLinkText: `text-center`,
     homeScreenFilename: `my-2`,
     };
-<% } else { %>
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
     codeHighlightContainer: {
         borderRadius: 3,

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

@@ -1,8 +1,17 @@
 import "react-native-gesture-handler";
 import RootStack from "./src/navigation";
-
+<% if (props.stylingPackage?.name === "tamagui") { %>
+import { TamaguiProvider } from 'tamagui'
+import { config } from './tamagui.config'
+<% } %>
 export default function App() {
   return (
-    <RootStack />
+    <% if (props.stylingPackage?.name === "tamagui") { %>
+    <TamaguiProvider config={config}>
+    <% } %>
+      <RootStack />
+    <% if (props.stylingPackage?.name === "tamagui") { %>
+    </TamaguiProvider>
+    <% } %>
   );
-}
+}

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

@@ -1,11 +1,11 @@
 import React from "react";
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
   import { Text, View } from "react-native";
 <% } else { %>
   import { StyleSheet, Text, View } from "react-native";
 <% } %>
 
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
   export default function EditScreenInfo({ path }: { path: string }) {
     return (
       <View>
@@ -57,7 +57,7 @@ import React from "react";
   }
 <% } %>
 
-<% if (props.useNativewind) { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
   const styles = {
     codeHighlightContainer: "rounded-md px-1 my-2",
     getStartedContainer: "items-center mx-12",

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

@@ -2,7 +2,7 @@
     import { Feather } from "@expo/vector-icons";
     import { NavigationContainer } from "@react-navigation/native";
     import { createStackNavigator } from "@react-navigation/stack";
-    <% if (props.useNativewind) { %>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
         import { Text, View } from "react-native";
     <% } else { %>
         import { Text, View, StyleSheet } from "react-native";
@@ -26,7 +26,7 @@
             <Stack.Screen
                 name="Details"
                 component={Details}
-                <% if (props.useNativewind) { %>
+                <% if (props.stylingPackage?.name === "nativewind") { %>
                     options={({ navigation }) => ({
                         headerLeft: () => (
                             <View className={styles.backButton}>
@@ -35,6 +35,12 @@
                             </View>
                         )
                     })}
+                <% } else if (props.stylingPackage?.name === "tamagui") { %>
+                    options={({ navigation }) => ({
+                        headerLeft: () => (
+                            <Button onPress={navigation.goBack} icon={<Feather name="chevron-left" size={16} color="#007AFF" />}>Back</Button>
+                        )
+                    })}
                 <% } else { %>
                     options={({ navigation }) => ({
                         headerLeft: () => (
@@ -50,12 +56,12 @@
         </NavigationContainer>
     );
     }
-    <% if (props.useNativewind) { %>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
         const styles = {
             backButton: "flex-row",
             backButtonText: "text-blue-500 ml-1"
         };
-    <% } else { %>
+    <% } else if (props.stylingPackage?.name === "stylesheet") { %>
         const styles = StyleSheet.create({
             backButton: {
                 flexDirection: "row"