🌈 Upgrade: Expo 52

apps/expo/package.json

@@ -8,47 +8,50 @@
     "android": "npx expo run:android",
     "ios": "yarn fix-xcode-env && npx expo run:ios",
     "eject": "npx expo eject",
-    "fix-xcode-env": "node scripts/fix-xcode-env.mjs"
+    "fix-xcode-env": "node scripts/fix-xcode-env.mjs",
+    "prebuild": "yarn expo prebuild"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
-    "@expo/config-plugins": "~8.0.4",
+    "@babel/runtime": "^7.26.0",
+    "@expo/config-plugins": "9.0.14",
     "@my/ui": "0.0.1",
+    "@react-navigation/bottom-tabs": "^7.2.0",
+    "@react-navigation/native": "^7.0.14",
     "app": "0.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "burnt": "^0.12.2",
-    "expo": "^51.0.9",
-    "expo-constants": "~16.0.2",
-    "expo-dev-client": "~4.0.15",
-    "expo-font": "~12.0.6",
-    "expo-linear-gradient": "~13.0.2",
-    "expo-linking": "~6.3.1",
-    "expo-router": "3.5.15",
-    "expo-splash-screen": "0.27.4",
-    "expo-status-bar": "~1.12.1",
-    "expo-updates": "~0.25.15",
+    "expo": "52.0.27",
+    "expo-constants": "~17.0.4",
+    "expo-dev-client": "5.0.10",
+    "expo-font": "13.0.3",
+    "expo-linear-gradient": "14.0.2",
+    "expo-linking": "~7.0.4",
+    "expo-router": "~4.0.17",
+    "expo-splash-screen": "0.29.21",
+    "expo-status-bar": "~2.0.1",
+    "expo-updates": "~0.26.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-native": "0.74.2",
-    "react-native-gesture-handler": "~2.16.2",
-    "react-native-safe-area-context": "4.10.4",
-    "react-native-screens": "~3.31.1",
-    "react-native-svg": "15.3.0",
-    "react-native-web": "~0.19.12"
+    "react-native": "0.77.0",
+    "react-native-gesture-handler": "2.22.0",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "react-native-svg": "15.11.1",
+    "react-native-web": "0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.24.6",
-    "@expo/metro-config": "~0.18.4",
+    "@expo/metro-config": "0.19.9",
     "@tamagui/babel-plugin": "^1.122.7",
-    "metro-minify-terser": "^0.80.9",
-    "typescript": "^5.6.2"
+    "metro-minify-terser": "^0.81.0",
+    "typescript": "^5.7.3"
   },
   "resolutions": {
-    "metro": "0.76.0",
-    "metro-resolver": "0.76.0"
+    "metro": "0.81.0",
+    "metro-resolver": "0.81.0"
   },
   "overrides": {
-    "metro": "0.80.9",
-    "metro-resolver": "0.80.9"
+    "metro": "0.81.0",
+    "metro-resolver": "0.81.0"
   }
 }

package.json

@@ -7,6 +7,9 @@
   ],
   "scripts": {
     "native": "cd apps/expo && yarn start",
+    "native:prebuild": "cd apps/expo && yarn prebuild",
+    "ios": "cd apps/expo && yarn ios",
+    "android": "cd apps/expo && yarn android",
     "watch": "yarn workspaces foreach -pi run watch",
     "vercel:install": "yarn set version 3.5 && yarn install",
     "web": "yarn build && cd apps/next && yarn next",

packages/app/features/home/screen.tsx

@@ -5,13 +5,13 @@ import {
   Paragraph,
   Separator,
   Sheet,
-  useToastController,
-  SwitchThemeButton,
   SwitchRouterButton,
+  SwitchThemeButton,
+  useToastController,
   XStack,
   YStack,
 } from '@my/ui'
-import { ChevronDown, ChevronUp, X } from '@tamagui/lucide-icons'
+import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'
 import { useState } from 'react'
 import { Platform } from 'react-native'
 import { useLink } from 'solito/navigation'
@@ -23,22 +23,15 @@ export function HomeScreen({ pagesMode = false }: { pagesMode?: boolean }) {
   })
 
   return (
-    <YStack
-      f={1}
-      jc="center"
-      ai="center"
-      gap="$8"
-      p="$4"
-      bg="$background"
-    >
+    <YStack flex={1} justify="center" items="center" gap="$8" p="$4" bg="$background">
       <XStack
-        pos="absolute"
-        w="100%"
+        position="absolute"
+        width="100%"
         t="$6"
         gap="$6"
-        jc="center"
-        fw="wrap"
-        $sm={{ pos: 'relative', t: 0 }}
+        justify="center"
+        flexWrap="wrap"
+        $sm={{ position: 'relative', t: 0 }}
       >
         {Platform.OS === 'web' && (
           <>
@@ -49,20 +42,14 @@ export function HomeScreen({ pagesMode = false }: { pagesMode?: boolean }) {
       </XStack>
 
       <YStack gap="$4">
-        <H1
-          ta="center"
-          col="$color12"
-        >
+        <H1 text="center" color="$color12">
           Welcome to Tamagui.
         </H1>
-        <Paragraph
-          col="$color10"
-          ta="center"
-        >
+        <Paragraph color="$color10" text="center">
           Here's a basic starter to show navigating from one screen to another.
         </Paragraph>
         <Separator />
-        <Paragraph ta="center">
+        <Paragraph text="center">
           This screen uses the same code on Next.js and React Native.
         </Paragraph>
         <Separator />
@@ -100,28 +87,20 @@ function SheetDemo() {
         dismissOnSnapToBottom
       >
         <Sheet.Overlay
+          bg="$shadow4"
           animation="lazy"
           enterStyle={{ opacity: 0 }}
           exitStyle={{ opacity: 0 }}
         />
-        <Sheet.Handle bg="$gray8" />
-        <Sheet.Frame
-          ai="center"
-          jc="center"
-          gap="$10"
-          bg="$color2"
-        >
+        <Sheet.Handle bg="$color8" />
+        <Sheet.Frame items="center" justify="center" gap="$10" bg="$color2">
           <XStack gap="$2">
-            <Paragraph ta="center">Made by</Paragraph>
-            <Anchor
-              col="$blue10"
-              href="https://twitter.com/natebirdman"
-              target="_blank"
-            >
+            <Paragraph text="center">Made by</Paragraph>
+            <Anchor color="$blue10" href="https://twitter.com/natebirdman" target="_blank">
               @natebirdman,
             </Anchor>
             <Anchor
-              color="$purple10"
+              color="$blue10"
               href="https://github.com/tamagui/tamagui"
               target="_blank"
               rel="noreferrer"

packages/app/provider/index.tsx

@@ -18,11 +18,7 @@ export function Provider({ children, ...rest }: Omit<TamaguiProviderProps, 'conf
       defaultTheme={colorScheme === 'dark' ? 'dark' : 'light'}
       {...rest}
     >
-      <ToastProvider
-        swipeDirection="horizontal"
-        duration={6000}
-        native={isWeb ? [] : ['mobile']}
-      >
+      <ToastProvider swipeDirection="horizontal" duration={6000} native={isWeb ? [] : ['mobile']}>
         {children}
         <CustomToast />
         <ToastViewport />

packages/config/src/fonts.ts

@@ -0,0 +1,45 @@
+import { createInterFont } from '@tamagui/font-inter'
+
+export 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,
+  },
+  face: {
+    700: { normal: 'InterBold' },
+  },
+})
+
+export 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)),
+  }
+)

packages/config/src/tamagui.config.ts

@@ -1,92 +1,13 @@
+import { defaultConfig } from '@tamagui/config/v4'
 import { createTamagui } from 'tamagui'
-import { createInterFont } from '@tamagui/font-inter'
-import { shorthands } from '@tamagui/shorthands'
-import { tokens, themes } from '@tamagui/config/v3'
-
-import { animations } from '@my/ui/src/animations'
-
-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,
-  },
-  face: {
-    700: { normal: 'InterBold' },
-  },
-})
-
-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)),
-  }
-)
+import { bodyFont, headingFont } from './fonts'
+import { animations } from './animations'
 
 export const config = createTamagui({
-  defaultFont: 'body',
+  ...defaultConfig,
   animations,
-  shouldAddPrefersColorThemes: true,
-  themeClassNameOnRoot: true,
-
-  // highly recommended to turn this on if you are using shorthands
-  // to avoid having multiple valid style keys that do the same thing
-  // we leave it off by default because it can be confusing as you onboard.
-  onlyAllowShorthands: false,
-  shorthands,
-
   fonts: {
     body: bodyFont,
     heading: headingFont,
   },
-  settings: {
-    allowedStyleValues: 'somewhat-strict',
-  },
-  themes,
-  tokens,
-  media: {
-    xs: { maxWidth: 660 },
-    sm: { maxWidth: 800 },
-    md: { maxWidth: 1020 },
-    lg: { maxWidth: 1280 },
-    xl: { maxWidth: 1420 },
-    xxl: { maxWidth: 1600 },
-    gtXs: { minWidth: 660 + 1 },
-    gtSm: { minWidth: 800 + 1 },
-    gtMd: { minWidth: 1020 + 1 },
-    gtLg: { minWidth: 1280 + 1 },
-    short: { maxHeight: 820 },
-    tall: { minHeight: 820 },
-    hoverNone: { hover: 'none' },
-    pointerCoarse: { pointer: 'coarse' },
-  },
 })
-
-// for the compiler to find it
-export default config

packages/ui/src/MyComponent.tsx

@@ -2,12 +2,12 @@ import { YStack, styled } from 'tamagui'
 
 export const MyComponent = styled(YStack, {
   name: 'MyComponent',
-  backgroundColor: 'red',
+  bg: 'red',
 
   variants: {
     blue: {
       true: {
-        backgroundColor: 'blue',
+        bg: 'blue',
       },
     },
   } as const,

packages/ui/src/NativeToast.tsx

@@ -20,11 +20,8 @@ export const NativeToast = () => {
       scale={1}
       animation="quick"
     >
-      <YStack
-        py="$1.5"
-        px="$2"
-      >
-        <Toast.Title lh="$1">{currentToast.title}</Toast.Title>
+      <YStack py="$1.5" px="$2">
+        <Toast.Title lineHeight="$1">{currentToast.title}</Toast.Title>
         {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
       </YStack>
     </Toast>

packages/ui/src/SwitchRouterButton.tsx

@@ -2,11 +2,7 @@ import { Anchor, Button } from 'tamagui'
 
 export const SwitchRouterButton = ({ pagesMode = false }: { pagesMode?: boolean }) => {
   return (
-    <Anchor
-      ta="center"
-      color="$color12"
-      href={pagesMode ? '/' : '/pages-example'}
-    >
+    <Anchor text="center" color="$color12" href={pagesMode ? '/' : '/pages-example'}>
       <Button>Change router: {pagesMode ? 'pages' : 'app'}</Button>
     </Anchor>
   )