Search code examples
androidreact-nativetoasttamagui

Tamagui toast gives error regarding PortalProvider

I am trying to use Tamagui toast in my app and getting an error regarding PortalProvider (given in the screenshot). I am taking a reference from the expo+nextjs starter code to get a bare minimal example working.

enter image description here

Even after using PortalProvider to wrap my app code (referring this issue), the error still persists. Here's my code -

// Relevant imports
// ...
import { Toast, ToastViewport, ToastProvider, useToastState } from "@tamagui/toast";

const isExpo = Constants.executionEnvironment === ExecutionEnvironment.StoreClient;

const NativeToast = () => {
  const currentToast = useToastState();
  if (!currentToast || currentToast.isHandledNatively) {
    return null;
  }
  return (
    <Toast
      key={currentToast.id}
      duration={currentToast.duration}
      viewportName={currentToast.viewportName}
    >
      <YStack>
        <Toast.Title lineHeight={8}>{currentToast.title}</Toast.Title>
        {!!currentToast.message && (
          <Toast.Description>{currentToast.message}</Toast.Description>
        )}
      </YStack>
    </Toast>
  );
};

const MyToastProvider: FC<PropsWithChildren> = ({ children }) => {
  return (
    <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}
      {isExpo ? <NativeToast /> : null}
      <ToastViewport top={24} left={12} right={12} />;
    </ToastProvider>
  );
};

export function App() {
  return (
    <PortalProvider>
      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
        <MyToastProvider>
          {/* My app here */}
        </MyToastProvider>
      </TamaguiProvider>
    </PortalProvider>
  );
}

export default App;
Solution

  • I resolved this issue by updating the tamagui-toast version to the correct version of the main tamagui package (my tamagui-toast package version was slightly behind).