feat(iOS, FormSheet v5): Add basic setup for standalone FormSheet native component

apps/src/tests/component-integration-tests/form-sheet/index.ts

@@ -0,0 +1,12 @@
+import type { ScenarioGroup } from '@apps/tests/shared/helpers';
+import TestFormSheetWithNestedStackV5 from './test-form-sheet-stack-v5-nesting-stack-v5-in-form-sheet-ios';
+
+const scenarios = { TestFormSheetWithNestedStackV5 };
+
+const FormSheetScenarioGroup: ScenarioGroup<keyof typeof scenarios> = {
+  name: 'FormSheet Integration Tests',
+  details: 'Test interaction between FormSheet and different components',
+  scenarios,
+};
+
+export default FormSheetScenarioGroup;

apps/src/tests/component-integration-tests/form-sheet/test-form-sheet-stack-v5-nesting-stack-v5-in-form-sheet-ios/index.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import { FormSheet } from 'react-native-screens/experimental';
+import type { ScenarioDescription } from '@apps/tests/shared/helpers';
+import { createScenario } from '@apps/tests/shared/helpers';
+import { StackContainer } from '@apps/shared/gamma/containers/stack';
+import { CenteredLayoutView } from '@apps/shared/CenteredLayoutView';
+import { Colors } from '@apps/shared/styling';
+import { StackNavigationButtons } from '@apps/tests/shared/components/stack-v5/StackNavigationButtons';
+
+const scenarioDescription: ScenarioDescription = {
+  name: 'FormSheet with Nested Stack v5',
+  key: 'test-form-sheet-stack-v5-nesting-stack-v5-in-form-sheet-ios',
+  details: 'Test nesting Stack v5 inside a FormSheet',
+  platforms: ['ios'],
+};
+
+export function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>FormSheet with nested StackV5</Text>
+      <Button
+        title="Open FormSheet"
+        color={Colors.primary}
+        onPress={() => setIsOpen(true)}
+      />
+      <FormSheet
+        isOpen={isOpen}
+        onNativeDismiss={() => setIsOpen(false)}
+        detents={[0.6, 1.0]}>
+        <View style={styles.sheetContent}>
+          <StackSetup />
+        </View>
+      </FormSheet>
+    </View>
+  );
+}
+
+export function StackSetup() {
+  return (
+    <StackContainer
+      routeConfigs={[
+        {
+          name: 'Home',
+          Component: HomeScreen,
+          options: {},
+        },
+        {
+          name: 'A',
+          Component: AScreen,
+          options: {
+            headerConfig: { title: 'A' },
+          },
+        },
+      ]}
+    />
+  );
+}
+
+export function HomeScreen() {
+  return (
+    <CenteredLayoutView style={{ backgroundColor: Colors.BlueLight40 }}>
+      <Text style={styles.screenText}>Home Screen</Text>
+      <StackNavigationButtons isPopEnabled={false} routeNames={['A']} />
+    </CenteredLayoutView>
+  );
+}
+
+export function AScreen() {
+  return (
+    <CenteredLayoutView style={{ backgroundColor: Colors.YellowLight40 }}>
+      <Text style={styles.screenText}>Screen A</Text>
+      <StackNavigationButtons isPopEnabled={true} routeNames={['A']} />
+    </CenteredLayoutView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.offBackground,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 20,
+    color: Colors.text,
+  },
+  sheetContent: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  screenText: {
+    color: Colors.text,
+    fontSize: 20,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginBottom: 10,
+  },
+});
+
+export default createScenario(App, scenarioDescription);

apps/src/tests/component-integration-tests/form-sheet/test-form-sheet-stack-v5-nesting-stack-v5-in-form-sheet-ios/scenario.md

@@ -0,0 +1,109 @@
+# Test Scenario: FormSheet with Nested Stack v5
+
+## Details
+
+**Description:** Verify the layout and state persistence of a `StackContainer` nested within a `FormSheet`. This test ensures that the Stack layout correctly fills the `FormSheet` container, that content remains properly centered, that the layout smoothly adapts when the FormSheet height changes, and that the Stack's navigation state is preserved when the sheet is dismissed and reopened.
+
+**OS test creation version:** iOS: 18.6 and 26.4, iPadOS 26.4
+
+## E2E test
+
+Other: Planned, but will be implemented separately.
+
+## Prerequisites
+
+- iOS device or simulator: iPhone and iPad
+- On iPad: Ensure the device is in full-screen mode, regular width, regular height size class
+
+## Note
+
+- On iPad: The FormSheet is presented as a **centered floating panel** with a fixed width, not as a full-width bottom sheet as on iPhone.
+
+## Steps - iPhone
+
+### Baseline
+
+1. Launch the app and navigate to the **FormSheet with Nested Stack v5** screen.
+
+- [ ] Expected: Content with the button "Open FormSheet" is shown
+
+---
+
+### Initialization & Layout Verification
+
+2. Tap the "Open FormSheet" button.
+
+- [ ] Expected: The FormSheet opens at the initial lower detent (0.6). The "Home Screen" text is visible and centered within the sheet. The light blue background completely covers the FormSheet content area.
+
+
+3. Tap the "Push A" button to push Screen A.
+
+- [ ] Expected: The stack navigates to "Screen A". The "Screen A" text is centered. The light yellow background completely covers the FormSheet content area.
+
+---
+
+### Detent Adaptation
+
+4. Grab the top edge of the FormSheet and swipe up to expand it to the maximum detent (1.0).
+
+- [ ] Expected: The FormSheet expands to take up the maximum available height (respecting the top inset). The layout adapts dynamically - the light yellow background stretches to cover the new full height, and the "Screen A" text dynamically re-centers itself within the newly expanded view area.
+
+---
+
+### State Persistence
+
+5. Swipe down on the FormSheet to dismiss it, then tap the "Open FormSheet" button again.
+
+- [ ] Expected: The FormSheet re-opens at the initial lower detent (0.6). The stack's navigation state has been kept - the sheet immediately displays "Screen A" (with the yellow background and centered text) rather than resetting back to the Home Screen.
+
+---
+
+### Pop Action
+
+6. Tap the "Pop" button (or native header back button) to pop Screen A.
+
+- [ ] Expected: The stack correctly navigates back to the "Home Screen". The "Home Screen" text is visible and centered, and the light blue background completely covers the FormSheet content area.
+
+## Steps - iPad
+
+### Baseline
+
+1. Launch the app and navigate to the **FormSheet with Nested Stack v5** screen.
+
+- [ ] Expected: Content with the button "Open FormSheet" is shown.
+
+---
+
+### Initialization & Layout Verification
+
+2. Tap the "Open FormSheet" button.
+
+- [ ] Expected: The FormSheet opens as a centered floating panel at the initial lower detent (0.6). The panel has a fixed width and is horizontally centered on screen. The "Home Screen" text is visible and centered within the panel. The light blue background completely covers the FormSheet content area.
+
+3. Tap the "Push A" button to push Screen A.
+
+- [ ] Expected: The stack navigates to "Screen A". The "Screen A" text is centered within the floating panel. The light yellow background completely covers the FormSheet content area.
+
+---
+
+### Detent Adaptation
+
+4. Grab the top edge of the FormSheet and swipe up to expand it to the maximum detent (1.0).
+
+- [ ] Expected: The FormSheet panel expands vertically to take up the maximum available height (respecting the top inset), while the width remains fixed. The layout adapts dynamically - the light yellow background stretches to cover the new full height, and the "Screen A" text dynamically re-centers itself within the newly expanded panel.
+
+---
+
+### State Persistence
+
+5. Swipe down on the FormSheet to dismiss it, then tap the "Open FormSheet" button again.
+
+- [ ] Expected: The FormSheet re-opens as a centered floating panel at the initial lower detent (0.6). The stack's navigation state has been kept - the panel immediately displays "Screen A" (with the yellow background and centered text) rather than resetting back to the Home Screen.
+
+---
+
+### Pop Action
+
+6. Tap the "Pop" button (or native header back button) to pop Screen A.
+
+- [ ] Expected: The stack correctly navigates back to the "Home Screen". The "Home Screen" text is visible and centered within the panel, and the light blue background completely covers the FormSheet content area.

apps/src/tests/component-integration-tests/index.tsx

@@ -9,11 +9,13 @@ import { ScenarioButton } from '@apps/tests/shared/ScenarioButton';
 
 import OrientationScenarioGroup from './orientation';
 import ScrollViewScenarioGroup from './scroll-view';
+import FormSheetScenarioGroup from './form-sheet';
 import ScenarioSelectionScreen from '@apps/tests/shared/ScenarioScreen';
 
 export const COMPONENT_SCENARIOS = {
   Orientation: OrientationScenarioGroup,
   ScrollView: ScrollViewScenarioGroup,
+  FormSheet: FormSheetScenarioGroup,
 } as const;
 
 type ParamsList = { [k: keyof typeof COMPONENT_SCENARIOS]: undefined } & {

apps/src/tests/single-feature-tests/form-sheet/index.ts

@@ -0,0 +1,14 @@
+import type { ScenarioGroup } from '@apps/tests/shared/helpers';
+import TestFormSheetBase from './test-form-sheet-base-ios';
+
+const scenarios = {
+  TestFormSheetBase,
+};
+
+const FormSheetScenarioGroup: ScenarioGroup<keyof typeof scenarios> = {
+  name: 'FormSheet',
+  details: 'Single feature tests for FormSheets',
+  scenarios,
+};
+
+export default FormSheetScenarioGroup;

apps/src/tests/single-feature-tests/form-sheet/test-form-sheet-base-ios/index.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import { FormSheet } from 'react-native-screens/experimental';
+import type { ScenarioDescription } from '@apps/tests/shared/helpers';
+import { createScenario } from '@apps/tests/shared/helpers';
+import { Colors } from '@apps/shared/styling';
+
+const scenarioDescription: ScenarioDescription = {
+  name: 'Basic functionality',
+  key: 'test-form-sheet-base-ios',
+  details: 'Allows to test the basic functionality of FormSheet component.',
+  platforms: ['ios'],
+};
+
+export function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>FormSheet Test</Text>
+      <Button
+        title="Open FormSheet"
+        color={Colors.primary}
+        onPress={() => setIsOpen(true)}
+      />
+      <FormSheet
+        isOpen={isOpen}
+        onNativeDismiss={() => setIsOpen(false)}
+        detents={[0.6, 1.0]}>
+        <View style={styles.sheetContent}>
+          <Text style={styles.sheetTitle}>FormSheet content</Text>
+          <View style={styles.spacing} />
+          <Button
+            title="Dismiss from JS"
+            color={Colors.primary}
+            onPress={() => setIsOpen(false)}
+          />
+        </View>
+      </FormSheet>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.offBackground,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 20,
+    color: Colors.text,
+  },
+  sheetContent: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    padding: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sheetTitle: {
+    fontSize: 22,
+    fontWeight: '600',
+    marginBottom: 12,
+    color: Colors.text,
+  },
+  spacing: {
+    height: 32,
+  },
+});
+
+export default createScenario(App, scenarioDescription);