Toast appears on previous screen when presentation: 'modal', in react navigation

[chiefchief]

Describe the bug
I'm using react navigation, here is my usage of ToastProvider

const App = () => {
  return (
    <ToastProvider>
      <StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'dark-content'} />
      <Navigator
        ref={navigationRef}
        onReady={() => {
          Bootsplash.hide({ fade: true });
          navigationIntegration.registerNavigationContainer(navigationRef);
        }}
      />
    </ToastProvider>
  );
};

my ToastProvider:

import React, { memo, PropsWithChildren } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Toast, { ToastConfig } from 'react-native-toast-message';

import { ErrorToast } from './ErrorToast/ErrorToast';

export const toastConfig: ToastConfig = {
  error: ErrorToast,
};

export const ToastProvider = memo<PropsWithChildren>(({ children }) => {
  const { top } = useSafeAreaInsets();

  return (
    <>
      {children}
      <Toast config={toastConfig} topOffset={top} autoHide={false} />
    </>
  );
});

inside react navigation i have a screen which has option -

presentation: 'modal',

From the first screen i'm navigating to the second screen (with option: presentation: 'modal'), on the second screen, i call Toast.show, but the toast actually appears on previous screen and not visible on second

adding layout helps a little:

        SecondScreen: {
          screen: SecondScreen,
          options: ({ navigation }) => ({
            headerTransparent: true,
            title: 'SecondScreen',
            presentation: 'modal',
          }),
          layout: modalLayout,
        },

export const modalLayout = ({ children }: { children: React.ReactElement }) => {
  return (
    <>
      {children}
      <Toast config={toastConfig} topOffset={16} autoHide={false} />
    </>
  );
};

but the toast behind the header (title shows above the toast)

Expected behavior
Toast should appear above the current screen

Screenshots
If applicable, add screenshots to help explain your problem.

Code sample
To help debugging, please add a code sample that reproduces the issue.

Environment (please complete the following information):

• OS: iOS
• "react-native-toast-message": "^2.3.0"
• "react-native": "0.80.0"
• "@react-navigation/native": "^7.1.14"
• "@react-navigation/native-stack": "^7.3.21"

Additional context
Add any other context about the problem here.

[chiefchief]

I did find the solution, thanks to react-navigation/react-navigation#12011 (comment)

My ToastProvider

import React, { memo, PropsWithChildren } from 'react';

import { ToastConfigured } from './ToastConfigured';

export const ToastProvider = memo<PropsWithChildren>(({ children }) => {
  return (
    <>
      {children}
      <ToastConfigured />
    </>
  );
});

And the ToastConfigured

import { memo } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { FullWindowOverlay } from 'react-native-screens';
import Toast, { ToastConfig } from 'react-native-toast-message';

import { ErrorToast } from './ErrorToast/ErrorToast';

export const toastConfig: ToastConfig = {
  error: ErrorToast,
};

export const ToastConfigured = memo(() => {
  const { top } = useSafeAreaInsets();
  return (
    <FullWindowOverlay>
      <Toast config={toastConfig} topOffset={top} autoHide={false} />
    </FullWindowOverlay>
  );
});

With the toast wrapped in FullWindowOverlay from react-native-screens, the toast displays the same on every screen

[360Parminder]

facing the same Issue While i am using Modal

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { AuthProvider } from './src/context/AuthContext';
import { StatusBar } from 'react-native';
import AppNavigator from './src/navigation/AppNavigator';
import Toast from 'react-native-toast-message';
import { toastConfig } from './src/config/toastConfig';

const App = () => {
  return (
    <SafeAreaProvider>
      <StatusBar barStyle="dark-content" />
      <AuthProvider>
        <AppNavigator />
      </AuthProvider>
      <Toast
        config={toastConfig} 
        // ref={(ref) => Toast.setRef(ref)} 
        position="top" // Optional: position can be 'top' (default) or 'bottom'
        topOffset={50} // Optional: adjust if your status bar overlaps
        visibilityTime={5000} // Optional: default is 4000ms
      />
    </SafeAreaProvider>
  );
};

export default App;

  const showToast = (type, message, subMessage = '') => {
    Toast.show({
      type,
      text1: message,
      text2: subMessage,
      visibilityTime: 3000,
      autoHide: true,
      topOffset: 50,
    });
  };


  const findConnection = async (userId) => {
    try {
      const response = await connectionApi.find(userId);
      console.log('Connection found:', response.data);
      
      setConnection(response.data.user);
      showToast('success', 'Connection Found', response.data.user.username);
    } catch (error) {
      console.error('Error finding connection:', error);
      showToast('error', 'Connection Not Found', error.message);
    }
  };

[lucksp]

This works...bummer we have to have a library that wraps this to make it work in all scenarios...