Toast not visible on iOS when using SafeAreaProvider with React Navigation header

[armendkras]

When using react-native-toast-message in an Expo project with SafeAreaProvider from react-native-safe-area-context and @react-navigation/stack, toasts are not visible on iOS if the stack screen has a header. The toast appears to be rendered behind the navigation header.

Steps to reproduce

Wrap your app in SafeAreaProvider

Use a stack navigator from @react-navigation/stack with the default header shown

Render at the root level

Trigger a toast from any screen

Observe on iOS — the toast does not appear or is hidden behind the header

Expected behavior

Toast should appear above all content, including headers, when rendered at the top of the component tree.

Screenshots

If needed, include screenshots or a video of the behavior.

Code sample:
// App.tsx

// AuthNavigation.tsx
<Stack.Navigator>
<Stack.Screen name="Auth" component={SignInScreen} />
</Stack.Navigator>
Environment

OS: iOS 18.5

Expo SDK: 53

react-native: 0.79.5

react-native-toast-message: 2.3.3

react-native-safe-area-context: 5.4.0

@react-navigation/stack: 7.4.2

Additional context

This only occurs on iOS. Manually setting topOffset on the component doesn’t resolve the issue consistently. It appears to be a z-index/stacking issue when SafeArea and Stack headers are both involved.

[DanieleSimic]

@armendkras i tried a little and came to a temporary solution which i dont really like but its better than nothing:

App.tsx:
<SafeAreaProvider > ... </SafeAreaProvider > <Toast topOffset={Platform.os === 'ios' ? 85 : 60} position={'top'} ...otherProps />
The values inside the topOffset prop need to be tested. i think i'll use this approach until the library is updated to resolve the issue.

If there are better fixes please let me know, in my scenario i'm not using the safeAreaContext so i'm setting manually a standard top distance which is not optimal.

[T-NAVe]

@armendkras @DanieleSimic On react-navigation 7 I've found a working solution, since new navigator now comes with the prop layout we can put the Toast there like so:

<Stack.navigator
  //....
  layout={ ({children}) =>
    <>
      {children}
      <Toast /> // adjust position using a View with position: 'relative' if needed
    </>
   }