feat(iOS, FormSheet v5): Add support for fitToContents by t0maboro · Pull Request #4095 · software-mansion/react-native-screens

t0maboro · 2026-05-25T11:55:56Z

Description

This PR introduces support for the fitToContents detents setup in iOS FormSheet stanadlone component.

It automatically calculates its initial height based on its React children and animate whenever the size of the content changes dynamically.

Closes: https://github.com/software-mansion/react-native-screens-labs/issues/1266

Implementation Details

For a predictable codegen interface, I'm exposing in a public type 'fitToContents' literal, which under the hood is mapped to [-1.0] array which is handled natively as a special case.
I introduced a transparent from end-user's perspective native component responsible for listening to Yoga's layout calculations via updateLayoutMetrics.
For ScreenContentWrapper on the JS side, I conditionally applied bottom: 0 style. This ensures that standard system detents stretch the content to fill the available space, while the fitToContents mode correctly wraps its children.
Natively, the wrapper traverses up the superview chain to find the native ancestor RNSFormSheetContentView and dynamically resolves its delegate
RCTMountingTransactionObserving was implemented for ContentWrapper to proactively report the initial layout height as soon as the native view hierarchy is linked.

Before & after - visual documentation

iOS 18	iOS 26	iPadOS
ios18.mov	ios26.mov	ipad.mov

Test plan

Added dedicated SFT, went through some random examples to ensure no regression.

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

Copilot

Pull request overview

Adds a new iOS-only fitToContents detent mode to the Gamma FormSheet so the sheet can size itself to its React content and animate as the content height changes.

Changes:

Extends the JS API to accept detents="fitToContents" and maps it to a native sentinel detent value.
Introduces a new Fabric native component (RNSFormSheetContentWrapper) that reports Yoga-driven height changes to the FormSheet host.
Updates iOS detent resolution to support a “fit to contents” custom detent, and adds a dedicated single-feature-test scenario.

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/fabric/gamma/modals/form-sheet/FormSheetContentWrapperNativeComponent.ts	Adds a new codegen native component for the content wrapper view.
src/components/gamma/modals/form-sheet/FormSheetUtils.ts	Adds JS-side mapping from `'fitToContents'` to a native sentinel detent value.
src/components/gamma/modals/form-sheet/FormSheet.types.ts	Extends the public `detents` prop type/docs to include `'fitToContents'`.
src/components/gamma/modals/form-sheet/FormSheet.tsx	Wraps children in the native content wrapper and passes resolved detents to native.
package.json	Registers the new iOS Fabric component class in codegenConfig.
ios/stubs/RNSGammaStubs.mm	Adds a stub implementation for the new Gamma component view.
ios/stubs/RNSGammaStubs.h	Adds a stub declaration for the new Gamma component view.
ios/gamma/modals/form-sheet/RNSFormSheetProviders.h	Extends the behavior provider interface with `contentHeight`.
ios/gamma/modals/form-sheet/RNSFormSheetHostComponentView.mm	Implements the content-height delegate and triggers behavior updates.
ios/gamma/modals/form-sheet/RNSFormSheetDetentResolver.mm	Adds native handling for the fit-to-contents detent via a custom detent resolver.
ios/gamma/modals/form-sheet/RNSFormSheetDetentResolver.h	Adds the fit-to-contents sentinel constant and updates the resolver API.
ios/gamma/modals/form-sheet/RNSFormSheetContentWrapperDelegate.h	Introduces a delegate protocol for content-height updates.
ios/gamma/modals/form-sheet/RNSFormSheetContentWrapperComponentView.mm	New component view that reports initial + dynamic height changes.
ios/gamma/modals/form-sheet/RNSFormSheetContentWrapperComponentView.h	Declares the new component view.
ios/gamma/modals/form-sheet/RNSFormSheetContentView.h	Adds a `contentWrapperDelegate` property to route height updates.
ios/gamma/modals/form-sheet/RNSFormSheetConfigurationApplicator.mm	Switches to the updated detent resolver API.
apps/src/tests/single-feature-tests/form-sheet/test-form-sheet-fit-to-contents-ios/scenario.md	Adds a manual SFT scenario for `fitToContents`.
apps/src/tests/single-feature-tests/form-sheet/test-form-sheet-fit-to-contents-ios/scenario-description.ts	Registers scenario metadata for the new SFT.
apps/src/tests/single-feature-tests/form-sheet/test-form-sheet-fit-to-contents-ios/index.tsx	Adds a runnable UI scenario to expand/collapse content inside the sheet.
apps/src/tests/single-feature-tests/form-sheet/index.ts	Adds the new scenario to the form-sheet SFT group.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

t0maboro · 2026-05-26T08:52:12Z

+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNSFormSheetContentWrapperComponentView : RNSReactBaseView


Note for reviewers: I'm considering renaming it to RNSFormSheetReactContentWrapperComponentView, because I already have RNSFormSheetContentView, which overrides native UIView, and I want to have that one as a top-level view for potential native testing. As for now, these two names are too close for me, but in the same time, the name above I'm proposing for a native component is too long.

LKuchno

Looks good :)
I marked few places to apply small changes in scenario - mostly after changing e2e section naming convention.

LKuchno · 2026-05-27T11:09:34Z

+
+## E2E test
+
+Other: Planned, but will be implemented separately.


Following new naming (described in RFC), if we are planning to implement e2e test I would change this line to:

Suggested change

Other: Planned, but will be implemented separately.

TBD: Planned, but will be implemented separately.

LKuchno · 2026-05-27T12:21:50Z

+
+2. Tap the "Open FormSheet" button.
+
+- [ ] Expected: The FormSheet opens smoothly. Its height is matched to its internal content (it will have an extra empty space on the bottom which is originating from native inset application). There are no visual jumps during the initial presentation animation.


This part is applicable only for iPhone:(it will have an extra empty space on the bottom which is originating from native inset application) ? If yes, can you add note about this?

LKuchno · 2026-05-27T12:25:14Z

For iPad while collapsing content inside form sheet empty space on the bottom appear:

Screen.Recording.2026-05-27.at.14.24.17.mov

kligarski · 2026-05-28T12:47:14Z

 import type { FormSheetProps } from './FormSheet.types';

+// Predefined value for `fitToContents`. Keep in sync with native counterpart.
+export const NATIVE_FIT_TO_CONTENTS = -1.0;


Not sure if we need to export this?

Other consts start with FORM_SHEET prefix - maybe this one should as well?

kligarski · 2026-05-28T12:48:36Z

+   * @summary Defines the resting positions of the sheet.
+   *
+   * This can be either an array of fractional screen heights (ranging from `0.0` to `1.0`)
+   * or the `'fitToContents'` string literal.


According to current convention we use fitToContents directly without '. Same below.

kligarski · 2026-05-28T12:49:28Z

+   * This can be either an array of fractional screen heights (ranging from `0.0` to `1.0`)
+   * or the `'fitToContents'` string literal.
+   *
+   * - **Fractional heights:** The sheet will snap to these specific height proportions.


do we need the bold here?

kligarski · 2026-05-28T13:21:51Z

@@ -8,6 +9,9 @@
 static BOOL RNSAreDetentsValid(const std::vector<double> &detents)


is [-1.0, -1.0] valid?

kligarski · 2026-05-28T13:34:59Z

+- (id<RNSFormSheetContentWrapperDelegate>)resolveFormSheetContentWrapperDelegate
+{
+  UIView *view = self.superview;
+  while (view != nil) {
+    if ([view isKindOfClass:[RNSFormSheetContentView class]]) {
+      return ((RNSFormSheetContentView *)view).contentWrapperDelegate;
+    }
+    view = view.superview;
+  }
+  return nil;
+}


I'm not sure if I'm the biggest fan of searching for RNSFormSheetContentView and extracting contentWrapperDelegate from there. Should RNSFormSheetContentView be even aware of any content wrapping logic? In native impl world we have behaviorProvider which returns contentHeight -> it seems to me that this should be enough for native implementation. How behaviorProvider (react) calculates this height should be a separate concern that is not related to RNSFormSheetContentView.

Did you consider doing something like this:

- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index { [_controller.contentView insertReactSubview:childComponentView atIndex:index]; if ([childComponentView isKindOfClass:[RNSFormSheetContentWrapperComponentView]]) { ((RNSFormSheetContentWrapperComponentView*)childComponentView).delegate = self; } }

Obviously with weak ref and proper cleanup in unmountChildComponentView.

Then we should also be able to avoid awkward mountingTransactionDidMount.

t0maboro changed the base branch from main to @t0maboro/formsheet-presentation-state May 25, 2026 11:56

t0maboro requested review from LKuchno, Copilot, kkafar, kligarski, kmichalikk and sgaczol May 25, 2026 12:01

Copilot started reviewing on behalf of t0maboro May 25, 2026 12:02 View session

Copilot AI reviewed May 25, 2026

View reviewed changes

Comment thread ios/gamma/modals/form-sheet/RNSFormSheetDetentResolver.mm

Comment thread ios/gamma/modals/form-sheet/RNSFormSheetContentWrapperDelegate.h

Comment thread ios/gamma/modals/form-sheet/RNSFormSheetContentWrapperComponentView.h Outdated

t0maboro commented May 26, 2026

View reviewed changes

t0maboro force-pushed the @t0maboro/formsheet-presentation-state branch from d130afe to 53ecbf8 Compare May 27, 2026 07:09

Base automatically changed from @t0maboro/formsheet-presentation-state to main May 27, 2026 07:28

t0maboro added 15 commits May 27, 2026 09:31

Define fitToContents for public API

d8c670e

Prepare SFT

5d0a71d

Prepare ContentWrapper native component

1acf99e

Add support for fitToContents

74903ba

Fix JS styles for fitToContents

10551df

Update example

3669b98

Add scenario description

c2fe0c0

Fix frame only for the 1st transaction

e4a34e4

Remove confusing timeout

6110362

Fix

2c73bb9

Update type doc

8716e74

fix

009f820

add missing import

8d36db4

remove dead code

914dcb2

Render ContentWrapper only for fitToContents

6121c7d

t0maboro force-pushed the @t0maboro/fit-to-contents branch from e3558da to 6121c7d Compare May 27, 2026 07:35

LKuchno approved these changes May 27, 2026

View reviewed changes

kligarski reviewed May 28, 2026

View reviewed changes


		NS_ASSUME_NONNULL_BEGIN

		@interface RNSFormSheetContentWrapperComponentView : RNSReactBaseView


		## E2E test

		Other: Planned, but will be implemented separately.

	Other: Planned, but will be implemented separately.
	TBD: Planned, but will be implemented separately.


		2. Tap the "Open FormSheet" button.

		- [ ] Expected: The FormSheet opens smoothly. Its height is matched to its internal content (it will have an extra empty space on the bottom which is originating from native inset application). There are no visual jumps during the initial presentation animation.

		@@ -8,6 +9,9 @@
		static BOOL RNSAreDetentsValid(const std::vector<double> &detents)

Uh oh!

Conversation

t0maboro commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Before & after - visual documentation

Test plan

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

t0maboro May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LKuchno left a comment

Choose a reason for hiding this comment

Uh oh!

LKuchno May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

t0maboro commented May 25, 2026 •

edited

Loading

t0maboro May 26, 2026 •

edited

Loading

LKuchno May 27, 2026 •

edited

Loading