Skip to content

Commit c29ec46

Browse files
fix#29319 - ios dismiss modal (#31500)
Summary: This PR aims to resolve iOS can't dismiss Modal on swipe gesture. #29319 When modal presentationStyle is pageSheet, iOS allows to dismiss the modal using swipe gesture. This PR adds support for that feature ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [iOS] [Added] - Support for onRequestClose for iOS Modal component. Pull Request resolved: #31500 Test Plan: - If onRequestClose updates the visibility state, modal will be closed. ``` <Modal visible={visible} animationType="slide" presentationStyle="pageSheet" onRequestClose={dismiss}> </Modal> ``` https://user-images.githubusercontent.com/23293248/117590263-36cd7f00-b14c-11eb-940c-86e700c0b8e7.mov ## Notes - In this PR, only support for partial drag is added. i.e. user can't drag the modal up and down completely. I added full user dragging but reverted in this [commit](bb65b9a) to support controllable onRequestClose. If someone has any suggestion to have full draggable support + controllable onRequestClose, please let me know. <!-- the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. --> Reviewed By: p-sun Differential Revision: D30041625 Pulled By: sammy-SC fbshipit-source-id: 9675da760bd5c070c4f0e1d30271c8af5c50b998
1 parent eb93886 commit c29ec46

File tree

3 files changed

+18
-1
lines changed

3 files changed

+18
-1
lines changed

React/Views/RCTModalHostView.h

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
@protocol RCTModalHostViewInteractor;
1818

19-
@interface RCTModalHostView : UIView <RCTInvalidating>
19+
@interface RCTModalHostView : UIView <RCTInvalidating, UIAdaptivePresentationControllerDelegate>
2020

2121
@property (nonatomic, copy) NSString *animationType;
2222
@property (nonatomic, assign) UIModalPresentationStyle presentationStyle;

React/Views/RCTModalHostView.m

+16
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ @implementation RCTModalHostView {
2424
RCTTouchHandler *_touchHandler;
2525
UIView *_reactSubview;
2626
UIInterfaceOrientation _lastKnownOrientation;
27+
RCTDirectEventBlock _onRequestClose;
2728
}
2829

2930
RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame : (CGRect)frame)
@@ -57,6 +58,18 @@ - (void)notifyForBoundsChange:(CGRect)newBounds
5758
}
5859
}
5960

61+
- (void)setOnRequestClose:(RCTDirectEventBlock)onRequestClose
62+
{
63+
_onRequestClose = onRequestClose;
64+
}
65+
66+
- (void)presentationControllerDidAttemptToDismiss:(UIPresentationController *)controller
67+
{
68+
if (_onRequestClose != nil) {
69+
_onRequestClose(nil);
70+
}
71+
}
72+
6073
- (void)notifyForOrientationChange
6174
{
6275
if (!_onOrientationChange) {
@@ -169,6 +182,9 @@ - (void)ensurePresentedOnlyIfNeeded
169182
if (self.presentationStyle != UIModalPresentationNone) {
170183
_modalViewController.modalPresentationStyle = self.presentationStyle;
171184
}
185+
if (@available(iOS 13.0, *)) {
186+
_modalViewController.presentationController.delegate = self;
187+
}
172188
[_delegate presentModalHostView:self withViewController:_modalViewController animated:[self hasAnimationType]];
173189
_isPresented = YES;
174190
}

React/Views/RCTModalHostViewManager.m

+1
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ - (void)invalidate
121121
RCT_EXPORT_VIEW_PROPERTY(supportedOrientations, NSArray)
122122
RCT_EXPORT_VIEW_PROPERTY(onOrientationChange, RCTDirectEventBlock)
123123
RCT_EXPORT_VIEW_PROPERTY(visible, BOOL)
124+
RCT_EXPORT_VIEW_PROPERTY(onRequestClose, RCTDirectEventBlock)
124125

125126
// Fabric only
126127
RCT_EXPORT_VIEW_PROPERTY(onDismiss, RCTDirectEventBlock)

0 commit comments

Comments
 (0)