feat(iOS, ContainedModal): add ContainedModal and ContainedModalProvider related files on JS side by sgaczol · Pull Request #4171 · software-mansion/react-native-screens

sgaczol · 2026-06-16T09:14:24Z

Description

This PR adds ContainedModal and ContainedModalProvider related files on JS side.

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

Changes

added codegen files
added component and types - related files
update package.json

Before & after - visual documentation

N/A

Test plan

N/A

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

such approach is temporary - implementing a custom shadow node will be handled in a separate pr

- ContainedModal.tsx - ContainedModal.types.ts - ContainedModalProvider.tsx - ContainedModalProvider.types.ts - index.tsx

Copilot

Pull request overview

Adds the JS/Fabric surface for a new Gamma iOS modal primitive (ContainedModal) and its hosting context (ContainedModalProvider) so it can be consumed from React code and registered for RN Codegen.

Changes:

Added two Fabric codegen native component definitions for RNSContainedModal and RNSContainedModalProvider (iOS-only).
Added JS components, props types, and a barrel export for the new contained-modal module.
Registered the new component view names in the package.json codegen components map.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/fabric/gamma/modals/contained-modal/ContainedModalProviderNativeComponent.ts	Adds codegen binding for the provider native view (excluded on Android).
src/fabric/gamma/modals/contained-modal/ContainedModalNativeComponent.ts	Adds codegen binding for the modal native view (excluded on Android) with `isOpen`.
src/components/gamma/modals/contained-modal/index.ts	Exposes public exports for the new modal/provider module.
src/components/gamma/modals/contained-modal/ContainedModalProvider.types.ts	Defines provider props as `ViewProps`.
src/components/gamma/modals/contained-modal/ContainedModalProvider.tsx	JS wrapper around the provider native component.
src/components/gamma/modals/contained-modal/ContainedModal.types.ts	Defines modal props, including required `isOpen`.
src/components/gamma/modals/contained-modal/ContainedModal.tsx	JS wrapper around the modal native component + host styling.
package.json	Registers `RNSContainedModal*` component view class names for codegen.

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

+import React from 'react';
+import ContainedModalProviderNativeComponent from '../../../../fabric/gamma/modals/contained-modal/ContainedModalProviderNativeComponent';
+import { ContainedModalProviderProps } from './ContainedModalProvider.types';


+        "RNSContainedModal": {
+          "className": "RNSContainedModalComponentView"
+        },
+        "RNSContainedModalProvider": {
+          "className": "RNSContainedModalProviderComponentView"
        }


Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.

+export default codegenNativeComponent<NativeProps>(
+  'RNSContainedModalProvider',
+  {
+    excludedPlatforms: ['android'],
+  },
+);


sgaczol · 2026-06-17T11:25:12Z

+import React from 'react';
+import ContainedModalProviderHostNativeComponent from '../../../../fabric/gamma/modals/contained-modal/ContainedModalProviderHostNativeComponent';
+import type { ContainedModalProviderProps } from './ContainedModalProvider.types';


sgaczol · 2026-06-17T11:25:52Z

+        "RNSContainedModalHost": {
+          "className": "RNSContainedModalHostComponentView"
+        },


it will be handled in a separate PR

+        "RNSContainedModalHostProvider": {
+          "className": "RNSContainedModalProviderHostComponentView"
        }


t0maboro

left a few comments, but overall looks good

t0maboro · 2026-06-17T09:24:36Z

+    width: 0,
+    height: 0,


just leaving note: dimensions might not be needed to define here in the future, maybe we can handle the logic similarly as in FormSheet with hitTest override + dedicated touch handler: https://github.com/software-mansion/react-native-screens/blob/main/ios/gamma/modals/form-sheet/RNSFormSheetHostComponentView.mm#L343-L348 - sth to keep in mind in a further development

Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated no new comments.

t0maboro

last remark regarding the naming, rest is looking good

t0maboro · 2026-06-17T13:04:56Z

+   *
+   * @platform ios
+   */
+  providerKey: string;


I don't like using providerKey on both sides. From a semantic perspective, using providerKey here feels a bit ambiguous. What do you think about being more explicit about roles of components by using containerId (or containerKey) on the Provider level, and targetContainerId/Key on the Modal level?

Having it defined this way should make the relationship much clearer. The Modal "points to" a specific destination.

okay: 3628223

t0maboro · 2026-06-17T13:05:44Z

+
+export interface NativeProps extends ViewProps {
+  isOpen?: CT.WithDefault<boolean, false>;
+  providerKey?: CT.WithDefault<string, ''>;


same request as for public API types

done: 3628223

…inerId for the modal

t0maboro · 2026-06-17T13:25:33Z

Before merging, please ensure that this doesn't cause any runtime crashes, because native components haven't been defined yet.
If it might crash, this PR should be coordinated with PRs adding native implementation/stubs

kkafar

I haven't reviewed the code, only looked at the scope of this PR and I'm seconding @t0maboro here. Let's avoid landing this PR until we have at least mock, but complete implementation of the native component.

I don't require the native code to be added in this particular PR, but let's see it in stacked PR & then merge both PRs together in quick succession. Let's not introduce intermediate states onto the main. The idea behind a commit / PR is that is should be always self-contained.

sgaczol added 5 commits June 8, 2026 12:28

ContainedModal and ContainedModalProvider codegen setup

eaa00c7

remove interfaceOnly: true from ContainedModal codegen file

07914eb

such approach is temporary - implementing a custom shadow node will be handled in a separate pr

update codegen files

c10bebb

added files on js side:

2b83e6e

- ContainedModal.tsx - ContainedModal.types.ts - ContainedModalProvider.tsx - ContainedModalProvider.types.ts - index.tsx

import fix

f4469ac

sgaczol requested review from Copilot, kkafar, kligarski, kmichalikk and t0maboro June 16, 2026 09:14

Copilot started reviewing on behalf of sgaczol June 16, 2026 09:14 View session

Copilot AI reviewed Jun 16, 2026

View reviewed changes

sgaczol added 5 commits June 16, 2026 11:21

naming convention

e54aab0

add ContainedModal to experimental

12a3a27

import type

5beb11e

add interfaceOnly: true

77afa9a

rename codegen files

fc9e7e8

sgaczol requested a review from Copilot June 16, 2026 09:37

Copilot started reviewing on behalf of sgaczol June 16, 2026 09:38 View session

Copilot AI reviewed Jun 16, 2026

View reviewed changes

sgaczol added 2 commits June 16, 2026 13:21

codegen name fix

138f7da

package.json fix

6b70b12

kligarski reviewed Jun 16, 2026

View reviewed changes

Comment thread src/components/gamma/modals/contained-modal/ContainedModal.types.ts Outdated

t0maboro reviewed Jun 17, 2026

View reviewed changes

sgaczol added 3 commits June 17, 2026 12:46

update

9475b3d

provider name change

93288c6

stubs added

4c17253

sgaczol requested review from Copilot, kligarski and t0maboro June 17, 2026 12:47

Copilot started reviewing on behalf of sgaczol June 17, 2026 12:48 View session

Copilot AI reviewed Jun 17, 2026

View reviewed changes

t0maboro reviewed Jun 17, 2026

View reviewed changes

providerKey renamed into containerId for the provider and targetConta…

3628223

…inerId for the modal

t0maboro approved these changes Jun 17, 2026

View reviewed changes

kkafar reviewed Jun 18, 2026

View reviewed changes

comment update

3421d9c

sgaczol changed the title ~~feat(iOS): add ContainedModal and ContainedModalProvider related files on JS side~~ feat(iOS, ContainedModal): add ContainedModal and ContainedModalProvider related files on JS side Jun 18, 2026

sgaczol mentioned this pull request Jun 18, 2026

feat(iOS, ContainedModal): Add basic setup for ContainedModal native component #4190

Open

4 tasks

Uh oh!

Conversation

sgaczol commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

sgaczol Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

sgaczol Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

t0maboro left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

t0maboro Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

t0maboro left a comment

Choose a reason for hiding this comment

Uh oh!

t0maboro Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

sgaczol Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

t0maboro Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

sgaczol Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

kkafar left a comment • 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

sgaczol commented Jun 16, 2026 •

edited

Loading

t0maboro commented Jun 17, 2026 •

edited

Loading

kkafar left a comment •

edited

Loading