chore(iOS, SplitView): Add more tests for SplitView - NativeStack integration

apps/src/tests/TestSplitView/SplitViewWithNativeStack/SplitViewWithNativeStackGestures.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
+import { NativeStackNavigatorComponent } from '../helpers';
+import { SplitViewBaseConfig } from '../helpers/types';
+
+export const SplitViewWithNativeStackGestures = ({
+  splitViewBaseConfig,
+}: {
+  splitViewBaseConfig: SplitViewBaseConfig;
+}) => {
+  return (
+    <SplitViewHost {...splitViewBaseConfig}>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenOneNavigationOptions={{
+            gestureEnabled: true,
+          }}
+          customScreenTwoNavigationOptions={{
+            gestureEnabled: true,
+          }}
+          customScreenThreeNavigationOptions={{
+            gestureEnabled: false,
+          }}
+        />
+      </SplitViewScreen.Column>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenOneNavigationOptions={{
+            fullScreenGestureEnabled: true,
+            gestureEnabled: true,
+          }}
+          customScreenTwoNavigationOptions={{
+            fullScreenGestureEnabled: true,
+            gestureEnabled: true,
+          }}
+          customScreenThreeNavigationOptions={{
+            fullScreenGestureEnabled: true,
+            gestureEnabled: false,
+          }}
+        />
+      </SplitViewScreen.Column>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenOneNavigationOptions={{
+            fullScreenGestureEnabled: true,
+            animation: 'fade_from_bottom',
+            animationMatchesGesture: true,
+          }}
+          customScreenTwoNavigationOptions={{
+            fullScreenGestureEnabled: true,
+            animation: 'fade_from_bottom',
+            animationMatchesGesture: true,
+          }}
+          customScreenThreeNavigationOptions={{
+            fullScreenGestureEnabled: true,
+            animation: 'fade_from_bottom',
+            animationMatchesGesture: true,
+          }}
+        />
+      </SplitViewScreen.Column>
+    </SplitViewHost>
+  );
+};

apps/src/tests/TestSplitView/SplitViewWithNativeStack/SplitViewWithNativeStackHeaderStyles.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
+import { NativeStackNavigatorComponent } from '../helpers';
+import { SplitViewBaseConfig } from '../helpers/types';
+import Colors from '../../../shared/styling/Colors';
+
+export const SplitViewWithNativeStackHeaderStyles = ({
+  splitViewBaseConfig,
+}: {
+  splitViewBaseConfig: SplitViewBaseConfig;
+}) => {
+  return (
+    <SplitViewHost {...splitViewBaseConfig}>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenOneNavigationOptions={{
+            headerBackButtonDisplayMode: 'generic',
+          }}
+          customScreenTwoNavigationOptions={{
+            headerBackButtonDisplayMode: 'minimal',
+            headerBackButtonMenuEnabled: true,
+          }}
+          customScreenThreeNavigationOptions={{
+            headerBackButtonDisplayMode: 'generic',
+            headerBackButtonMenuEnabled: false,
+          }}
+        />
+      </SplitViewScreen.Column>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenOneNavigationOptions={{
+            headerLargeTitle: true,
+          }}
+          customScreenTwoNavigationOptions={{
+            headerLargeTitle: true,
+            headerLargeTitleStyle: {
+              color: Colors.RedDark100,
+              fontSize: 30,
+              fontWeight: 'bold',
+            },
+          }}
+          customScreenThreeNavigationOptions={{
+            headerLargeTitle: true,
+            headerLargeStyle: {
+              backgroundColor: Colors.GreenDark100,
+            },
+          }}
+        />
+      </SplitViewScreen.Column>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenOneNavigationOptions={{
+            headerStyle: {
+              backgroundColor: Colors.BlueLight100,
+            },
+          }}
+          customScreenTwoNavigationOptions={{
+            headerStyle: {
+              backgroundColor: Colors.GreenDark100,
+            },
+          }}
+          customScreenThreeNavigationOptions={{
+            headerStyle: {
+              backgroundColor: Colors.YellowDark100,
+            },
+          }}
+        />
+      </SplitViewScreen.Column>
+    </SplitViewHost>
+  );
+};

apps/src/tests/TestSplitView/SplitViewWithNativeStack/SplitViewWithNativeStackSearchBar.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
+import { NativeStackNavigatorComponent } from '../helpers';
+import { SplitViewBaseConfig } from '../helpers/types';
+import { ScrollViewWithText } from './common';
+import Colors from '../../../shared/styling/Colors';
+
+export const SplitViewWithNativeStackSearchBar = ({
+  splitViewBaseConfig,
+}: {
+  splitViewBaseConfig: SplitViewBaseConfig;
+}) => {
+  return (
+    <SplitViewHost {...splitViewBaseConfig}>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenOneNavigationOptions={{
+            headerSearchBarOptions: {
+              autoCapitalize: "words",
+              autoFocus: true,
+              barTintColor: Colors.GreenLight100,
+              tintColor: Colors.RedDark100,
+            }
+          }}
+        />
+      </SplitViewScreen.Column>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenOneNavigationOptions={{
+            headerSearchBarOptions: {
+              hideNavigationBar: true
+            }
+          }}
+          customScreenTwoNavigationOptions={{
+            headerSearchBarOptions: {
+              hideNavigationBar: false
+            }
+          }}
+        />
+      </SplitViewScreen.Column>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenTwoNavigationOptions={{
+            headerSearchBarOptions: {
+              hideWhenScrolling: false
+            }
+          }}
+          CustomScreenTwo={ScrollViewWithText}
+        />
+      </SplitViewScreen.Column>
+    </SplitViewHost>
+  );
+};

apps/src/tests/TestSplitView/SplitViewWithNativeStack/SplitViewWithNativeStackSheet.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
+import { NativeStackNavigatorComponent } from '../helpers';
+import { SplitViewBaseConfig } from '../helpers/types';
+import { ScrollViewWithText } from './common';
+
+export const SplitViewWithNativeStackSheet = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
+  return (
+    <SplitViewHost {...splitViewBaseConfig}>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenTwoNavigationOptions={{
+            presentation: 'formSheet',
+            sheetAllowedDetents: [0.3, 0.8],
+          }}
+          customScreenThreeNavigationOptions={{
+            presentation: 'formSheet',
+            sheetAllowedDetents: 'fitToContents',
+          }}
+        />
+      </SplitViewScreen.Column>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenTwoNavigationOptions={{
+            presentation: 'formSheet',
+            sheetAllowedDetents: [0.3, 0.8],
+            sheetCornerRadius: 100,
+          }}
+          customScreenThreeNavigationOptions={{
+            presentation: 'formSheet',
+            sheetAllowedDetents: [0.3, 0.8],
+            sheetCornerRadius: 100,
+            sheetExpandsWhenScrolledToEdge: false
+          }}
+          CustomScreenThree={ScrollViewWithText}
+        />
+      </SplitViewScreen.Column>
+      <SplitViewScreen.Column>
+        <NativeStackNavigatorComponent
+          customScreenTwoNavigationOptions={{
+            presentation: 'formSheet',
+            sheetAllowedDetents: [0.3, 0.8],
+            sheetInitialDetentIndex: 1,
+            sheetLargestUndimmedDetentIndex: 1
+          }}
+          customScreenThreeNavigationOptions={{
+            presentation: 'formSheet',
+            sheetAllowedDetents: [0.3, 0.8],
+            sheetGrabberVisible: true,
+          }}
+        />
+      </SplitViewScreen.Column>
+    </SplitViewHost>
+  );
+};

apps/src/tests/TestSplitView/SplitViewWithNativeStack/common.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { ScrollView, Text } from 'react-native';
+
+export const ScrollViewWithText = () => (
+  <ScrollView>
+    <Text>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia, inventore!
+      Nemo, dolore placeat dolor a recusandae facere alias corporis suscipit
+      enim rem? Dolores, blanditiis facere aliquid dignissimos veritatis vitae
+      at id, porro eos ex non explicabo optio obcaecati! Autem accusamus
+      distinctio, aut quibusdam laudantium atque laboriosam corporis nihil! Quos
+      animi voluptate nam soluta fuga. Modi natus, aliquid iusto illum aut sint
+      minima consequuntur sed sapiente praesentium ipsum, exercitationem cum
+      eligendi voluptatibus quo vitae impedit? Aut, iure nobis repudiandae a
+      excepturi tenetur? Fugit sit rem quam, consequuntur veniam provident, ad
+      cumque rerum illum exercitationem recusandae laboriosam, unde consequatur
+      magni sint ut molestias ipsam accusantium similique quia officiis.
+      Dolorum, adipisci obcaecati nam veritatis culpa eius, iure dicta numquam
+      accusantium, doloribus deserunt architecto porro nihil at hic! Unde
+      adipisci officia culpa debitis ipsa, et quisquam, maxime incidunt
+      similique ipsam, ducimus aspernatur minus quos sed. Dolor debitis tenetur
+      officiis sit? Assumenda explicabo ipsum odit culpa quis suscipit dolore
+      aperiam! Sunt cupiditate doloremque esse provident, exercitationem
+      asperiores nisi ea vero nemo ex doloribus. Repudiandae quibusdam
+      voluptatibus rem, fuga dolorem, blanditiis aspernatur quam sint quos quia
+      repellendus, qui velit molestiae obcaecati amet cupiditate sapiente nulla
+      provident ducimus ipsa. Sit animi corporis amet, eum voluptas quisquam
+      atque. Eaque, hic laboriosam. Impedit at porro labore, optio
+      exercitationem explicabo soluta dolores recusandae? Pariatur quaerat atque
+      quos suscipit soluta. Laboriosam porro perspiciatis incidunt voluptas
+      voluptatibus modi delectus non ullam laudantium adipisci numquam ipsam,
+      eveniet reprehenderit consequatur enim voluptate voluptatum possimus
+      nesciunt ea itaque odio alias atque ipsum nisi. Dolorem consequuntur eum
+      mollitia autem impedit et officia porro hic? Veniam excepturi dolore enim
+      maxime officia, nam quae qui autem, provident perferendis quas quod
+      perspiciatis rerum reiciendis earum, eum modi? Aut consequuntur facilis
+      amet! Natus voluptates deleniti non quam laborum fuga soluta quasi eaque
+      autem assumenda sed, iusto id culpa dicta laudantium. Omnis in est
+      deserunt illo incidunt tempora vero voluptas corporis dolore et voluptatum
+      accusamus eum aut fuga saepe officia quidem dicta, quas quae. Neque,
+      aspernatur delectus nam iure expedita vel ad. Maxime nam magnam hic odio
+      nemo assumenda doloremque ab rerum. Voluptatibus, quo adipisci. Voluptate
+      et autem hic magni saepe aliquid. Soluta nihil, laboriosam omnis magnam
+      corrupti neque delectus eius dicta perspiciatis asperiores nemo cum,
+      consectetur numquam sed suscipit labore reprehenderit facere impedit ex
+      distinctio quam pariatur dolore deleniti ea! Optio placeat illo hic
+      dolorum inventore architecto, pariatur, id iusto expedita debitis deserunt
+      sunt praesentium molestias quas numquam ab? Repudiandae maxime harum id
+      hic dolorum, dolores voluptate necessitatibus cum rerum delectus numquam
+      consequuntur dicta explicabo nostrum cupiditate modi porro placeat atque
+      natus sapiente quam? Maxime repellat illum accusantium saepe. Praesentium,
+      quo aperiam quae corporis, quis reprehenderit neque consectetur vero
+      distinctio cumque maiores excepturi, sint est inventore. Id assumenda quia
+      molestias deleniti quod nobis vero eum eveniet reiciendis libero nihil
+      officia nam dicta quasi recusandae incidunt cupiditate, ipsum doloribus
+      unde! Tempora in reprehenderit beatae. A ullam aliquam facilis nesciunt,
+      expedita dolore, assumenda ipsam dolorem quas nostrum perferendis ratione
+      quae iure aut veritatis, soluta fugit nulla commodi quam ea blanditiis
+      sapiente et. Nisi, placeat provident temporibus sunt magni maiores?
+      Dolores fugit, voluptate recusandae magnam quo quam temporibus unde
+      reprehenderit repellendus vel ut nobis alias, corrupti aspernatur! Veniam
+      ea eligendi atque architecto aut praesentium, dolores, eius alias autem
+      quo eos provident vero sed. Suscipit, velit. Fugit commodi facilis,
+      impedit amet voluptatibus harum eaque accusamus ea corporis dignissimos
+      ratione cum in earum laudantium hic error iure? Quos suscipit deleniti
+      recusandae doloribus aut, id cumque obcaecati ipsa nam labore aliquam
+      officiis itaque dignissimos optio, iusto placeat animi blanditiis esse, ad
+      consequuntur mollitia iste eum minus! Beatae fugiat sint hic ut, esse
+      velit nesciunt adipisci et culpa eius unde voluptatem? Error quos quam
+      iste, eligendi consectetur inventore corrupti consequatur repellat!
+      Reiciendis excepturi a sed, totam soluta id eveniet quam sequi fugiat fuga
+      facere voluptatum magnam ea. Dicta, soluta sit deleniti harum dignissimos
+      eum voluptate sed quis excepturi blanditiis rem reiciendis praesentium
+      provident cupiditate quos ad distinctio non aspernatur incidunt sapiente
+      facere, expedita enim quo! Officiis id, eligendi doloribus voluptas
+      numquam commodi sint amet ratione qui laboriosam quae. Deserunt dolores
+      ipsum ipsam sint corporis, nemo neque quasi vero, labore harum culpa id
+      aliquam tenetur vitae temporibus at reiciendis ad consequatur impedit enim
+      laborum nam sequi. Fuga facere eligendi minima architecto? Cupiditate sit
+      quia, ab odit at tenetur dignissimos corrupti quaerat rerum blanditiis
+      impedit aspernatur nobis reiciendis voluptatibus sequi consectetur! Nulla
+      est ut quae et, soluta hic vero id. Dolorem repudiandae reiciendis
+      inventore assumenda, labore nemo dolor quidem ab quia aut enim et
+      cupiditate iste, commodi fugiat modi hic rem vitae excepturi iure ducimus
+      facere tempora consequatur? Suscipit sit, vitae error nesciunt maxime
+      magnam velit eveniet dolorum tenetur modi quasi unde quia itaque ab
+      nostrum ut earum tempore iusto placeat culpa fugiat voluptate mollitia.
+      Adipisci quam asperiores iure, quisquam repudiandae, harum, maxime soluta
+      non aliquam assumenda esse perspiciatis voluptates facilis. Magni quas
+      praesentium recusandae suscipit veniam, laudantium architecto, facilis ut
+      aperiam temporibus minus nulla maiores laboriosam natus similique porro!
+      Ipsa in consequatur, magni nostrum sint ea sed, quis distinctio
+      consequuntur laboriosam repellat sit cupiditate, dolores sequi incidunt
+      quasi expedita optio. Minima rerum, repellat, facere quod natus animi
+      nobis eum similique dolores distinctio a voluptatum maiores inventore
+      repudiandae ab consequuntur fugit, vitae excepturi? Animi recusandae
+      necessitatibus ipsa quae architecto voluptatum modi nostrum quam repellat!
+      At quos magnam, alias praesentium iusto quia facilis laborum libero, iure
+      excepturi adipisci aperiam, laudantium doloribus optio eius? Quia, qui
+      amet et ipsa adipisci id accusantium minus, quae odit voluptatum a, veniam
+      temporibus saepe veritatis nihil? Commodi odit at fugit dolorum deleniti
+      molestias modi, est facilis magni nostrum veniam sed voluptatem repellat
+      maiores? Quibusdam est ullam qui molestias suscipit tempora velit
+      laudantium officia odio placeat tenetur dignissimos molestiae voluptatem
+      vitae similique dolore eligendi, commodi omnis eos facilis. Error suscipit
+      aut quibusdam commodi saepe earum ullam sunt, illo ratione nam ad aperiam
+      quos eveniet quod fugiat vitae modi doloribus corrupti asperiores ducimus
+      dolores. Minima vitae laudantium aperiam aut repellendus temporibus
+      ducimus? Nesciunt, dolorem cupiditate facilis fugit reiciendis corporis!
+      Explicabo ut, illo dolor tenetur similique recusandae soluta?
+    </Text>
+  </ScrollView>
+);

apps/src/tests/TestSplitView/SplitViewWithNativeStack/index.tsx

@@ -1,15 +1,23 @@
 import { SplitViewWithNestedStack } from './SplitViewWithNestedStack'
 import { SplitViewWithNativeStackBase } from './SplitViewWithNativeStackBase'
 import { SplitViewWithNativeStackContainedModal } from './SplitViewWithNativeStackContainedModal'
+import { SplitViewWithNativeStackGestures } from './SplitViewWithNativeStackGestures'
 import { SplitViewWithNativeStackHeader } from './SplitViewWithNativeStackHeader'
+import { SplitViewWithNativeStackSearchBar } from './SplitViewWithNativeStackSearchBar'
+import { SplitViewWithNativeStackHeaderStyles } from './SplitViewWithNativeStackHeaderStyles'
 import { SplitViewWithNativeStackModal } from './SplitViewWithNativeStackModal'
 import { SplitViewWithNativeStackPresentation } from './SplitViewWithNativeStackPresentation'
+import { SplitViewWithNativeStackSheet } from './SplitViewWithNativeStackSheet'
 
 export {
     SplitViewWithNestedStack,
     SplitViewWithNativeStackBase,
     SplitViewWithNativeStackContainedModal,
+    SplitViewWithNativeStackGestures,
     SplitViewWithNativeStackHeader,
+    SplitViewWithNativeStackSearchBar,
+    SplitViewWithNativeStackHeaderStyles,
     SplitViewWithNativeStackModal,
     SplitViewWithNativeStackPresentation,
+    SplitViewWithNativeStackSheet
 }