While I am using react-native-toast-notifications
in my react native project, I have used useToast()
in my splash screen.
I have wrapped splash screen component using ToastProvider
Here it is.
import { DefaultTheme, NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { SplashScreen } from '@pages/auth/splash'
import { SignIn } from '@pages/auth/login'
import { ToastProvider } from 'react-native-toast-notifications'
const RootStack = createNativeStackNavigator()
const navigationContainerTheme = DefaultTheme
navigationContainerTheme.colors.background = color.appBackgroudColor
export const Routing = () => {
return (
<ToastProvider>
<MenuProvider>
<NavigationContainer theme={navigationContainerTheme}>
<RootStack.Navigator
initialRouteName={Routes.SPLASH}
screenOptions={{ animation: 'none' }}
>
<RootStack.Screen
name={Routes.SIGN_IN}
component={SignIn}
options={{
headerShown: false,
}}
/>
...
</RootStack.Navigator>
</NavigationContainer>
</MenuProvider>
</ToastProvider>
)
}
And here is my splashscreen.ts file
import React, { useEffect } from 'react'
import {
ScrollView,
StyleSheet,
useColorScheme,
View,
TouchableOpacity,
} from 'react-native'
import { SplashScreenProps } from '@app/types'
import { Routes } from '@shared/config/routes'
import { sendPing } from '@shared/api/defaultApi'
import { useToast } from 'react-native-toast-notifications'
export const SplashScreen = ({ navigation }: SplashScreenProps) => {
const css = styleInit(useColorScheme() === 'dark')
const toast = useToast()
useEffect(() => {
showSplashScreen()
}, [navigation])
const showSplashScreen = async () => {
const pingResponse = await sendPing()
if (pingResponse) {
toast.show('Success to connect server!')
navigation.navigate(Routes.AUTHORIZE)
} else {
toast.show('Failed to connect server!')
console.log('Ping server failed!')
}
}
return (
<View>
<Text>Splashscreen</Text>
</View>
)
}
And if i start the app, it will send a ping to server and get the response. And after i get the response, this error has occurred
Possible unhandled promise rejection (id: 0: TypeError: toast.show is not a function (it is undefined)
...
I dont know what the reason is, maybe there is delay to initialize the toast using useToast() hook? I would appreciate it if someone could help me with this problem. Thanks.
I have tried to set the timeout till the toast is initialized, but it didnt work as well.
You should wait until Toast component is rendered, which can be done using useEffect.
useEffect(() => {
const initializeToast = async () => {
while (!toast || !toast.show) {
await new Promise(resolve => setTimeout(resolve, 100))
}
isToastInitialized.current = true
showSplashScreen()
}
initializeToast()
}, [toast])