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.
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;
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).