Expo Guide
How to set up Tamagui with Expo
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-variablesnpx 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-metroconst { 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/23180config.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.
More examples: