create-expo-stack 2.1.11 → 2.1.12

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

@@ -5,7 +5,6 @@ import React from 'react';
 <% } 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';

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

@@ -10,7 +10,7 @@ module.exports = function(api) {
     plugins.push([
       '@tamagui/babel-plugin',
       {
-        components: ['@my/ui', 'tamagui'],
+        components: ['tamagui'],
         config: './tamagui.config.ts',
       },
     ]);

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

@@ -4,6 +4,7 @@ import { Stack, useRouter } from "expo-router";
   import { Text, TouchableOpacity, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
   import { TamaguiProvider, Button } from "tamagui";
+  import config from '../tamagui.config'
 <% } else { %>
   import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 <% } %>
@@ -20,9 +21,9 @@ export default function Layout() {
       </TouchableOpacity>
     );
   <% } else if (props.stylingPackage?.name === "tamagui") { %>
-    const BackButton = () => {
+    const BackButton = () => (
       <Button onPress={router.back} icon={<Feather name="chevron-left" size={16} color="#007AFF" />}>Back</Button>
-    }
+    )
   <% } else { %>
     const BackButton = () => (
       <TouchableOpacity onPress={router.back}>

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

@@ -20,7 +20,7 @@ export default function Details() {
     );
   <% } else if (props.stylingPackage?.name === "tamagui") { %>
     return (
-      <YStack flex={1} p="$2">
+      <YStack flex={1} padding="$2">
         <YStack flex={1} maxWidth={960}>
           <H2>Details</H2>
           <Paragraph theme="alt1">Showing details for user {name}.</Paragraph>

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

@@ -1,7 +1,7 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import { Text, TouchableOpacity, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack, H2, Paragraph } from "tamagui"
+  import { YStack, H2, Paragraph, Button } from "tamagui"
 <% } else { %>
   import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 <% } %>
@@ -27,7 +27,7 @@ export default function Page() {
   <% } else if (props.stylingPackage?.name === "tamagui") { %>
     return (
       <YStack flex={1} padding="$3">
-        <YStack flex={1} mawidth="{960}" justifyContent="space-between">
+        <YStack flex={1} maxWidth="{960}" justifyContent="space-between">
           <YStack>
             <H2>Hello World</H2>
             <Paragraph>This is the first page of your app.</Paragraph>

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

@@ -1,7 +1,7 @@
 import { Stack } from "expo-router";
 <% if (props.stylingPackage?.name === "tamagui") { %>
 import { TamaguiProvider } from 'tamagui'
-import { config } from './tamagui.config'
+import config from './tamagui.config'
 <% } %>
 
 export const unstable_settings = {

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

@@ -1,7 +1,8 @@
  <% if (props.stylingPackage?.name === "nativewind") { %>
     import { Platform, Text, View } from "react-native";
-<% } else if (props.stylingPackage?.name === "nativewind") { %>
+<% } else if (props.stylingPackage?.name === "tamagui") { %>
     import { YStack, Paragraph, Separator } from "tamagui";
+    import { Platform } from 'react-native'
 <% } else { %>
     import { Platform, StyleSheet, Text, View } from "react-native";
 <% } %>

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

@@ -27,11 +27,11 @@ export default function EditScreenInfo({ path }: { path: string }) {
     <% } else if (props.stylingPackage?.name === "tamagui") { %>
         return (
             <YStack>
-                <YStack alignItems="center" mx="$6">
+                <YStack alignItems="center" marginHorizontal="$6">
                     <H4>
                         Open up the code for this screen:
                     </H4>
-                    <YStack borderRadius="$3" my="$1">
+                    <YStack borderRadius="$3" marginVertical="$1">
                         <Paragraph>{path}</Paragraph>
                     </YStack>
                     <Paragraph>

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

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

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

@@ -4,6 +4,8 @@
     import { createStackNavigator } from "@react-navigation/stack";
     <% if (props.stylingPackage?.name === "nativewind") { %>
         import { Text, View } from "react-native";
+    <% } else if (props.stylingPackage?.name === "tamagui") { %>
+        import { Button } from "tamagui";
     <% } else { %>
         import { Text, View, StyleSheet } from "react-native";
     <% } %>

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

@@ -23,7 +23,7 @@ export default function Details() {
     );
   <% } else if (props.stylingPackage?.name === "tamagui") { %>
     return (
-      <YStack flex={1} pt="$2">
+      <YStack flex={1} paddingTop="$2">
         <YStack flex={1} maxWidth={960}>
           <H2>Details</H2>
           <Paragraph>Showing details for user {router.params.name}.</Paragraph>

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

@@ -1,7 +1,8 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import { Platform, Text, View } from "react-native";
-<% } else if (props.stylingPackage?.name === "nativewind") { %>
+<% } else if (props.stylingPackage?.name === "tamagui") { %>
   import { YStack, Paragraph, Separator } from "tamagui";
+  import { Platform } from 'react-native'
 <% } else { %>
   import { Platform, StyleSheet, Text, View } from "react-native";
 <% } %>

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

@@ -42,7 +42,7 @@ export default function TabOneScreen() {
     separator: "h-[1px] my-7 w-4/5 bg-gray-200",
     title: "text-xl font-bold"
   };
-<% } else if (props.stylingPackage?.name === "tamagui") { %>
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
   const styles = StyleSheet.create({
     container: {
       alignItems: "center",

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

@@ -30,7 +30,7 @@ export default function Overview() {
   <% } else if (props.stylingPackage?.name === "tamagui") { %>
     return (
       <YStack flex={1} padding="$3">
-        <YStack flex={1} mawidth="{960}" justifyContent="space-between">
+        <YStack flex={1} maxWidth="{960}" justifyContent="space-between">
           <YStack>
             <H2>Hello World</H2>
             <Paragraph>This is the first page of your app.</Paragraph>

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

@@ -1,28 +1,28 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import { Text, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack, Text, Separator } from "tamagui";
+  import { YStack, H2, Separator } from "tamagui";
 <% } else { %>
   import { StyleSheet, Text, View } from "react-native";
 <% } %>
 
 import EditScreenInfo from "../components/edit-screen-info";
 
-export default function TabOneScreen() {
+export default function TabTwoScreen() {
   <% if (props.stylingPackage?.name === "nativewind") { %>
     return (
       <View className={styles.container}>
-        <Text className={styles.title}>Tab One</Text>
+        <Text className={styles.title}>Tab Two</Text>
         <View className={styles.separator} />
-        <EditScreenInfo path="src/screens/one.tsx" />
+        <EditScreenInfo path="src/screens/two.tsx" />
       </View>
     );
   <% } else if (props.stylingPackage?.name === "tamagui") { %>
     return (
-      <YStack className={styles.container}>
-        <Text className={styles.title}>Tab One</Text>
+      <YStack flex={1} alignItems="center" justifyContent="center">
+        <H2>Tab One</H2>
         <Separator />
-        <EditScreenInfo path="src/screens/one.tsx" />
+        <EditScreenInfo path="src/screens/two.tsx" />
       </YStack>
     );
   <% } else { %>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-expo-stack",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "description": "create-expo-stack CLI",
   "private": false,
   "types": "build/types/types.d.ts",