JS:showModal

playground/e2e/app.test.js

@@ -38,6 +38,11 @@ describe('app', () => {
     elementByLabel('Pop').tap();
     expect(elementByLabel('React Native Navigation!')).toBeVisible();
   });
+
+  it('show modal', () => {
+    elementByLabel('Show Modal').tap();
+    expect(elementByLabel('Modal screen')).toBeVisible();
+  });
 });
 
 function elementByLabel(label) {

playground/src/containers/WelcomeScreen.js

@@ -17,6 +17,7 @@ class WelcomeScreen extends Component {
         <Button title="Switch to app with side menus" onPress={this.onClickSwitchToSideMenus} />
         <Button title="Switch to lifecycle screen" onPress={this.onClickLifecycleScreen} />
         <Button title="Push" onPress={this.onClickPush} />
+        <Button title="Show Modal" onPress={this.onClickShowModal} />
         <Text style={styles.footer}>{`this.props.id = ${this.props.id}`}</Text>
       </View>
     );
@@ -102,6 +103,15 @@ class WelcomeScreen extends Component {
       }
     });
   }
+
+  onClickShowModal() {
+    Navigation.showModal({
+      name: 'navigation.playground.SimpleScreen',
+      passProps: {
+        text: 'Modal screen'
+      }
+    });
+  }
 }
 
 export default WelcomeScreen;

src/Navigation.js

@@ -34,6 +34,10 @@ class Navigation {
     return this.appCommands.setRoot(params);
   }
 
+  showModal(params) {
+    return this.appCommands.showModal(params);
+  }
+
   events() {
     return this.publicEventsRegistry;
   }

src/Navigation.test.js

@@ -30,6 +30,15 @@ describe('Navigation', () => {
     expect(Navigation.appCommands.setRoot).toHaveBeenCalledWith(params);
   });
 
+  it('showModal delegates to AppCommands', async () => {
+    Navigation.appCommands.showModal.mockReturnValue(Promise.resolve('result'));
+    const params = {};
+    const result = await Navigation.showModal(params);
+    expect(result).toEqual('result');
+    expect(Navigation.appCommands.showModal).toHaveBeenCalledTimes(1);
+    expect(Navigation.appCommands.showModal).toHaveBeenCalledWith(params);
+  });
+
   it('events return public events', () => {
     const cb = jest.fn();
     Navigation.events().onAppLaunched(cb);

src/adapters/NativeCommandsSender.js

@@ -19,5 +19,10 @@ export default class NativeCommandsSender {
     this.nativeCommandsModule.pop(containerId);
     return Promise.resolve(containerId);
   }
+
+  showModal(layout) {
+    this.nativeCommandsModule.showModal(layout);
+    return Promise.resolve(layout);
+  }
 }
 

src/adapters/NativeCommandsSender.test.js

@@ -8,7 +8,8 @@ describe('NativeCommandsSender', () => {
     mockNativeModule = {
       setRoot: jest.fn(),
       push: jest.fn(),
-      pop: jest.fn()
+      pop: jest.fn(),
+      showModal: jest.fn()
     };
     NativeModules.RNNBridgeModule = mockNativeModule;
     uut = new NativeCommandsSender();
@@ -36,4 +37,10 @@ describe('NativeCommandsSender', () => {
     expect(mockNativeModule.pop).toHaveBeenCalledTimes(1);
     expect(result).toBeDefined();
   });
+
+  it('showModal sends to native', async () => {
+    const result = await uut.showModal({});
+    expect(mockNativeModule.showModal).toHaveBeenCalledTimes(1);
+    expect(result).toBeDefined();
+  });
 });

src/commands/AppCommands.js

@@ -13,5 +13,12 @@ export default class AppCommands {
     this.layoutTreeCrawler.crawl(layout);
     return this.nativeCommandsSender.setRoot(layout);
   }
+
+  showModal(simpleApi) {
+    const input = _.cloneDeep(simpleApi);
+    const layout = this.layoutTreeParser.createContainer(input);
+    this.layoutTreeCrawler.crawl(layout);
+    return this.nativeCommandsSender.showModal(layout);
+  }
 }
 

src/commands/AppCommands.test.js

@@ -62,4 +62,43 @@ describe('AppCommands', () => {
       expect(result).toEqual('the resolved layout');
     });
   });
+
+
+  describe('showModal', () => {
+    it('sends command to native after parsing into a correct layout tree', () => {
+      uut.showModal({
+        name: 'com.example.MyScreen'
+      });
+      expect(mockCommandsSender.showModal).toHaveBeenCalledTimes(1);
+      expect(mockCommandsSender.showModal).toHaveBeenCalledWith({
+        type: 'Container',
+        id: 'Container+UNIQUE_ID',
+        children: [],
+        data: {
+          name: 'com.example.MyScreen'
+        }
+      });
+    });
+
+    it('deep clones input to avoid mutation errors', () => {
+      const obj = {};
+      uut.showModal({ inner: obj });
+      expect(mockCommandsSender.showModal.mock.calls[0][0].data.inner).not.toBe(obj);
+    });
+
+    it('passProps into containers', () => {
+      expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({});
+      uut.showModal({
+        name: 'com.example.MyScreen',
+        passProps: SimpleLayouts.passProps
+      });
+      expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual(SimpleLayouts.passProps);
+    });
+
+    it('returns a promise with the resolved layout', async () => {
+      mockCommandsSender.showModal.mockReturnValue(Promise.resolve('the resolved layout'));
+      const result = await uut.showModal({ container: { name: 'com.example.MyScreen' } });
+      expect(result).toEqual('the resolved layout');
+    });
+  });
 });