Toast takes a while to appear and closes prematurely #3216
Description
I'm using Toast in my React Native Expo SDK 54 app, and it has some strange behavior... I've attached my _layout and usage example... thanks
`import { ToastProvider } from "@gluestack-ui/toast";
import { useColorScheme } from "@/components/useColorScheme";
import "@/utils/i18n";
import { Main } from "@expo/html-elements";
export {
// Catch any errors thrown by the Layout component.
ErrorBoundary,
} from "expo-router";
export const unstable_settings = {
// Ensure that reloading on /modal keeps a back button present.
initialRouteName: "index",
};
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const [loaded, error] = useFonts({
SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
...FontAwesome.font,
});
// Expo Router uses Error Boundaries to catch errors in the navigation tree.
useEffect(() => {
if (error) throw error;
}, [error]);
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);
if (!loaded) {
return null;
}
return ;
}
function RootLayoutNav() {
const colorScheme = useColorScheme();
return (
<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
<Stack.Screen name="index" options={{ headerShown: false }} />
<Stack.Screen name="(roof-up)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ presentation: "modal" }} />
);
}`
Use case:
const showToast = () => { console.log("Mostrando Toast", Math.random()); toast.show({ id: Math.random(), placement: "top", duration: 3000, render: ({ id }) => { const uniqueToastId = "toast-" + id; return ( <Toast nativeID={uniqueToastId} action="muted" variant="solid"> <ToastTitle>Hello!</ToastTitle> <ToastDescription> This is a customized toast message. </ToastDescription> </Toast> ); }, }); };