Tamagui

npx create-expo-app@latest MyTamaguiApp --template blank-typescript
cd MyTamaguiApp
npx expo install tamagui @tamagui/config @tamagui/core react-native-reanimated react-native-safe-area-context

// tamagui.config.ts
import { config as defaultConfig } from "@tamagui/config";
import { createTamagui } from "tamagui";
 
export const config = createTamagui({
  ...defaultConfig,
  tokens: {
    ...defaultConfig.tokens,
    color: {
      ...defaultConfig.tokens.color,
      brand: "#2563eb",
      brandMuted: "#93c5fd",
    },
  },
  themes: {
    ...defaultConfig.themes,
    light: {
      ...defaultConfig.themes.light,
      brand: "#2563eb",
    },
    dark: {
      ...defaultConfig.themes.dark,
      brand: "#60a5fa",
    },
  },
});
 
export type AppConfig = typeof config;
declare module "tamagui" {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
  interface TamaguiCustomConfig extends AppConfig {}
}

// App.tsx
import { TamaguiProvider, Theme, YStack, Text, Button } from "tamagui";
import { useColorScheme } from "react-native";
import { config } from "./tamagui.config";
 
export default function App() {
  const scheme = useColorScheme() ?? "light";
 
  return (
    <TamaguiProvider config={config} defaultTheme={scheme}>
      <Theme name={scheme}>
        <YStack flex={1} padding="$4" backgroundColor="$background" gap="$3">
          <Text fontSize="$6" fontWeight="700" color="$color">
            Tamagui en Expo
          </Text>
          <Button theme="active" backgroundColor="$brand" color="white">
            Continuar
          </Button>
        </YStack>
      </Theme>
    </TamaguiProvider>
  );
}

{
  "expo": {
    "plugins": ["react-native-reanimated/plugin"]
  }
}

// components/ProductCard.tsx
import { Card, H4, Paragraph, XStack, YStack, styled } from "tamagui";
 
const Badge = styled(Paragraph, {
  name: "Badge",
  fontSize: "$1",
  fontWeight: "700",
  paddingHorizontal: "$2",
  paddingVertical: "$1",
  borderRadius: "$10",
  variants: {
    tone: {
      sale: { backgroundColor: "$red4", color: "$red11" },
      new: { backgroundColor: "$green4", color: "$green11" },
    },
  } as const,
  defaultVariants: { tone: "new" },
});
 
type Props = {
  title: string;
  price: string;
  badge?: "sale" | "new";
};
 
export function ProductCard({ title, price, badge = "new" }: Props) {
  return (
    <Card elevate bordered padding="$4" backgroundColor="$background">
      <YStack gap="$2">
        <XStack justifyContent="space-between" alignItems="center">
          <H4 color="$color" numberOfLines={1}>
            {title}
          </H4>
          {badge && <Badge tone={badge}>{badge === "sale" ? "OFERTA" : "NUEVA"}</Badge>}
        </XStack>
        <Paragraph color="$color11" fontSize="$5" fontWeight="600">
          {price}
        </Paragraph>
      </YStack>
    </Card>
  );
}

// screens/CatalogScreen.tsx
import { FlatList } from "react-native";
import { YStack, Text } from "tamagui";
import { ProductCard } from "../components/ProductCard";
 
const PRODUCTS = [
  { id: "1", title: "Trail Runner Pro", price: "$129", badge: "new" as const },
  { id: "2", title: "Merino Base Layer", price: "$79", badge: "sale" as const },
  { id: "3", title: "Softshell Jacket", price: "$199", badge: "new" as const },
];
 
export function CatalogScreen() {
  return (
    <YStack flex={1} padding="$4" backgroundColor="$background" gap="$3">
      <Text fontSize="$8" fontWeight="800" color="$color">
        Catálogo
      </Text>
      <FlatList
        data={PRODUCTS}
        keyExtractor={(item) => item.id}
        ItemSeparatorComponent={() => <YStack height="$3" />}
        renderItem={({ item }) => (
          <ProductCard title={item.title} price={item.price} badge={item.badge} />
        )}
      />
    </YStack>
  );
}

// app/_layout.tsx
import { TamaguiProvider, Theme } from "tamagui";
import { Slot } from "expo-router";
import { useColorScheme } from "react-native";
import { config } from "../tamagui.config";
 
export default function RootLayout() {
  const scheme = useColorScheme() ?? "light";
  return (
    <TamaguiProvider config={config} defaultTheme={scheme}>
      <Theme name={scheme}>
        <Slot />
      </Theme>
    </TamaguiProvider>
  );
}

declare module "tamagui" {
  interface TamaguiCustomConfig extends AppConfig {}
}

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const config = getDefaultConfig(__dirname);
config.resolver.unstable_enablePackageExports = true;
module.exports = config;