fix(iOS): use prefersPageSizing for modal on iOS 18.0+ #2797
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 tasks
kkafar
requested changes
Mar 24, 2025
Member
kkafar
left a comment
kkafar
left a comment
There was a problem hiding this comment.
Thanks for remembering that the documentation must also change.
I think we should rephrase the description.
Co-authored-by: Kacper Kafara <[email protected]>
1 task
kligarski
added a commit
to react-navigation/react-navigation
that referenced
this pull request
Nov 24, 2025
**Motivation** Since the release of iOS 18, screens with`presentation: 'modal'` changed size on devices with a bigger screen, such as an iPad - they became much smaller, which impacted applications of the library's users (see issue software-mansion/react-native-screens#2549). To address the issue, `react-native-screens` will introduce new presentation type for native stack (`pageSheet`) that will allow users to use previous modal behavior (see PR software-mansion/react-native-screens#2793). The behavior of `pageSheet` on Android will be the same as `modal`. Please note that in `react-native-screens`, behavior of regular `modal` has been aligned with previous behavior internally via [`prefersPageSizing` UIKit prop](software-mansion/react-native-screens#2797) in order not to introduce breaking changes. In the future major release of `react-native-screens` however this will be aligned to fully native behavior. This PR contains changes required to support `pageSheet` in `react-navigation`. **Test plan** Open Stack Presentation and Modals example screens in example apps from `react-native-screens` and open a `pageSheet`.
satya164
pushed a commit
to react-navigation/react-navigation
that referenced
this pull request
Nov 24, 2025
**Motivation** Since the release of iOS 18, screens with`presentation: 'modal'` changed size on devices with a bigger screen, such as an iPad - they became much smaller, which impacted applications of the library's users (see issue software-mansion/react-native-screens#2549). To address the issue, `react-native-screens` will introduce new presentation type for native stack (`pageSheet`) that will allow users to use previous modal behavior (see PR software-mansion/react-native-screens#2793). The behavior of `pageSheet` on Android will be the same as `modal`. Please note that in `react-native-screens`, behavior of regular `modal` has been aligned with previous behavior internally via [`prefersPageSizing` UIKit prop](software-mansion/react-native-screens#2797) in order not to introduce breaking changes. In the future major release of `react-native-screens` however this will be aligned to fully native behavior. This PR contains changes required to support `pageSheet` in `react-navigation`. **Test plan** Open Stack Presentation and Modals example screens in example apps from `react-native-screens` and open a `pageSheet`.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Brings back
stackPresentation: 'modal''s size on iOS 18.0+.Since the release of iOS 18, screens with
stackPresentation: 'modal'changed size on devices with a bigger screen, such as an iPad - they became much smaller, which impacted applications of the library's users (see issue #2549). This happens becauseUIModalPresentationAutomatic, which is used byreact-native-screensfor modal on iOS, has been changed with the release of iOS 18.UIModalPresentationAutomaticis now mapped toUIModalPresentationFormSheetfor iOS >=18 andUIModalPresentationPageSheetfor earlier versions (this was the default before).For more context please see PR #2793 but the TL;DR is that we consider this a breaking change for our users and therefore we decided to bring back the old behavior for
react-native-screensv4 usingprefersPageSizingproperty of theUISheetPresentationControllerwhich has been available since iOS 17.0+.Resolves #2549.
Changes
prefersPageSizingfor modal on iOS 18.0+Screenshots / GIFs
Before
After
Test code and steps to reproduce
Open
Modalsexample screen and useOpen modalbutton.Checklist