Skip to content

Commit ac7154c

Browse files
kligarskikkafar
andauthored
fix(iOS): use prefersPageSizing for modal on iOS 18.0+ (#2797)
## 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 because `UIModalPresentationAutomatic`, which is used by `react-native-screens` for modal on iOS, has been changed with the release of iOS 18. `UIModalPresentationAutomatic` is now mapped to `UIModalPresentationFormSheet` for iOS >=18 and `UIModalPresentationPageSheet` for 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-screens` v4 using [`prefersPageSizing`](https://developer.apple.com/documentation/uikit/uisheetpresentationcontroller/preferspagesizing?language=objc) property of the `UISheetPresentationController` which has been available since iOS 17.0+. Resolves #2549. ## Changes - use `prefersPageSizing` for modal on iOS 18.0+ ## Screenshots / GIFs ### Before ![Modal without `prefersPageSizing` on iOS 18](https://github.com/user-attachments/assets/724bd109-b0c0-47e4-b897-43cd53ef3dd9) ### After ![Modal with `prefersPageSizing` on iOS 18](https://github.com/user-attachments/assets/b0925934-25dc-4103-8422-8fb07a18fd18) ## Test code and steps to reproduce Open `Modals` example screen and use `Open modal` button. ## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes --------- Co-authored-by: Kacper Kafara <[email protected]>
1 parent da2c028 commit ac7154c

2 files changed

Lines changed: 16 additions & 1 deletion

File tree

guides/GUIDE_FOR_LIBRARY_AUTHORS.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,10 @@ Using `containedModal` and `containedTransparentModal` with other types of modal
247247

248248
For iOS:
249249

250-
- `modal` will use [`UIModalPresentationAutomatic`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationautomatic?language=objc) on iOS 13 and later, and will use [`UIModalPresentationFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationfullscreen?language=objc) on iOS 12 and earlier.
250+
- `modal` will use:
251+
* on iOS 18 and later [`UIModalPresentationAutomatic`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationautomatic?language=objc). However, since the iOS 18 changed the default behaviour from `UIModalPresentationPageSheet` to `UIModalPresentationFormSheet` (it looks vastly different on regular size classes devices, e.g. iPad), for the sake of backward compatibility, we keep the default behaviour from before iOS 18. *This might change in future major release of `react-native-screens`.
252+
* on iOS 13 and later [`UIModalPresentationAutomatic`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationautomatic?language=objc)
253+
* on iOS 12 and earlier will use [`UIModalPresentationFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationfullscreen?language=objc).
251254
- `fullScreenModal` will use [`UIModalPresentationFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationfullscreen?language=objc)
252255
- `formSheet` will use [`UIModalPresentationFormSheet`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationformsheet?language=objc)
253256
- `transparentModal` will use [`UIModalPresentationOverFullScreen`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/uimodalpresentationoverfullscreen?language=objc)

ios/RNSScreen.mm

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,18 @@ - (void)setStackPresentation:(RNSScreenStackPresentation)stackPresentation
246246
}
247247
#else
248248
_controller.modalPresentationStyle = UIModalPresentationFullScreen;
249+
#endif
250+
#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_17_0) && \
251+
__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_17_0 && !TARGET_OS_TV
252+
if (@available(iOS 18.0, *)) {
253+
UISheetPresentationController *sheetController = _controller.sheetPresentationController;
254+
if (sheetController != nil) {
255+
sheetController.prefersPageSizing = true;
256+
} else {
257+
RCTLogError(
258+
@"[RNScreens] sheetPresentationController is null when attempting to set prefersPageSizing for modal");
259+
}
260+
}
249261
#endif
250262
break;
251263
case RNSScreenStackPresentationFullScreenModal:

0 commit comments

Comments
 (0)