Smarter set root (#3251)

* setRoot({root:{}})

* support setRoot with root, modals, overlays

* Update setRoot calls in playground app to new api

* Update setRoot on Android to new api

currently only supporting root node

* Update setRoot on iOS to new api

* fix unit tests

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java

@@ -55,7 +55,7 @@ public class NavigationModule extends ReactContextBaseJavaModule {
 
 	@ReactMethod
 	public void setRoot(String commandId, ReadableMap rawLayoutTree, Promise promise) {
-		final LayoutNode layoutTree = LayoutNodeParser.parse(new JSONObject(rawLayoutTree.toHashMap()));
+		final LayoutNode layoutTree = LayoutNodeParser.parse(new JSONObject(rawLayoutTree.getMap("root").toHashMap()));
 		handle(() -> {
             final ViewController viewController = newLayoutFactory().create(layoutTree);
             navigator().setRoot(viewController, new NativeCommandListener(commandId, promise, eventEmitter, now));

lib/ios/RNNCommandsHandler.m

@@ -48,7 +48,7 @@ static NSString* const setDefaultOptions	= @"setDefaultOptions";
 	[_modalManager dismissAllModals];
 	[_eventEmitter sendOnNavigationCommand:setRoot params:@{@"layout": layout}];
 	
-	UIViewController *vc = [_controllerFactory createLayoutAndSaveToStore:layout];
+	UIViewController *vc = [_controllerFactory createLayoutAndSaveToStore:layout[@"root"]];
 	
 	UIApplication.sharedApplication.delegate.window.rootViewController = vc;
 	[UIApplication.sharedApplication.delegate.window makeKeyAndVisible];

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -100,6 +100,8 @@
 		507F44201FFA8A8800D9425B /* RNNRootViewProtocol.h in Headers */ = {isa = PBXBuildFile; fileRef = 507F441F1FFA8A8800D9425B /* RNNRootViewProtocol.h */; };
 		50A00C37200F84D6000F01A6 /* RNNOverlayOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50A00C35200F84D6000F01A6 /* RNNOverlayOptions.h */; };
 		50A00C38200F84D6000F01A6 /* RNNOverlayOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50A00C36200F84D6000F01A6 /* RNNOverlayOptions.m */; };
+		50BE951220B5A787004F5DF5 /* RNNStatusBarOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50BE951020B5A787004F5DF5 /* RNNStatusBarOptions.m */; };
+		50BE951320B5A787004F5DF5 /* RNNStatusBarOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50BE951120B5A787004F5DF5 /* RNNStatusBarOptions.h */; };
 		50C4A496206BDDBB00DB292E /* RNNSubtitleOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50C4A494206BDDBB00DB292E /* RNNSubtitleOptions.h */; };
 		50C4A497206BDDBB00DB292E /* RNNSubtitleOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50C4A495206BDDBB00DB292E /* RNNSubtitleOptions.m */; };
 		50CB3B691FDE911400AA153B /* RNNSideMenuOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50CB3B671FDE911400AA153B /* RNNSideMenuOptions.h */; };
@@ -295,6 +297,8 @@
 		507F441F1FFA8A8800D9425B /* RNNRootViewProtocol.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNRootViewProtocol.h; sourceTree = "<group>"; };
 		50A00C35200F84D6000F01A6 /* RNNOverlayOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNOverlayOptions.h; sourceTree = "<group>"; };
 		50A00C36200F84D6000F01A6 /* RNNOverlayOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNOverlayOptions.m; sourceTree = "<group>"; };
+		50BE951020B5A787004F5DF5 /* RNNStatusBarOptions.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNStatusBarOptions.m; sourceTree = "<group>"; };
+		50BE951120B5A787004F5DF5 /* RNNStatusBarOptions.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNStatusBarOptions.h; sourceTree = "<group>"; };
 		50C4A494206BDDBB00DB292E /* RNNSubtitleOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSubtitleOptions.h; sourceTree = "<group>"; };
 		50C4A495206BDDBB00DB292E /* RNNSubtitleOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSubtitleOptions.m; sourceTree = "<group>"; };
 		50CB3B671FDE911400AA153B /* RNNSideMenuOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSideMenuOptions.h; sourceTree = "<group>"; };
@@ -509,6 +513,8 @@
 				50570B252061473D006A1B5C /* RNNTitleOptions.m */,
 				50C4A494206BDDBB00DB292E /* RNNSubtitleOptions.h */,
 				50C4A495206BDDBB00DB292E /* RNNSubtitleOptions.m */,
+				50BE951120B5A787004F5DF5 /* RNNStatusBarOptions.h */,
+				50BE951020B5A787004F5DF5 /* RNNStatusBarOptions.m */,
 				50EB4ED52068EBE000D6ED34 /* RNNBackgroundOptions.h */,
 				50EB4ED62068EBE000D6ED34 /* RNNBackgroundOptions.m */,
 				A7626BFF1FC578AB00492FB8 /* RNNBottomTabsOptions.h */,
@@ -783,6 +789,7 @@
 				268692821E5054F800E2C612 /* RNNStore.h in Headers */,
 				E8AEDB3C1F55A1C2000F5A6A /* RNNElementView.h in Headers */,
 				E8E518321F83B3E0000467AC /* RNNUtils.h in Headers */,
+				50BE951320B5A787004F5DF5 /* RNNStatusBarOptions.h in Headers */,
 				507F44201FFA8A8800D9425B /* RNNRootViewProtocol.h in Headers */,
 				50570BEA2063E09B006A1B5C /* RNNTitleViewHelper.h in Headers */,
 				263905CA1E4C6F440023D7D3 /* SidebarLuvocracyAnimation.h in Headers */,
@@ -933,6 +940,7 @@
 				E8DA24411F97459B00CD552B /* RNNElementFinder.m in Sources */,
 				50570B272061473D006A1B5C /* RNNTitleOptions.m in Sources */,
 				263905BF1E4C6F440023D7D3 /* RCCTheSideBarManagerViewController.m in Sources */,
+				50BE951220B5A787004F5DF5 /* RNNStatusBarOptions.m in Sources */,
 				7B1126A01E2D263F00F9B03B /* RNNEventEmitter.m in Sources */,
 				A7626BFD1FC2FB2C00492FB8 /* RNNTopBarOptions.m in Sources */,
 				263905CB1E4C6F440023D7D3 /* SidebarLuvocracyAnimation.m in Sources */,

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

@@ -70,7 +70,7 @@
 }
 
 - (void)testStatusBarHidden_true {
-	self.options.statusBarHidden = @(1);
+	self.options.statusBar.hidden = @(1);
 	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
 	
@@ -78,7 +78,7 @@
 }
 
 - (void)testStatusBarHideWithTopBar_false {
-	self.options.statusBarHideWithTopBar = @(0);
+	self.options.statusBar.hideWithTopBar = @(0);
 	self.options.topBar.visible = @(0);
 	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
@@ -87,7 +87,7 @@
 }
 
 - (void)testStatusBarHideWithTopBar_true {
-	self.options.statusBarHideWithTopBar = @(1);
+	self.options.statusBar.hideWithTopBar = @(1);
 	self.options.topBar.visible = @(0);
 	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
@@ -97,7 +97,7 @@
 
 
 - (void)testStatusBarHidden_false {
-	self.options.statusBarHidden = @(0);
+	self.options.statusBar.hidden = @(0);
 	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
 	
@@ -448,7 +448,7 @@
 
 -(void)testStatusBarBlurOn {
 	NSNumber* statusBarBlurInput = @(1);
-	self.options.statusBarBlur = statusBarBlurInput;
+	self.options.statusBar.blur = statusBarBlurInput;
 	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
 	XCTAssertNotNil([self.uut.view viewWithTag:BLUR_STATUS_TAG]);
@@ -456,7 +456,7 @@
 
 -(void)testStatusBarBlurOff {
 	NSNumber* statusBarBlurInput = @(0);
-	self.options.statusBarBlur = statusBarBlurInput;
+	self.options.statusBar.blur = statusBarBlurInput;
 	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
 	XCTAssertNil([self.uut.view viewWithTag:BLUR_STATUS_TAG]);

lib/src/adapters/NativeCommandsSender.ts

@@ -6,8 +6,8 @@ export class NativeCommandsSender {
     this.nativeCommandsModule = NativeModules.RNNBridgeModule;
   }
 
-  setRoot(commandId: string, layoutTree: object) {
-    return this.nativeCommandsModule.setRoot(commandId, layoutTree);
+  setRoot(commandId: string, layout: { root: any, modals: any[], overlays: any[] }) {
+    return this.nativeCommandsModule.setRoot(commandId, layout);
   }
 
   setDefaultOptions(options: object) {

lib/src/commands/Commands.test.ts

@@ -30,26 +30,32 @@ describe('Commands', () => {
   describe('setRoot', () => {
     it('sends setRoot to native after parsing into a correct layout tree', () => {
       uut.setRoot({
-        component: {
-          name: 'com.example.MyScreen'
+        root: {
+          component: {
+            name: 'com.example.MyScreen'
+          }
         }
       });
       expect(mockCommandsSender.setRoot).toHaveBeenCalledTimes(1);
       expect(mockCommandsSender.setRoot).toHaveBeenCalledWith('setRoot+UNIQUE_ID', {
-        type: 'Component',
-        id: 'Component+UNIQUE_ID',
-        children: [],
-        data: {
-          name: 'com.example.MyScreen',
-          options: {}
-        }
+        root: {
+          type: 'Component',
+          id: 'Component+UNIQUE_ID',
+          children: [],
+          data: {
+            name: 'com.example.MyScreen',
+            options: {}
+          }
+        },
+        modals: [],
+        overlays: []
       });
     });
 
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.setRoot({ component: { name: 'bla', inner: obj } });
-      expect(mockCommandsSender.setRoot.mock.calls[0][1].data.inner).not.toBe(obj);
+      uut.setRoot({ root: { component: { name: 'bla', inner: obj } } });
+      expect(mockCommandsSender.setRoot.mock.calls[0][1].root.data.inner).not.toBe(obj);
     });
 
     it('passProps into components', () => {
@@ -57,16 +63,75 @@ describe('Commands', () => {
         fn: () => 'Hello'
       };
       expect(store.getPropsForId('Component+UNIQUE_ID')).toEqual({});
-      uut.setRoot({ component: { name: 'asd', passProps } });
+      uut.setRoot({ root: { component: { name: 'asd', passProps } } });
       expect(store.getPropsForId('Component+UNIQUE_ID')).toEqual(passProps);
       expect(store.getPropsForId('Component+UNIQUE_ID').fn()).toEqual('Hello');
     });
 
     it('returns a promise with the resolved layout', async () => {
       mockCommandsSender.setRoot.mockReturnValue(Promise.resolve('the resolved layout'));
-      const result = await uut.setRoot({ component: { name: 'com.example.MyScreen' } });
+      const result = await uut.setRoot({ root: { component: { name: 'com.example.MyScreen' } } });
       expect(result).toEqual('the resolved layout');
     });
+
+    it('inputs modals and overlays', () => {
+      uut.setRoot({
+        root: {
+          component: {
+            name: 'com.example.MyScreen'
+          }
+        },
+        modals: [
+          {
+            component: {
+              name: 'com.example.MyModal'
+            }
+          }
+        ],
+        overlays: [
+          {
+            component: {
+              name: 'com.example.MyOverlay'
+            }
+          }
+        ]
+      });
+      expect(mockCommandsSender.setRoot).toHaveBeenCalledTimes(1);
+      expect(mockCommandsSender.setRoot).toHaveBeenCalledWith('setRoot+UNIQUE_ID', {
+        root:
+          {
+            type: 'Component',
+            id: 'Component+UNIQUE_ID',
+            children: [],
+            data: {
+              name: 'com.example.MyScreen',
+              options: {}
+            }
+          },
+        modals: [
+          {
+            type: 'Component',
+            id: 'Component+UNIQUE_ID',
+            children: [],
+            data: {
+              name: 'com.example.MyModal',
+              options: {}
+            }
+          }
+        ],
+        overlays: [
+          {
+            type: 'Component',
+            id: 'Component+UNIQUE_ID',
+            children: [],
+            data: {
+              name: 'com.example.MyOverlay',
+              options: {}
+            }
+          }
+        ]
+      });
+    });
   });
 
   describe('mergeOptions', () => {
@@ -352,7 +417,7 @@ describe('Commands', () => {
 
     it('notify on all commands', () => {
       _.forEach(getAllMethodsOfUut(), (m) => {
-        uut[m]();
+        uut[m]({});
       });
       expect(cb).toHaveBeenCalledTimes(getAllMethodsOfUut().length);
     });
@@ -374,12 +439,12 @@ describe('Commands', () => {
         dismissOverlay: ['id'],
       };
       const paramsForMethodName = {
-        setRoot: { commandId: 'setRoot+UNIQUE_ID', layout: 'parsed' },
+        setRoot: { commandId: 'setRoot+UNIQUE_ID', layout: { root: 'parsed', modals: [], overlays: [] } },
         setDefaultOptions: { options: {} },
         mergeOptions: { componentId: 'id', options: {} },
         showModal: { commandId: 'showModal+UNIQUE_ID', layout: 'parsed' },
         dismissModal: { commandId: 'dismissModal+UNIQUE_ID', componentId: 'id' },
-        dismissAllModals: {commandId: 'dismissAllModals+UNIQUE_ID'},
+        dismissAllModals: { commandId: 'dismissAllModals+UNIQUE_ID' },
         push: { commandId: 'push+UNIQUE_ID', componentId: 'id', layout: 'parsed' },
         pop: { commandId: 'pop+UNIQUE_ID', componentId: 'id', options: {} },
         popTo: { commandId: 'popTo+UNIQUE_ID', componentId: 'id' },

lib/src/commands/Commands.ts

@@ -14,12 +14,24 @@ export class Commands {
 
   public setRoot(simpleApi) {
     const input = _.cloneDeep(simpleApi);
-    const layout = this.layoutTreeParser.parse(input);
-    this.layoutTreeCrawler.crawl(layout);
+    const root = this.layoutTreeParser.parse(input.root);
+    this.layoutTreeCrawler.crawl(root);
+
+    const modals = _.map(input.modals, (modal) => {
+      const modalLayout = this.layoutTreeParser.parse(modal);
+      this.layoutTreeCrawler.crawl(modalLayout);
+      return modalLayout;
+    });
+
+    const overlays = _.map(input.overlays, (overlay) => {
+      const overlayLayout = this.layoutTreeParser.parse(overlay);
+      this.layoutTreeCrawler.crawl(overlayLayout);
+      return overlayLayout;
+    });
 
     const commandId = this.uniqueIdProvider.generate('setRoot');
-    const result = this.nativeCommandsSender.setRoot(commandId, layout);
-    this.commandsObserver.notify('setRoot', { commandId, layout });
+    const result = this.nativeCommandsSender.setRoot(commandId, { root, modals, overlays });
+    this.commandsObserver.notify('setRoot', { commandId, layout: { root, modals, overlays } });
     return result;
   }
 

playground/src/app.js

@@ -149,15 +149,17 @@ function start() {
     });
 
     Navigation.setRoot({
-      stack: {
-        id: 'TEST',
-        children: [
-          {
-            component: {
-              name: 'navigation.playground.WelcomeScreen'
+      root: {
+        stack: {
+          id: 'TEST',
+          children: [
+            {
+              component: {
+                name: 'navigation.playground.WelcomeScreen'
+              }
             }
-          }
-        ]
+          ]
+        }
       }
     });
   });

playground/src/screens/WelcomeScreen.js

@@ -46,71 +46,73 @@ class WelcomeScreen extends Component {
 
   onClickSwitchToTabs = () => {
     Navigation.setRoot({
-      bottomTabs: {
-        children: [
-          {
-            stack: {
-              id: 'TAB1_ID',
-              children: [
-                {
-                  component: {
-                    name: 'navigation.playground.TextScreen',
-                    passProps: {
-                      text: 'This is tab 1',
-                      myFunction: () => 'Hello from a function!'
-                    },
-                    options: {
-                      topBar: {
-                        visible: true,
-                        title: {
-                          text: 'React Native Navigation!'
+      root: {
+        bottomTabs: {
+          children: [
+            {
+              stack: {
+                id: 'TAB1_ID',
+                children: [
+                  {
+                    component: {
+                      name: 'navigation.playground.TextScreen',
+                      passProps: {
+                        text: 'This is tab 1',
+                        myFunction: () => 'Hello from a function!'
+                      },
+                      options: {
+                        topBar: {
+                          visible: true,
+                          title: {
+                            text: 'React Native Navigation!'
+                          }
                         }
                       }
                     }
                   }
-                }
-              ],
-              options: {
-                bottomTab: {
-                  title: 'Tab 1',
-                  icon: require('../images/one.png'),
-                  testID: testIDs.FIRST_TAB_BAR_BUTTON
-                },
-                topBar: {
-                  visible: false
+                ],
+                options: {
+                  bottomTab: {
+                    title: 'Tab 1',
+                    icon: require('../images/one.png'),
+                    testID: testIDs.FIRST_TAB_BAR_BUTTON
+                  },
+                  topBar: {
+                    visible: false
+                  }
                 }
               }
-            }
-          },
-          {
-            stack: {
-              children: [
-                {
-                  component: {
-                    name: 'navigation.playground.TextScreen',
-                    passProps: {
-                      text: 'This is tab 2'
+            },
+            {
+              stack: {
+                children: [
+                  {
+                    component: {
+                      name: 'navigation.playground.TextScreen',
+                      passProps: {
+                        text: 'This is tab 2'
+                      }
                     }
                   }
-                }
-              ],
-              options: {
-                bottomTab: {
-                  title: 'Tab 2',
-                  icon: require('../images/two.png'),
-                  testID: testIDs.SECOND_TAB_BAR_BUTTON
+                ],
+                options: {
+                  bottomTab: {
+                    title: 'Tab 2',
+                    icon: require('../images/two.png'),
+                    testID: testIDs.SECOND_TAB_BAR_BUTTON
+                  }
                 }
               }
             }
-          }
-        ],
-        options: {
-          bottomTabs: {
-            tabColor: 'red',
-            selectedTabColor: 'blue',
-            fontFamily: 'HelveticaNeue-Italic',
-            fontSize: 13,
-            testID: testIDs.BOTTOM_TABS_ELEMENT
+          ],
+          options: {
+            bottomTabs: {
+              tabColor: 'red',
+              selectedTabColor: 'blue',
+              fontFamily: 'HelveticaNeue-Italic',
+              fontSize: 13,
+              testID: testIDs.BOTTOM_TABS_ELEMENT
+            }
           }
         }
       }
@@ -119,97 +121,99 @@ class WelcomeScreen extends Component {
 
   onClickSwitchToSideMenus = () => {
     Navigation.setRoot({
-      sideMenu: {
-        left: {
-          component: {
-            name: 'navigation.playground.SideMenuScreen',
-            passProps: {
-              side: 'left'
+      root: {
+        sideMenu: {
+          left: {
+            component: {
+              name: 'navigation.playground.SideMenuScreen',
+              passProps: {
+                side: 'left'
+              }
             }
-          }
-        },
-        center: {
-          bottomTabs: {
-            children: [
-              {
-                stack: {
-                  children: [
-                    {
-                      component: {
-                        name: 'navigation.playground.TextScreen',
-                        passProps: {
-                          text: 'This is a side menu center screen tab 1'
+          },
+          center: {
+            bottomTabs: {
+              children: [
+                {
+                  stack: {
+                    children: [
+                      {
+                        component: {
+                          name: 'navigation.playground.TextScreen',
+                          passProps: {
+                            text: 'This is a side menu center screen tab 1'
+                          }
                         }
                       }
-                    }
-                  ],
-                  options: {
-                    bottomTab: {
-                      title: 'Tab 1',
-                      icon: require('../images/one.png'),
-                      testID: testIDs.FIRST_TAB_BAR_BUTTON
+                    ],
+                    options: {
+                      bottomTab: {
+                        title: 'Tab 1',
+                        icon: require('../images/one.png'),
+                        testID: testIDs.FIRST_TAB_BAR_BUTTON
+                      }
                     }
                   }
-                }
-              },
-              {
-                stack: {
-                  children: [
-                    {
-                      component: {
-                        name: 'navigation.playground.TextScreen',
-                        passProps: {
-                          text: 'This is a side menu center screen tab 2'
+                },
+                {
+                  stack: {
+                    children: [
+                      {
+                        component: {
+                          name: 'navigation.playground.TextScreen',
+                          passProps: {
+                            text: 'This is a side menu center screen tab 2'
+                          }
                         }
                       }
-                    }
-                  ],
-                  options: {
-                    bottomTab: {
-                      title: 'Tab 2',
-                      icon: require('../images/two.png'),
-                      testID: testIDs.SECOND_TAB_BAR_BUTTON
+                    ],
+                    options: {
+                      bottomTab: {
+                        title: 'Tab 2',
+                        icon: require('../images/two.png'),
+                        testID: testIDs.SECOND_TAB_BAR_BUTTON
+                      }
                     }
                   }
-                }
-              },
-              {
-                stack: {
-                  children: [
-                    {
-                      component: {
-                        name: 'navigation.playground.TextScreen',
-                        passProps: {
-                          text: 'This is a side menu center screen tab 3'
+                },
+                {
+                  stack: {
+                    children: [
+                      {
+                        component: {
+                          name: 'navigation.playground.TextScreen',
+                          passProps: {
+                            text: 'This is a side menu center screen tab 3'
+                          }
                         }
                       }
-                    }
-                  ],
-                  options: {
-                    bottomTab: {
-                      title: 'Tab 3',
-                      icon: require('../images/three.png'),
-                      testID: testIDs.SECOND_TAB_BAR_BUTTON
+                    ],
+                    options: {
+                      bottomTab: {
+                        title: 'Tab 3',
+                        icon: require('../images/three.png'),
+                        testID: testIDs.SECOND_TAB_BAR_BUTTON
+                      }
                     }
                   }
                 }
-              }
-            ],
-            options: {
-              bottomTabs: {
-                tabColor: 'red',
-                selectedTabColor: 'blue',
-                fontFamily: 'HelveticaNeue-Italic',
-                fontSize: 13
+              ],
+              options: {
+                bottomTabs: {
+                  tabColor: 'red',
+                  selectedTabColor: 'blue',
+                  fontFamily: 'HelveticaNeue-Italic',
+                  fontSize: 13
+                }
               }
             }
-          }
-        },
-        right: {
-          component: {
-            name: 'navigation.playground.SideMenuScreen',
-            passProps: {
-              side: 'right'
+          },
+          right: {
+            component: {
+              name: 'navigation.playground.SideMenuScreen',
+              passProps: {
+                side: 'right'
+              }
             }
           }
         }