create-expo-stack 2.1.19 → 2.1.21

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

@@ -25,7 +25,7 @@
     <% if (props.navigationPackage?.type === "navigation") { %>
       "@react-navigation/native": "^6.1.7",
       "react-native-gesture-handler": "~2.12.0",
-      "react-native-safe-area-context": "4.6.3",
+      "react-native-safe-area-context": "^4.6.3",
       "react-native-screens": "~3.22.0",
     <% } %>
 
@@ -87,5 +87,12 @@
   <% } else { %>
     "main": "node_modules/expo/AppEntry.js",
   <% } %>
+  <% if (props.navigationPackage?.type === "navigation") { %>
+    "expo": {
+      "install": {
+        "exclude": ["react-native-safe-area-context"]
+      }
+    },
+  <% } %>
   "private": true
 }

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

@@ -4,7 +4,7 @@ import { Feather } from "@expo/vector-icons";
   import { Text, TouchableOpacity, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
   import React, { useEffect } from "react";
-  import { TamaguiProvider, Button } from "tamagui";
+  import { TamaguiProvider, Button, Text } from "tamagui";
   import { useFonts } from "expo-font";
   import { Stack, useRouter, SplashScreen } from "expo-router";
 
@@ -42,7 +42,7 @@ export default function Layout() {
     if (!loaded) return null;
 
     const BackButton = () => (
-      <Button onPress={router.back} icon={<Feather name="chevron-left" size={16} color="#007AFF" />}>Back</Button>
+      <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 { %>
     const BackButton = () => (
@@ -58,7 +58,7 @@ 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"

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

@@ -1,7 +1,8 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import { View, Text } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack, H2, Paragraph } from "tamagui";
+  import { YStack } from "tamagui";
+  import { Container, Main, Subtitle, Title } from "../tamagui.config";
 <% } else { %>
   import { StyleSheet, View, Text } from "react-native";
 <% } %>
@@ -9,34 +10,32 @@ import { useLocalSearchParams } from "expo-router";
 
 export default function Details() {
   const { name } = useLocalSearchParams();
+  return (
   <% if (props.stylingPackage?.name === "nativewind") { %>
-    return (
-      <View className={styles.container}>
-        <View className={styles.main}>
-          <Text className={styles.title}>Details</Text>
-          <Text className={styles.subtitle}>Showing details for user {name}.</Text>
-        </View>
+    <View className={styles.container}>
+      <View className={styles.main}>
+        <Text className={styles.title}>Details</Text>
+        <Text className={styles.subtitle}>Showing details for user {name}.</Text>
       </View>
-    );
+    </View>
   <% } else if (props.stylingPackage?.name === "tamagui") { %>
-    return (
-      <YStack flex={1} padding="$2">
-        <YStack flex={1} maxWidth="100%">
-          <H2>Details</H2>
-          <Paragraph theme="alt1">Showing details for user {name}.</Paragraph>
+    <Container>
+      <Main>
+        <YStack>
+          <Title>Details</Title>
+          <Subtitle>Showing details for user {name}.</Subtitle>
         </YStack>
-      </YStack>
-    );
+      </Main>
+    </Container>
   <% } else { %>
-    return (
-      <View style={styles.container}>
-        <View style={styles.main}>
-          <Text style={styles.title}>Details</Text>
-          <Text style={styles.subtitle}>Showing details for user {name}.</Text>
-        </View>
+    <View style={styles.container}>
+      <View style={styles.main}>
+        <Text style={styles.title}>Details</Text>
+        <Text style={styles.subtitle}>Showing details for user {name}.</Text>
       </View>
-    );
+    </View>
   <% } %>
+  );
 }
 
 <% if (props.stylingPackage?.name === "nativewind") { %>

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

@@ -1,60 +1,57 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import { Text, TouchableOpacity, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
-  import { YStack, H2, Paragraph, Button } from "tamagui"
+  import { YStack } from "tamagui";
+  import { Container, Main, Title, Subtitle, Button, ButtonText } from '../tamagui.config';
 <% } else { %>
   import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 <% } %>
 import { Link } from "expo-router";
 
 export default function Page() {
+  return (
   <% if (props.stylingPackage?.name === "nativewind") { %>
-    return (
-      <View className={styles.container}>
-        <View className={styles.main}>
-          <View>
-            <Text className={styles.title}>Hello World</Text>
-            <Text className={styles.subtitle}>This is the first page of your app.</Text>
-          </View>
-          <Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
-            <TouchableOpacity className={styles.button} >
-              <Text className={styles.buttonText}>Show Details</Text>
-            </TouchableOpacity>
-          </Link>
+    <View className={styles.container}>
+      <View className={styles.main}>
+        <View>
+          <Text className={styles.title}>Hello World</Text>
+          <Text className={styles.subtitle}>This is the first page of your app.</Text>
         </View>
+        <Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
+          <TouchableOpacity className={styles.button} >
+            <Text className={styles.buttonText}>Show Details</Text>
+          </TouchableOpacity>
+        </Link>
       </View>
-    );
+    </View>
   <% } else if (props.stylingPackage?.name === "tamagui") { %>
-    return (
-      <YStack flex={1} padding="$3">
-        <YStack flex={1} maxWidth="100%" 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>
+    <Container>
+      <Main>
+        <YStack>
+          <Title>Hello World</Title>
+          <Subtitle>This is the first page of your app.</Subtitle>
         </YStack>
-      </YStack>
-    )
+        <Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
+          <Button><ButtonText>Show Details</ButtonText></Button>
+        </Link>
+      </Main>
+    </Container>
   <% } else { %>
-    return (
-      <View style={styles.container}>
-        <View style={styles.main}>
-          <View>
-            <Text style={styles.title}>Hello World</Text>
-            <Text style={styles.subtitle}>This is the first page of your app.</Text>
-          </View>
-          <Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
-            <TouchableOpacity style={styles.button} >
-              <Text style={styles.buttonText}>Show Details</Text>
-            </TouchableOpacity>
-          </Link>
+    <View style={styles.container}>
+      <View style={styles.main}>
+        <View>
+          <Text style={styles.title}>Hello World</Text>
+          <Text style={styles.subtitle}>This is the first page of your app.</Text>
         </View>
+        <Link href={{ pathname: "/details", params: { name: "Dan" } }} asChild>
+          <TouchableOpacity style={styles.button} >
+            <Text style={styles.buttonText}>Show Details</Text>
+          </TouchableOpacity>
+        </Link>
       </View>
-    );
+    </View>
   <% } %>
+  );
 }
 
 <% if (props.stylingPackage?.name === "nativewind") { %>

package/build/templates/packages/tamagui/tamagui.config.ts.ejs

@@ -1,9 +1,9 @@
-import { createTamagui } from 'tamagui'
-import { createInterFont } from '@tamagui/font-inter'
-import { shorthands } from '@tamagui/shorthands'
-import { themes, tokens } from '@tamagui/themes'
-import { createMedia } from '@tamagui/react-native-media-driver'
-import { createAnimations } from '@tamagui/animations-react-native'
+import { createAnimations } from "@tamagui/animations-react-native";
+import { createInterFont } from "@tamagui/font-inter";
+import { createMedia } from "@tamagui/react-native-media-driver";
+import { shorthands } from "@tamagui/shorthands";
+import { themes, tokens } from "@tamagui/themes";
+import { createTamagui, styled, Text, YStack } from "tamagui";
 
 export const animations = createAnimations({
   bouncy: {
@@ -23,54 +23,60 @@ export const animations = createAnimations({
     mass: 1.2,
     stiffness: 250,
   },
-})
+});
 
-const headingFont = createInterFont({
-  size: {
-    6: 15,
-  },
-  transform: {
-    6: 'uppercase',
-    7: 'none',
-  },
-  weight: {
-    6: '400',
-    7: '700',
-  },
-  color: {
-    6: '$colorFocus',
-    7: '$color',
-  },
-  letterSpacing: {
-    5: 2,
-    6: 1,
-    7: 0,
-    8: -1,
-    9: -2,
-    10: -3,
-    12: -4,
-    14: -5,
-    15: -6,
+const headingFont = createInterFont();
+
+const bodyFont = createInterFont();
+
+export const Container = styled(YStack, {
+  flex: 1,
+  padding: 24,
+});
+
+export const Main = styled(YStack, {
+  flex: 1,
+  maxWidth: 960,
+  justifyContent: 'space-between',
+});
+
+export const Title = styled(Text, {
+  fontSize: 64,
+  fontWeight: 'bold',
+});
+
+export const Subtitle = styled(Text, {
+  color: '#38434D',
+  fontSize: 36,
+});
+
+export const Button = styled(YStack, {
+  alignItems: 'center',
+  backgroundColor: '#6366F1',
+  borderRadius: 24,
+  justifyContent: 'center',
+  padding: 16,
+  shadowColor: '#000',
+  shadowOffset: {
+    height: 2,
+    width: 0,
   },
-  face: {
-    700: { normal: 'InterBold' },
+  shadowOpacity: 0.25,
+  shadowRadius: 3.84,
+  hoverStyle: {
+    backgroundColor: '#5a5fcf',
   },
-})
+});
 
-const bodyFont = createInterFont(
-  {
-    face: {
-      700: { normal: 'InterBold' },
-    },
-  },
-  {
-    sizeSize: (size) => Math.round(size * 1.1),
-    sizeLineHeight: (size) => Math.round(size * 1.1 + (size > 20 ? 10 : 10)),
-  }
-)
+export const ButtonText = styled(Text, {
+  color: '#FFFFFF',
+  fontSize: 16,
+  fontWeight: '600',
+  textAlign: 'center',
+});
 
 const config = createTamagui({
-  defaultFont: 'body',
+  defaultFont: "body",
   animations,
   shouldAddPrefersColorThemes: true,
   themeClassNameOnRoot: true,
@@ -94,9 +100,9 @@ const config = createTamagui({
     gtLg: { minWidth: 1280 + 1 },
     short: { maxHeight: 820 },
     tall: { minHeight: 820 },
-    hoverNone: { hover: 'none' },
-    pointerCoarse: { pointer: 'coarse' },
+    hoverNone: { hover: "none" },
+    pointerCoarse: { pointer: "coarse" },
   }),
-})
+});
 
 export default config;

package/package.json

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