Added modalAttemptedToDismiss event with tests and docs (#5832)

* Added modalAttemptedToDismiss event with tests and docs

* Typo on pageSheet modal button label

* Update ModalScreen.js

* Fixed button testID

* Revert label to fix test cases

Co-authored-by: Guy Carmeli <[email protected]>
Co-authored-by: Yogev Ben David <[email protected]>

Author: 3 people

docs/docs/events.md

@@ -145,6 +145,22 @@ const modalDismissedListener = Navigation.events().registerModalDismissedListene
 modalDismissedListener.remove();
 ```
 
+## registerModalAttemptedToDismissListener(iOS 13+ only)
+Invoked only on iOS pageSheet modal when swipeToDismiss flag is set to true and modal swiped down to dismiss.
+
+```js
+// Subscribe
+const modalAttemptedToDismissListener = Navigation.events().registerModalAttemptedToDismissListener(({ componentId }) => {
+
+});
+...
+// Unsubscribe
+modalDismissedListener.remove();
+```
+|       Parameter         | Description |
+|:--------------------:|:-----|
+|**componentId** | Id of the modal tried to dismiss|
+
 ## registerScreenPoppedListener
 Invoked when screen is popped.
 

lib/ios/RNNCommandsHandler.m

@@ -354,6 +354,10 @@ - (void)dismissedModal:(UIViewController *)viewController {
 	[_eventEmitter sendModalsDismissedEvent:viewController.layoutInfo.componentId numberOfModalsDismissed:@(1)];
 }
 
+- (void)attemptedToDismissModal:(UIViewController *)viewController {
+    [_eventEmitter sendModalAttemptedToDismissEvent:viewController.layoutInfo.componentId];
+}
+
 - (void)dismissedMultipleModals:(NSArray *)viewControllers {
 	if (viewControllers && viewControllers.count) {
 		[_eventEmitter sendModalsDismissedEvent:((UIViewController *)viewControllers.lastObject).layoutInfo.componentId numberOfModalsDismissed:@(viewControllers.count)];

lib/ios/RNNEventEmitter.h

@@ -24,6 +24,8 @@
 
 - (void)sendModalsDismissedEvent:(NSString *)componentId numberOfModalsDismissed:(NSNumber *)modalsDismissed;
 
+- (void)sendModalAttemptedToDismissEvent:(NSString *)componentId;
+
 - (void)sendScreenPoppedEvent:(NSString *)componentId;
 
 

lib/ios/RNNEventEmitter.m

@@ -15,6 +15,7 @@ @implementation RNNEventEmitter {
 static NSString* const ComponentDidDisappear	= @"RNN.ComponentDidDisappear";
 static NSString* const NavigationButtonPressed	= @"RNN.NavigationButtonPressed";
 static NSString* const ModalDismissed	        = @"RNN.ModalDismissed";
+static NSString* const ModalAttemptedToDismiss  = @"RNN.ModalAttemptedToDismiss";
 static NSString* const SearchBarUpdated 		= @"RNN.SearchBarUpdated";
 static NSString* const SearchBarCancelPressed 	= @"RNN.SearchBarCancelPressed";
 static NSString* const PreviewCompleted         = @"RNN.PreviewCompleted";
@@ -31,7 +32,8 @@ @implementation RNNEventEmitter {
              SearchBarUpdated,
              SearchBarCancelPressed,
              PreviewCompleted,
-             ScreenPopped];
+             ScreenPopped,
+             ModalAttemptedToDismiss];
 }
 
 # pragma mark public
@@ -113,6 +115,12 @@ - (void)sendModalsDismissedEvent:(NSString *)componentId numberOfModalsDismissed
     }];
 }
 
+- (void)sendModalAttemptedToDismissEvent:(NSString *)componentId {
+    [self send:ModalAttemptedToDismiss body:@{
+        @"componentId": componentId,
+    }];
+}
+
 - (void)sendScreenPoppedEvent:(NSString *)componentId {
     [self send:ScreenPopped body:@{
         @"componentId": componentId

lib/ios/RNNModalManager.h

@@ -8,6 +8,7 @@ typedef void (^RNNTransitionRejectionBlock)(NSString *code, NSString *message, N
 @protocol RNNModalManagerDelegate <NSObject>
 
 - (void)dismissedModal:(UIViewController *)viewController;
+- (void)attemptedToDismissModal:(UIViewController *)viewController;
 - (void)dismissedMultipleModals:(NSArray *)viewControllers;
 
 @end

lib/ios/RNNModalManager.m

@@ -127,6 +127,10 @@ - (void)presentationControllerDidDismiss:(UIPresentationController *)presentatio
     [_delegate dismissedModal:presentationController.presentedViewController.presentedComponentViewController];
 }
 
+- (void)presentationControllerDidAttemptToDismiss:(UIPresentationController *)presentationController {
+    [_delegate attemptedToDismissModal:presentationController.presentedViewController.presentedComponentViewController];
+}
+
 -(UIViewController*)topPresentedVC {
 	UIViewController *root = UIApplication.sharedApplication.delegate.window.rootViewController;
 	while(root.presentedViewController) {

lib/src/adapters/NativeEventsReceiver.ts

@@ -7,7 +7,8 @@ import {
   SearchBarCancelPressedEvent,
   PreviewCompletedEvent,
   ModalDismissedEvent,
-  ScreenPoppedEvent
+  ScreenPoppedEvent,
+  ModalAttemptedToDismissEvent
 } from '../interfaces/ComponentEvents';
 import { CommandCompletedEvent, BottomTabSelectedEvent } from '../interfaces/Events';
 
@@ -49,6 +50,10 @@ export class NativeEventsReceiver {
     return this.emitter.addListener('RNN.ModalDismissed', callback);
   }
 
+  public registerModalAttemptedToDismissListener(callback: (event: ModalAttemptedToDismissEvent) => void): EmitterSubscription {
+    return this.emitter.addListener('RNN.ModalAttemptedToDismiss', callback);
+  }
+
   public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.SearchBarUpdated', callback);
   }

lib/src/events/ComponentEventsObserver.test.tsx

@@ -18,6 +18,7 @@ describe('ComponentEventsObserver', () => {
   const searchBarCancelPressedFn = jest.fn();
   const previewCompletedFn = jest.fn();
   const modalDismissedFn = jest.fn();
+  const modalAttemptedToDismissFn = jest.fn();
   const screenPoppedFn = jest.fn();
   let subscription: EventSubscription;
   let uut: ComponentEventsObserver;
@@ -57,6 +58,10 @@ describe('ComponentEventsObserver', () => {
       modalDismissedFn(event);
     }
 
+    modalAttemptedToDismiss(event: any) {
+      modalAttemptedToDismissFn(event);
+    }
+
     searchBarUpdated(event: any) {
       searchBarUpdatedFn(event);
     }
@@ -108,6 +113,10 @@ describe('ComponentEventsObserver', () => {
       modalDismissedFn(event);
     }
 
+    modalAttemptedToDismiss(event: any) {
+      modalAttemptedToDismissFn(event);
+    }
+
     searchBarUpdated(event: any) {
       searchBarUpdatedFn(event);
     }
@@ -153,14 +162,14 @@ describe('ComponentEventsObserver', () => {
   });
 
   it(`bindComponent should use optional componentId if component has a componentId in props`, () => {
-    const tree = renderer.create(<UnboundScreen  componentId={'doNotUseThisId'} />);
+    const tree = renderer.create(<UnboundScreen componentId={'doNotUseThisId'} />);
     uut.bindComponent(tree.getInstance() as any, 'myCompId')
 
     expect(tree.toJSON()).toBeDefined();
-    
+
     uut.notifyComponentDidAppear({ componentId: 'dontUseThisId', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didAppearFn).not.toHaveBeenCalled();
-    
+
 
     uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter', componentType: 'Component' });
     expect(didAppearFn).toHaveBeenCalledTimes(1);
@@ -188,6 +197,10 @@ describe('ComponentEventsObserver', () => {
     expect(modalDismissedFn).toHaveBeenCalledTimes(1);
     expect(modalDismissedFn).toHaveBeenLastCalledWith({ componentId: 'myCompId', modalsDismissed: 1 })
 
+    uut.notifyModalAttemptedToDismiss({ componentId: 'myCompId' });
+    expect(modalAttemptedToDismissFn).toHaveBeenCalledTimes(1);
+    expect(modalAttemptedToDismissFn).toHaveBeenLastCalledWith({ componentId: 'myCompId' })
+
     uut.notifySearchBarUpdated({ componentId: 'myCompId', text: 'theText', isFocused: true });
     expect(searchBarUpdatedFn).toHaveBeenCalledTimes(1);
     expect(searchBarUpdatedFn).toHaveBeenCalledWith({ componentId: 'myCompId', text: 'theText', isFocused: true });

lib/src/events/ComponentEventsObserver.ts

@@ -13,7 +13,8 @@ import {
   ComponentEvent,
   PreviewCompletedEvent,
   ModalDismissedEvent,
-  ScreenPoppedEvent
+  ScreenPoppedEvent,
+  ModalAttemptedToDismissEvent
 } from '../interfaces/ComponentEvents';
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
 import { Store } from '../components/Store';
@@ -32,6 +33,7 @@ export class ComponentEventsObserver {
     this.notifyComponentDidDisappear = this.notifyComponentDidDisappear.bind(this);
     this.notifyNavigationButtonPressed = this.notifyNavigationButtonPressed.bind(this);
     this.notifyModalDismissed = this.notifyModalDismissed.bind(this);
+    this.notifyModalAttemptedToDismiss = this.notifyModalAttemptedToDismiss.bind(this);
     this.notifySearchBarUpdated = this.notifySearchBarUpdated.bind(this);
     this.notifySearchBarCancelPressed = this.notifySearchBarCancelPressed.bind(this);
     this.notifyPreviewCompleted = this.notifyPreviewCompleted.bind(this);
@@ -45,6 +47,7 @@ export class ComponentEventsObserver {
     this.nativeEventsReceiver.registerComponentDidDisappearListener(this.notifyComponentDidDisappear);
     this.nativeEventsReceiver.registerNavigationButtonPressedListener(this.notifyNavigationButtonPressed);
     this.nativeEventsReceiver.registerModalDismissedListener(this.notifyModalDismissed);
+    this.nativeEventsReceiver.registerModalAttemptedToDismissListener(this.notifyModalAttemptedToDismiss);
     this.nativeEventsReceiver.registerSearchBarUpdatedListener(this.notifySearchBarUpdated);
     this.nativeEventsReceiver.registerSearchBarCancelPressedListener(this.notifySearchBarCancelPressed);
     this.nativeEventsReceiver.registerPreviewCompletedListener(this.notifyPreviewCompleted);
@@ -87,6 +90,10 @@ export class ComponentEventsObserver {
     this.triggerOnAllListenersByComponentId(event, 'modalDismissed');
   }
 
+  notifyModalAttemptedToDismiss(event: ModalAttemptedToDismissEvent) {
+    this.triggerOnAllListenersByComponentId(event, 'modalAttemptedToDismiss');
+  }
+
   notifySearchBarUpdated(event: SearchBarUpdatedEvent) {
     this.triggerOnAllListenersByComponentId(event, 'searchBarUpdated');
   }

lib/src/events/EventsRegistry.test.tsx

@@ -68,6 +68,13 @@ describe('EventsRegistry', () => {
     expect(mockNativeEventsReceiver.registerModalDismissedListener).toHaveBeenCalledWith(cb);
   });
 
+  it('delegates modalAttemptedToDimiss to nativeEventsReceiver', () => {
+    const cb = jest.fn();
+    uut.registerModalAttemptedToDismissListener(cb);
+    expect(mockNativeEventsReceiver.registerModalAttemptedToDismissListener).toHaveBeenCalledTimes(1);
+    expect(mockNativeEventsReceiver.registerModalAttemptedToDismissListener).toHaveBeenCalledWith(cb);
+  });
+
   it('delegates searchBarUpdated to nativeEventsReceiver', () => {
     const cb = jest.fn();
     uut.registerSearchBarUpdatedListener(cb);

lib/src/events/EventsRegistry.ts

@@ -12,7 +12,8 @@ import {
   SearchBarCancelPressedEvent,
   PreviewCompletedEvent,
   ModalDismissedEvent,
-  ScreenPoppedEvent
+  ScreenPoppedEvent,
+  ModalAttemptedToDismissEvent
 } from '../interfaces/ComponentEvents';
 import { CommandCompletedEvent, BottomTabSelectedEvent } from '../interfaces/Events';
 
@@ -47,6 +48,10 @@ export class EventsRegistry {
     return this.nativeEventsReceiver.registerModalDismissedListener(callback);
   }
 
+  public registerModalAttemptedToDismissListener(callback: (event: ModalAttemptedToDismissEvent) => void): EmitterSubscription {
+    return this.nativeEventsReceiver.registerModalAttemptedToDismissListener(callback);
+  }
+
   public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EmitterSubscription {
     return this.nativeEventsReceiver.registerSearchBarUpdatedListener(callback);
   }

lib/src/interfaces/ComponentEvents.ts

@@ -24,6 +24,10 @@ export interface ModalDismissedEvent extends ComponentEvent {
   modalsDismissed: number;
 }
 
+export interface ModalAttemptedToDismissEvent extends ComponentEvent {
+  componentId: string;
+}
+
 export interface SearchBarUpdatedEvent extends ComponentEvent {
   text: string;
   isFocused: boolean;

playground/ios/NavigationTests/RNNCommandsHandlerTest.m

@@ -103,6 +103,7 @@ -(NSArray*) getPublicMethodNamesForObject:(NSObject*)obj{
 	[skipMethods addObject:@"readyToReceiveCommands"];
 	[skipMethods addObject:@".cxx_destruct"];
 	[skipMethods addObject:@"dismissedModal:"];
+	[skipMethods addObject:@"attemptedToDismissModal:"];
 	[skipMethods addObject:@"dismissedMultipleModals:"];
 
 	NSMutableArray* result = [NSMutableArray new];

playground/src/screens/ModalScreen.js

@@ -34,6 +34,18 @@ class ModalScreen extends React.Component {
     };
   }
 
+  state = {
+    dimissCounter: 0,
+  }
+
+  componentDidMount() {
+    Navigation.events().bindComponent(this);
+  }
+
+  modalAttemptedToDismiss() {
+    return this.setState(state => ({ dimissCounter: state.dimissCounter + 1 }))
+  }
+
   render() {
     return (
       <Root componentId={this.props.componentId} footer={`Modal Stack Position: ${this.getModalPosition()}`}>

playground/src/screens/NavigationScreen.js

@@ -2,18 +2,20 @@ const React = require('react');
 const Root = require('../components/Root');
 const Button = require('../components/Button')
 const Navigation = require('./../services/Navigation');
+const { Platform } = require('react-native');
 const {
   NAVIGATION_TAB,
   MODAL_BTN,
   OVERLAY_BTN,
   EXTERNAL_COMP_BTN,
   SHOW_STATIC_EVENTS_SCREEN,
   SHOW_ORIENTATION_SCREEN,
-  SET_ROOT_BTN
+  SET_ROOT_BTN,
+  PAGE_SHEET_MODAL_BTN
 } = require('../testIDs');
 const Screens = require('./Screens');
 
-class NavigationScreen  extends React.Component {
+class NavigationScreen extends React.Component {
   static options() {
     return {
       topBar: {
@@ -34,6 +36,7 @@ class NavigationScreen  extends React.Component {
       <Root componentId={this.props.componentId}>
         <Button label='Set Root' testID={SET_ROOT_BTN} onPress={this.setRoot} />
         <Button label='Modal' testID={MODAL_BTN} onPress={this.showModal} />
+        {Platform.OS === 'ios' && <Button label='PageSheet modal' testID={PAGE_SHEET_MODAL_BTN} onPress={this.showPageSheetModal} />}
         <Button label='Overlay' testID={OVERLAY_BTN} onPress={this.showOverlay} />
         <Button label='External Component' testID={EXTERNAL_COMP_BTN} onPress={this.externalComponent} />
         <Button label='Static Events' testID={SHOW_STATIC_EVENTS_SCREEN} onPress={this.pushStaticEventsScreen} />
@@ -50,13 +53,20 @@ class NavigationScreen  extends React.Component {
 
   setRoot = () => Navigation.showModal(Screens.SetRoot);
   showModal = () => Navigation.showModal(Screens.Modal);
+
+  showPageSheetModal = () => Navigation.showModal(Screens.Modal, {
+    modalPresentationStyle: 'pageSheet',
+    modal: {
+      swipeToDismiss: false,
+    }
+  });
   showOverlay = () => Navigation.showModal(Screens.Overlay);
   externalComponent = () => Navigation.showModal(Screens.ExternalComponent);
   pushStaticEventsScreen = () => Navigation.showModal(Screens.EventsScreen)
   orientation = () => Navigation.showModal(Screens.Orientation);
   pushContextScreen = () => Navigation.push(this, Screens.ContextScreen);
   sharedElement = () => Navigation.showModal(Screens.CocktailsListScreen)
-  preview = ({reactTag}) => {
+  preview = ({ reactTag }) => {
     Navigation.push(this.props.componentId, {
       component: {
         name: Screens.Pushed,

playground/src/testIDs.js

@@ -12,6 +12,7 @@ module.exports = {
   OVERLAY_BTN: 'OVERLAY_BTN',
   SIDE_MENU_BTN: 'SIDE_MENU_BTN',
   MODAL_BTN: 'SHOW_MODAL_BUTTON',
+  PAGE_SHEET_MODAL_BTN: 'SHOW_PAGE_SHEET_MODAL_BUTTON',
   DISMISS_MODAL_BTN: 'DISMISS_MODAL_BUTTON',
   MODAL_SCREEN_HEADER: 'MODAL_SCREEN_HEADER',
   ALERT_BUTTON: 'ALERT_BUTTON',
@@ -129,7 +130,7 @@ module.exports = {
   SET_INTERCEPT_TOUCH: `SET_INTERCEPT_TOUCH`,
   PUSH_BOTTOM_TABS_BUTTON: `PUSH_BOTTOM_TABS_BUTTON`,
   SET_STACK_ROOT_BUTTON: `SET_STACK_ROOT_BUTTON`,
-  SET_ROOT:'SET_ROOT',
+  SET_ROOT: 'SET_ROOT',
   RESET_BUTTONS: 'RESET_BUTTONS',
   SHOW_LIFECYCLE_BTN: 'SHOW_LIFECYCLE_BTN',
   CHANGE_BUTTON_PROPS: 'CHANGE_BUTTON_PROPS',