Skip to content

Implement onRequestClose for iOS 13+ modals #27618

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
koke wants to merge 1 commit into from
Closed

Implement onRequestClose for iOS 13+ modals #27618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion Libraries/Modal/Modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,8 @@ export type Props = $ReadOnly<{|

/**
* The `onRequestClose` callback is called when the user taps the hardware
* back button on Android or the menu button on Apple TV.
* back button on Android, the menu button on Apple TV, or a modal is dismissed
* with a gesture on iOS 13+.
*
* This is required on Apple TV and Android.
*
Expand Down
3 changes: 2 additions & 1 deletion Libraries/Modal/RCTModalHostViewNativeComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@ type NativeProps = $ReadOnly<{|

/**
* The `onRequestClose` callback is called when the user taps the hardware
* back button on Android or the menu button on Apple TV.
* back button on Android, the menu button on Apple TV, or a modal is dismissed
* with a gesture on iOS 13+.
*
* This is required on Apple TV and Android.
*
Expand Down
1 change: 1 addition & 0 deletions React/Fabric/Mounting/ComponentViews/Modal/RCTModalHostViewComponentView.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ - (instancetype)initWithFrame:(CGRect)frame
_viewController = [RCTFabricModalHostViewController new];
_viewController.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
_viewController.delegate = self;
_viewController.presentationController.delegate = self;
Copy link
Copy Markdown
Contributor

@scarlac scarlac Feb 7, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See below/above. We may need to add similar code in this file as well.

}

return self;
Expand Down
3 changes: 2 additions & 1 deletion React/Views/RCTModalHostView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,9 @@
@property (nonatomic, copy) NSArray<NSString *> *supportedOrientations;
@property (nonatomic, copy) RCTDirectEventBlock onOrientationChange;

#if TARGET_OS_TV
@property (nonatomic, copy) RCTDirectEventBlock onRequestClose;

#if TARGET_OS_TV
@property (nonatomic, strong) RCTTVRemoteHandler *tvRemoteHandler;
#endif

Expand Down
16 changes: 15 additions & 1 deletion React/Views/RCTModalHostView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@
#import "RCTTVRemoteHandler.h"
#endif

@interface RCTModalHostView () <UIAdaptivePresentationControllerDelegate>

@end

@implementation RCTModalHostView
{
__weak RCTBridge *_bridge;
Expand All @@ -46,6 +50,7 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
UIView *containerView = [UIView new];
containerView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
_modalViewController.view = containerView;
_modalViewController.presentationController.delegate = self;
_touchHandler = [[RCTTouchHandler alloc] initWithBridge:bridge];
#if TARGET_OS_TV
_menuButtonGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(menuButtonPressed:)];
Expand All @@ -70,19 +75,21 @@ - (void)menuButtonPressed:(__unused UIGestureRecognizer *)gestureRecognizer
_onRequestClose(nil);
}
}
#endif

- (void)setOnRequestClose:(RCTDirectEventBlock)onRequestClose
{
_onRequestClose = onRequestClose;
#if TARGET_OS_TV
if (_reactSubview) {
if (_onRequestClose && _menuButtonGestureRecognizer) {
[_reactSubview addGestureRecognizer:_menuButtonGestureRecognizer];
} else {
[_reactSubview removeGestureRecognizer:_menuButtonGestureRecognizer];
}
}
#endif
}
#endif

- (void)notifyForBoundsChange:(CGRect)newBounds
{
Expand Down Expand Up @@ -257,4 +264,11 @@ - (UIInterfaceOrientationMask)supportedOrientationsMask
}
#endif

Copy link
Copy Markdown
Contributor

@scarlac scarlac Feb 7, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need to add this to support changing the presentation style after setting the delegate

// Method must be implemented, otherwise iOS defaults to 'automatic' (pageSheet on >= iOS 13.0)
- (UIModalPresentationStyle)adaptivePresentationStyleForPresentationController:(UIPresentationController *)controller traitCollection:(UITraitCollection *)traitCollection
{
  return self.presentationStyle;
}

- (void)presentationControllerDidDismiss:(UIPresentationController *)presentationController
{
if (_onRequestClose) {
_onRequestClose(nil);
}
}

@end
3 changes: 0 additions & 3 deletions React/Views/RCTModalHostViewManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,6 @@ - (void)invalidate
RCT_EXPORT_VIEW_PROPERTY(identifier, NSNumber)
RCT_EXPORT_VIEW_PROPERTY(supportedOrientations, NSArray)
RCT_EXPORT_VIEW_PROPERTY(onOrientationChange, RCTDirectEventBlock)

#if TARGET_OS_TV
RCT_EXPORT_VIEW_PROPERTY(onRequestClose, RCTDirectEventBlock)
#endif

@end