toast.show() function is not working when the app starts

[wildhunter4137]

While i am using react-native-toast-notifications in react native project, i have used useToast() in my splashscreen.

I have wrapped splashscreen component using ToastProvider

Here is it

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.

[ashishrana06]

Hi, try adding this in your main app.js.

<Toast ref={(ref) => global['toast'] = ref} duration={5000} placement='top'/>