fix(FabricExample): Add insets handling to prevent rendering toast behind navigation bar (#3942)

## Description

Toasts were rendered behind the navigation bar on Android with the old
navigation system; this PR is adding insets handling over Toast
components.

## Changes

- added inset handling

## Before & after - visual documentation

| Before | After |
| --- | --- |
| <img width="673" height="1288" alt="Screenshot 2026-04-27 at 15 28 04"
src="https://github.com/user-attachments/assets/7f4c46da-52a8-4c14-a68c-b42c20f97f3e"
/> | <img width="674" height="1299" alt="Screenshot 2026-04-27 at 15 27
10"
src="https://github.com/user-attachments/assets/465ee6b1-3a3b-4839-be10-8139af5f360f"
/> |

## Test plan

Any test with toast on android 10.

## Checklist

- [ ] Included code example that can be used to test this change.
- [ ] For visual changes, included screenshots / GIFs / recordings
documenting the change.
- [ ] For API changes, updated relevant public types.
- [ ] Ensured that CI passes

Author: t0maboro

apps/src/shared/Toast.tsx

@@ -8,6 +8,10 @@ import {
   ViewStyle,
 } from 'react-native';
 import { nanoid } from 'nanoid/non-secure';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 interface ToastProps {
   index: number;
@@ -63,6 +67,30 @@ const ToastContext = createContext({
   },
 });
 
+const ToastContainer = ({
+  toasts,
+  remove,
+}: {
+  toasts: IToast[];
+  remove: (id: string) => void;
+}) => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <>
+      {toasts.map((toast, i) => (
+        <Toast
+          index={i}
+          key={toast.id}
+          style={{ bottom: insets.bottom + 5 + i * 25 }}
+          {...toast}
+          remove={remove}
+        />
+      ))}
+    </>
+  );
+};
+
 interface ToastProviderProps {
   children: React.ReactNode;
 }
@@ -80,20 +108,15 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
   };
 
   return (
-    <ToastContext.Provider value={{ push }}>
-      <>
-        {children}
-        {toasts.map((toast, i) => (
-          <Toast
-            index={i}
-            key={toast.id}
-            style={{ marginBottom: i * 25 }}
-            {...toast}
-            remove={remove}
-          />
-        ))}
-      </>
-    </ToastContext.Provider>
+    <SafeAreaProvider>
+      <ToastContext.Provider value={{ push }}>
+        <>
+          {children}
+          {/* Render the internal container */}
+          <ToastContainer toasts={toasts} remove={remove} />
+        </>
+      </ToastContext.Provider>
+    </SafeAreaProvider>
   );
 };
 
@@ -104,7 +127,6 @@ const styles = StyleSheet.create({
     flex: 1,
     position: 'absolute',
     alignSelf: 'center',
-    bottom: 5,
   },
   alert: {
     alignItems: 'center',