Context

I created a new tamagui project using their template (which included expo-router and some other libs).

It worked great until, I started encountering an issue randomly yesterday when I tried running the project on the android simulator. Up till that point I had not encountered any issues.

Problem

I'm getting the following error when running yarn android, the simulator is showing a "Rendor Error"

Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering. Also, make sure all of your tamagui dependencies are on the same version ('tamagui', '@tamagui/package-name', etc.) not just in your package.json, but in your lockfile.

What I've done

1. The tamagui.config.ts is set at the root directory of the project and it exports the config file
2. I'm importing the config to app/Provider.tsx and I'm passing the config to the <TamaguiProvider config={config} ...
3. I've logged the config in the file mentioned previously and it's properly set.
4. The libraries are all set at the same version 1.120.0 (in package.json + yarn.lock file, only thing I've noticed is that the @tamagui/core library is set to 1.120.2)
5. I've rm -rf node_modules android + yarn cache clean and reinstalled everything without success.

Question

How do I resolve the error mentioned previously? Why was it working the other day and all of a sudden it no longer works?

Code

note: i'm aware that I'm exporting the config twice, one as a named export and the other as default. I've played around with both and it doesn't change anything.

// tamagui.config.ts

import { createTamagui } from "tamagui";
import { config as defaultConfig } from "@tamagui/config/v3";

export type Conf = typeof config;

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

const colors = {
  // colors here and used in createTamagui config
};

const config = createTamagui({
  // Stuff here
});

export type TamaguiConfig = typeof config;
export default config;

// app/Provider.tsx

import { useColorScheme } from "react-native";
import { TamaguiProvider, type TamaguiProviderProps } from "tamagui";
import { ToastProvider, ToastViewport } from "@tamagui/toast";
import { CurrentToast } from "./CurrentToast";
import config from "../tamagui.config";
import { ParentHeightProvider } from "./providers/ParentHeightContext";

export function Provider({
  children,
  ...rest
}: Omit<TamaguiProviderProps, "config">) {
  const colorScheme = useColorScheme();

  return (
    <TamaguiProvider
      config={config}
      defaultTheme={colorScheme === "dark" ? "dark" : "light"}
      {...rest}
    >
      <ParentHeightProvider>
        <ToastProvider
          swipeDirection="horizontal"
          duration={6000}
          native={
            [
              /* uncomment the next line to do native toasts on mobile. NOTE: it'll require you making a dev build and won't work with Expo Go */
              // 'mobile'
            ]
          }
        >
          {children}
          <CurrentToast />
          <ToastViewport top="$8" left={0} right={0} />
        </ToastProvider>
      </ParentHeightProvider>
    </TamaguiProvider>
  );
}

Context

I created a new tamagui project using their template (which included expo-router and some other libs).

It worked great until, I started encountering an issue randomly yesterday when I tried running the project on the android simulator. Up till that point I had not encountered any issues.

Problem

I'm getting the following error when running yarn android, the simulator is showing a "Rendor Error"

Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering. Also, make sure all of your tamagui dependencies are on the same version ('tamagui', '@tamagui/package-name', etc.) not just in your package.json, but in your lockfile.

What I've done

1. The tamagui.config.ts is set at the root directory of the project and it exports the config file
2. I'm importing the config to app/Provider.tsx and I'm passing the config to the <TamaguiProvider config={config} ...
3. I've logged the config in the file mentioned previously and it's properly set.
4. The libraries are all set at the same version 1.120.0 (in package.json + yarn.lock file, only thing I've noticed is that the @tamagui/core library is set to 1.120.2)
5. I've rm -rf node_modules android + yarn cache clean and reinstalled everything without success.

Question

How do I resolve the error mentioned previously? Why was it working the other day and all of a sudden it no longer works?

Code

note: i'm aware that I'm exporting the config twice, one as a named export and the other as default. I've played around with both and it doesn't change anything.

// tamagui.config.ts

import { createTamagui } from "tamagui";
import { config as defaultConfig } from "@tamagui/config/v3";

export type Conf = typeof config;

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

const colors = {
  // colors here and used in createTamagui config
};

const config = createTamagui({
  // Stuff here
});

export type TamaguiConfig = typeof config;
export default config;

// app/Provider.tsx

import { useColorScheme } from "react-native";
import { TamaguiProvider, type TamaguiProviderProps } from "tamagui";
import { ToastProvider, ToastViewport } from "@tamagui/toast";
import { CurrentToast } from "./CurrentToast";
import config from "../tamagui.config";
import { ParentHeightProvider } from "./providers/ParentHeightContext";

export function Provider({
  children,
  ...rest
}: Omit<TamaguiProviderProps, "config">) {
  const colorScheme = useColorScheme();

  return (
    <TamaguiProvider
      config={config}
      defaultTheme={colorScheme === "dark" ? "dark" : "light"}
      {...rest}
    >
      <ParentHeightProvider>
        <ToastProvider
          swipeDirection="horizontal"
          duration={6000}
          native={
            [
              /* uncomment the next line to do native toasts on mobile. NOTE: it'll require you making a dev build and won't work with Expo Go */
              // 'mobile'
            ]
          }
        >
          {children}
          <CurrentToast />
          <ToastViewport top="$8" left={0} right={0} />
        </ToastProvider>
      </ParentHeightProvider>
    </TamaguiProvider>
  );
}

• javascript
• react-native
• tamagui

• 1 I ended up creating a new project using npm (dropped yarn) and setting up the project manually instead of using the tamagui config and it worked. – kockburn Commented Jan 10 at 8:33

1 Answer 1

The error message mentions potential duplicate configs or setup issues so lets try to address that:

// app/_layout.tsx
import { Provider } from './Provider';
import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Provider>
      <Stack />
    </Provider>
  );
}

// tamagui.config.ts
import { createTamagui } from 'tamagui';
import { config as defaultConfig } from '@tamagui/config/v3';

// Create a separate themes object
const themes = {
  light: {
    background: '#fff',
    // ... other theme colors
  },
  dark: {
    background: '#000',
    // ... other theme colors
  },
};

const config = createTamagui({
  ...defaultConfig,
  themes,
  // Ensure these are properly set
  defaultFont: 'System',
  animations: {
    ...defaultConfig.animations,
  },
  tokens: {
    ...defaultConfig.tokens,
  },
});

export type TamaguiConfig = typeof config;
// Only export the config once
export default config;

// babel.config.js
module.exports = function(api) {
  api.cache(true);
  
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // Ensure proper order of plugins
      [
        'transform-inline-environment-variables',
        {
          include: ['TAMAGUI_TARGET', 'EXPO_ROUTER_APP_ROOT'],
        },
      ],
      [
        '@tamagui/babel-plugin',
        {
          components: ['tamagui'],
          config: './tamagui.config.ts',
          logTimings: true,
        },
      ],
      'react-native-reanimated/plugin',
      require.resolve('expo-router/babel'),
    ],
  };
};

// app.json
{
  "expo": {
    "plugins": [
      [
        "@tamagui/babel-plugin",
        {
          "components": ["tamagui"],
          "config": "./tamagui.config.ts"
        }
      ]
    ]
  }
}

Based on your description and the error message, here are a few things to check and try:

Ensure your Tamagui provider entry point is set up at the root of your app. In Expo Router, this should be in app/_layout.tsx. The provider should wrap everything.

The different version of @tamagui/core (1.120.2) while others are at 1.120.0 could be causing issues. Try forcing all Tamagui packages to the same version:

yarn add [email protected] @tamagui/[email protected] @tamagui/[email protected]

Simplify your config export to avoid any potential confusion. Remove the named export and only use the default export as shown in the artifact.

Check if you have proper Metro configuration. Create or update your metro.config.js:

const { getDefaultConfig } = require("expo/metro-config");
const { withTamagui } = require("@tamagui/metro-plugin");

const config = getDefaultConfig(__dirname);

module.exports = withTamagui(config, {
  components: ["tamagui"],
  config: "./tamagui.config.ts",
});

Try clearing the Metro bundler cache:

yarn start --clear

The sudden appearance of this error could be due to:

A package update that introduced version mismatches Metro bundler cache issues

Changes in environment variables or configuration files

To resolve this:

Implement the changes from the artifact above

Clear all caches:

watchman watch-del-all
rm -rf node_modules
rm -rf android/build
yarn cache clean
yarn install

Rebuild your Android app:

cd android
./gradlew clean
cd ..
yarn android

These should hopefully resolve the issues