chore: Update FormSheet-SAV integration test to cover sheetShouldOverflowTopInset

apps/src/tests/Test3336.tsx

@@ -19,6 +19,17 @@ import { Spacer } from '../shared';
 import Colors from '../shared/styling/Colors';
 import { Edge, SafeAreaView } from 'react-native-screens/experimental';
 
+/**
+ * Changelog:
+ *
+ * #3503 - Add toggle for `sheetShouldOverflowTopInset` - allowing testing SAV integration with FormSheet that overlaps top inset.
+ *           If `sheetShouldOverflowTopInset` is true - FormSheet with max detent should overflow the content with system bars, unless
+ *           SafeAreaView insets are enabled.
+ * #3435 - Add example for testing pressables when TextInput changed Sheet translation on keyboard appear/disappear
+ * #3336 - Add example covering all FormSheet detents - SAV pairs
+ *
+ */
+
 type StackParamList = {
   Main: undefined;
   FormSheetWithFitToContents: undefined;
@@ -45,10 +56,12 @@ const Stack = createNativeStackNavigator<StackParamList>();
 type MainProps = {
   navigation: NativeStackNavigationProp<StackParamList, 'Main'>;
   useSafeArea: boolean;
+  shouldOverflowTopInset: boolean;
   edges: Partial<Record<Edge, boolean>>;
   toggleSafeArea: () => void;
   toggleTopEdge: () => void;
   toggleBottomEdge: () => void;
+  toggleOverflowTopInset: () => void;
 };
 
 const EXAMPLES = [
@@ -71,16 +84,18 @@ const EXAMPLES = [
     'Partially covered status bar (TextInput)',
     'FormSheetOverStatusBarWithTextInput',
   ],
-  ['Pressable & TextInput', 'FormSheetTextInputAndPressable']
+  ['Pressable & TextInput', 'FormSheetTextInputAndPressable'],
 ];
 
 function Main({
   navigation,
   useSafeArea,
+  shouldOverflowTopInset,
   edges,
   toggleSafeArea,
   toggleTopEdge,
   toggleBottomEdge,
+  toggleOverflowTopInset,
 }: MainProps) {
   return (
     <View style={{ flex: 1, padding: 16 }}>
@@ -91,6 +106,9 @@ function Main({
         [Android] Edges, top: {edges.top ? 'enabled' : 'disabled'}, bottom:{' '}
         {edges.bottom ? 'enabled' : 'disabled'}
       </Text>
+      <Text style={{ fontSize: 20, marginVertical: 4 }}>
+        sheetShouldOverflowTopInset: {shouldOverflowTopInset ? 'true' : 'false'}
+      </Text>
       <View style={{ marginVertical: 4 }}>
         <Button onPress={toggleSafeArea} title="Toggle SAV" />
       </View>
@@ -100,6 +118,12 @@ function Main({
       <View style={{ marginVertical: 4 }}>
         <Button onPress={toggleBottomEdge} title="Toggle bottom edge" />
       </View>
+      <View style={{ marginVertical: 4 }}>
+        <Button
+          onPress={toggleOverflowTopInset}
+          title="Toggle overflow top inset"
+        />
+      </View>
       <View
         style={{
           width: '100%',
@@ -124,15 +148,17 @@ function Main({
   );
 }
 
-const formSheetBaseOptions: NativeStackNavigationOptions = {
+const getFormSheetBaseOptions = (
+  shouldOverflowTopInset: boolean,
+): NativeStackNavigationOptions => ({
   presentation: 'formSheet',
   animation: 'slide_from_bottom',
   headerShown: false,
   contentStyle: {
     backgroundColor: Colors.GreenLight100,
   },
-  // TODO(@t0maboro) - add `sheetShouldOverflowTopInset` prop here when possible
-};
+  sheetShouldOverflowTopInset: shouldOverflowTopInset,
+});
 
 function PressableBase() {
   return (
@@ -241,11 +267,13 @@ export default function App() {
     top: true,
     bottom: true,
   });
+  const [shouldOverflowTopInset, setShouldOverflowTopInset] = useState(false);
   const toggleSafeArea = () => setUseSafeArea(prev => !prev);
   const toggleTopEdge = () =>
     setSafeAreaEdges(prev => ({ ...prev, top: !prev.top }));
   const toggleBottomEdge = () =>
     setSafeAreaEdges(prev => ({ ...prev, bottom: !prev.bottom }));
+  const toggleOverflowTopInset = () => setShouldOverflowTopInset(prev => !prev);
 
   return (
     <NavigationContainer>
@@ -257,10 +285,12 @@ export default function App() {
             <Main
               navigation={navigation}
               useSafeArea={useSafeArea}
+              shouldOverflowTopInset={shouldOverflowTopInset}
               edges={safeAreaEdges}
               toggleSafeArea={toggleSafeArea}
               toggleTopEdge={toggleTopEdge}
               toggleBottomEdge={toggleBottomEdge}
+              toggleOverflowTopInset={toggleOverflowTopInset}
             />
           )}
         />
@@ -275,7 +305,7 @@ export default function App() {
             },
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: 'fitToContents',
           }}
         />
@@ -287,7 +317,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.2],
           }}
         />
@@ -299,7 +329,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.5],
           }}
         />
@@ -311,7 +341,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.8],
           }}
         />
@@ -323,7 +353,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.3, 0.6],
           }}
         />
@@ -335,7 +365,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.3, 0.6, 0.9],
           }}
         />
@@ -347,7 +377,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [1.0],
           }}
         />
@@ -359,7 +389,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.99],
           }}
         />
@@ -374,7 +404,7 @@ export default function App() {
             },
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: 'fitToContents',
           }}
         />
@@ -386,7 +416,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.2],
           }}
         />
@@ -398,7 +428,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.5],
           }}
         />
@@ -410,7 +440,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.8],
           }}
         />
@@ -422,7 +452,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.3, 0.6],
           }}
         />
@@ -434,7 +464,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.3, 0.6, 0.9],
           }}
         />
@@ -446,7 +476,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [1.0],
           }}
         />
@@ -458,7 +488,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.99],
           }}
         />
@@ -470,7 +500,7 @@ export default function App() {
             safeAreaEdges,
           )}
           options={{
-            ...formSheetBaseOptions,
+            ...getFormSheetBaseOptions(shouldOverflowTopInset),
             sheetAllowedDetents: [0.5],
           }}
         />