fix(FabricExample): Wrap some components with SAV to prevent hiding behind navigation bar (#3944)

## Description

Important for e2e tests. Some pressabels weren't working on Android 10,
because were hidden behind old-style navigation bar. Also changing the
approach for Toast
#3942 ,
becaue after internal discussion we decided that we shouldn't rely on
`react-native-safe-area-context` and use our SAV with proper edges
configuration.

## Changes

- add paddingBottom to ScrollView content
- revert changes from
#3942
- wrap ToastProvider with SAV

## Before & after - visual documentation

| Before | After |
| --- | --- |
| <img width="592" height="1228" alt="Screenshot 2026-04-28 at 10 32 21"
src="https://github.com/user-attachments/assets/7bfcfceb-cb7b-4c3a-a18d-0922aa7bf7e3"
/> | <img width="610" height="1224" alt="Screenshot 2026-04-28 at 10 31
47"
src="https://github.com/user-attachments/assets/6873399a-a591-49c4-bf89-04cb6634d431"
/> |

## Test plan

ScrollView from SFT -> Tabs

## 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

@@ -6,12 +6,10 @@ import {
   Dimensions,
   View,
   ViewStyle,
+  Platform,
 } from 'react-native';
 import { nanoid } from 'nanoid/non-secure';
-import {
-  SafeAreaProvider,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-screens/experimental';
 
 interface ToastProps {
   index: number;
@@ -67,30 +65,6 @@ 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;
 }
@@ -108,15 +82,22 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
   };
 
   return (
-    <SafeAreaProvider>
+    <SafeAreaView edges={{ bottom: Platform.OS === 'android' }}>
       <ToastContext.Provider value={{ push }}>
         <>
           {children}
-          {/* Render the internal container */}
-          <ToastContainer toasts={toasts} remove={remove} />
+          {toasts.map((toast, i) => (
+            <Toast
+              index={i}
+              key={toast.id}
+              style={{ marginBottom: i * 25 }}
+              {...toast}
+              remove={remove}
+            />
+          ))}
         </>
       </ToastContext.Provider>
-    </SafeAreaProvider>
+    </SafeAreaView>
   );
 };
 
@@ -127,6 +108,7 @@ const styles = StyleSheet.create({
     flex: 1,
     position: 'absolute',
     alignSelf: 'center',
+    bottom: 5,
   },
   alert: {
     alignItems: 'center',

apps/src/tests/shared/ScenarioScreen.tsx

@@ -1,12 +1,13 @@
 import React, { useMemo } from 'react';
-import { ScrollView } from 'react-native';
+import { Platform, ScrollView } from 'react-native';
 import type { Scenario, ScenarioGroup } from './helpers';
 import { ScenarioButton } from './ScenarioButton';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import {
   NavigationContainer,
   NavigationIndependentTree,
 } from '@react-navigation/native';
+import { SafeAreaView } from 'react-native-screens/experimental';
 
 function ScenarioSelect(props: {
   scenarios: Record<string, Scenario>;
@@ -41,38 +42,40 @@ export default function ScenarioSelectionScreen(props: {
   const Stack = useMemo(() => createNativeStackNavigator(), []);
 
   return (
-    <NavigationIndependentTree>
-      <NavigationContainer>
-        <Stack.Navigator screenOptions={{ headerShown: false }}>
-          <Stack.Screen
-            key="Main"
-            name="Main"
-            options={{
-              headerShown: true,
-              headerLargeTitleEnabled: true,
-              headerTitle: props.scenarioGroup.name,
-            }}>
-            {() => (
-              <ScenarioSelect
-                scenarios={props.scenarioGroup.scenarios}
-                groupName={props.scenarioGroup.name}
-              />
-            )}
-          </Stack.Screen>
-          {Object.values<Scenario>(props.scenarioGroup.scenarios).map(
-            (ScenarioComponent: Scenario) => {
-              const { key } = ScenarioComponent.scenarioDescription;
-              return (
-                <Stack.Screen
-                  key={key}
-                  name={key}
-                  component={ScenarioComponent}
+    <SafeAreaView edges={{ bottom: Platform.OS === 'android' }}>
+      <NavigationIndependentTree>
+        <NavigationContainer>
+          <Stack.Navigator screenOptions={{ headerShown: false }}>
+            <Stack.Screen
+              key="Main"
+              name="Main"
+              options={{
+                headerShown: true,
+                headerLargeTitleEnabled: true,
+                headerTitle: props.scenarioGroup.name,
+              }}>
+              {() => (
+                <ScenarioSelect
+                  scenarios={props.scenarioGroup.scenarios}
+                  groupName={props.scenarioGroup.name}
                 />
-              );
-            },
-          )}
-        </Stack.Navigator>
-      </NavigationContainer>
-    </NavigationIndependentTree>
+              )}
+            </Stack.Screen>
+            {Object.values<Scenario>(props.scenarioGroup.scenarios).map(
+              (ScenarioComponent: Scenario) => {
+                const { key } = ScenarioComponent.scenarioDescription;
+                return (
+                  <Stack.Screen
+                    key={key}
+                    name={key}
+                    component={ScenarioComponent}
+                  />
+                );
+              },
+            )}
+          </Stack.Navigator>
+        </NavigationContainer>
+      </NavigationIndependentTree>
+    </SafeAreaView>
   );
 }