If you'd like an example of an Expo web app albeit not kept up to date, check out this repo . Before going your own, you may be better served using a pre-made community Expo starter for inspiration as they typically are fully working and have figured out more details than are in this guide.

Installing Tamagui in Expo

This guide assumes Expo is configured with TypeScript support.

npx create-expo-app -t expo-template-blank-typescript

For instructions on adding TypeScript to an existing project, visit https://docs.expo.dev/guides/typescript/

To support dark mode, update your app.json to app.config.ts and set "userInterfaceStyle" to "automatic"

Update Babel / Metro

The following steps are optional but useful for many apps, they enable the optimizing compiler, reanimated, as well as using process.env.XYZ for environment variables.

yarn add @tamagui/babel-plugin babel-plugin-transform-inline-environment-variables
npx expo install react-native-reanimated

Update your babel.config.js to include the optional @tamagui/babel-plugin and transform-inline-environment-variables (and react-native-reanimated if using reanimated):

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      // optional, only if you ever use process.env
      "transform-inline-environment-variables",
      // NOTE: this is optional, you don't *need* the compiler
      [
        "@tamagui/babel-plugin",
        {
          components: ["tamagui"],
          config: "./tamagui.config.ts",
          logTimings: true,
        },
      ],
      // NOTE: this is only necessary if you are using reanimated for animations
      "react-native-reanimated/plugin",
    ],
  };
}

If you're using a monorepo you probably want to use this Metro configuration:

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname, {
  // [Web-only]: Enables CSS support in Metro.
  isCSSEnabled: true,
});

// Expo 49 issue: default metro config needs to include "mjs"
// https://github.com/expo/expo/issues/23180
config.resolver.sourceExts.push('mjs');

module.exports = config;

Setup Tamagui

From here on out you can follow the Installation and Configuration docs.

Loading fonts

You need to load your fonts for React Native to recognize them. Typically this looks something like if using Expo, (or you can follow a React Native guide here ):

import { useFonts } from 'expo-font'

function App() {
  const [loaded] = useFonts({
    Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
    InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf"),
  });

  useEffect(() => {
    if (loaded) {
      // can hide splash screen here
    }
  }, [loaded])

  if (!loaded) {
    return null;
  }

  return <MyApp />
}

First time starting Expo

The first time running your project with Tamagui, be sure to clear the cache:

 expo start -c

Your package.json scripts should look something like this:

{
  "scripts": {
    "start-native": "expo start -c",
    "start-web": "expo start -c",
    "android": "yarn expo run:android",
    "ios": "yarn expo run:ios",
    "web": "expo start --web"
  }
}

Other resources

If you'd like to get a good idea of a set up with Expo, try out npm create tamagui which generates a managed expo project.

The source for that is here .

More examples:

Tamagui Expo

Edit this page on GitHub.

Forms

Panels

Organize

Content

Visual