Road to implicit any part5 (#4500)

- `registerCommandListener` documentation was wrong so that is fixed
- use `uniqueIdProvider` much as possible so we are not duplicating logic
- add `appRegistryService` which makes `componentRegistry` cleaner and also makes testing easier
- type return type of `NativeEventsReceiver.ts` correctly
- add types to `LayoutTreeParser`
- `ComponentRegistry.test.tsx` refactor so it tests only things that is should and not implementation of React Native functions
- fix type `center` prop to be required on `LayoutSideMenu`
- add missing layout props `topTabs` and `externalComponent`
- lots of minor cleaning

docs/docs/events.md

@@ -27,14 +27,14 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {
       this.navigationEventListener.remove();
     }
   }
-  
+
   componentDidAppear() {
 
   }
@@ -66,7 +66,7 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {
@@ -101,7 +101,7 @@ The `commandListener` is called whenever a *Navigation command* (i.e push, pop,
 
 ```js
 // Subscribe
-const commandListener = Navigation.events().registerCommandListener(({ name, params }) => {
+const commandListener = Navigation.events().registerCommandListener((name, params) => {
 
 });
 ...
@@ -158,7 +158,7 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {
@@ -197,7 +197,7 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {
@@ -220,7 +220,7 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {
@@ -243,7 +243,7 @@ class MyComponent extends Component {
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
-  
+
   componentWillUnmount() {
     // Not mandatory
     if (this.navigationEventListener) {

lib/src/Navigation.ts

@@ -20,6 +20,7 @@ import { ComponentWrapper } from './components/ComponentWrapper';
 import { OptionsProcessor } from './commands/OptionsProcessor';
 import { ColorService } from './adapters/ColorService';
 import { AssetService } from './adapters/AssetResolver';
+import { AppRegistryService } from './adapters/AppRegistryService';
 
 export class NavigationRoot {
   public readonly Element: React.ComponentType<{ elementId: any; resizeMode?: any; }>;
@@ -45,12 +46,18 @@ export class NavigationRoot {
     this.nativeEventsReceiver = new NativeEventsReceiver();
     this.uniqueIdProvider = new UniqueIdProvider();
     this.componentEventsObserver = new ComponentEventsObserver(this.nativeEventsReceiver);
-    this.componentRegistry = new ComponentRegistry(this.store, this.componentEventsObserver);
+    const appRegistryService = new AppRegistryService();
+    this.componentRegistry = new ComponentRegistry(
+      this.store,
+      this.componentEventsObserver,
+      this.componentWrapper,
+      appRegistryService
+    );
     this.layoutTreeParser = new LayoutTreeParser();
     const optionsProcessor = new OptionsProcessor(this.store, this.uniqueIdProvider, new ColorService(), new AssetService());
     this.layoutTreeCrawler = new LayoutTreeCrawler(this.uniqueIdProvider, this.store, optionsProcessor);
     this.nativeCommandsSender = new NativeCommandsSender();
-    this.commandsObserver = new CommandsObserver();
+    this.commandsObserver = new CommandsObserver(this.uniqueIdProvider);
     this.commands = new Commands(
       this.nativeCommandsSender,
       this.layoutTreeParser,
@@ -69,7 +76,7 @@ export class NavigationRoot {
    * The component itself is a traditional React component extending React.Component.
    */
   public registerComponent(componentName: string | number, componentProvider: ComponentProvider, concreteComponentProvider?: ComponentProvider): ComponentProvider {
-    return this.componentRegistry.registerComponent(componentName, componentProvider, this.componentWrapper, concreteComponentProvider);
+    return this.componentRegistry.registerComponent(componentName, componentProvider, concreteComponentProvider);
   }
 
   /**
@@ -82,7 +89,7 @@ export class NavigationRoot {
     ReduxProvider: any,
     reduxStore: any
   ): ComponentProvider {
-    return this.componentRegistry.registerComponent(componentName, getComponentClassFunc, this.componentWrapper, undefined, ReduxProvider, reduxStore);
+    return this.componentRegistry.registerComponent(componentName, getComponentClassFunc, undefined, ReduxProvider, reduxStore);
   }
 
   /**

lib/src/adapters/AppRegistryService.ts

@@ -0,0 +1,7 @@
+import { ComponentProvider, AppRegistry } from 'react-native';
+
+export class AppRegistryService {
+  registerComponent(appKey: string, getComponentFunc: ComponentProvider) {
+    AppRegistry.registerComponent(appKey, getComponentFunc);
+  }
+}

lib/src/adapters/Element.tsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { requireNativeComponent } from 'react-native';
 
-let RNNElement: React.ComponentType<any>;
-
-export class Element extends React.Component<{ elementId: any; resizeMode?: any }> {
+export class Element extends React.Component<{ elementId: string; resizeMode?: string }> {
   static propTypes = {
     elementId: PropTypes.string.isRequired,
     resizeMode: PropTypes.string
@@ -19,8 +17,6 @@ export class Element extends React.Component<{ elementId: any; resizeMode?: any
   }
 }
 
-RNNElement = requireNativeComponent('RNNElement', Element, {
-  nativeOnly: {
-    nativeID: true
-  }
+const RNNElement = requireNativeComponent('RNNElement', Element, {
+  nativeOnly: { nativeID: true }
 });

lib/src/adapters/NativeEventsReceiver.ts

@@ -1,5 +1,4 @@
-import { NativeModules, NativeEventEmitter } from 'react-native';
-import { EventSubscription } from '../interfaces/EventSubscription';
+import { NativeModules, NativeEventEmitter, EventEmitter, EmitterSubscription } from 'react-native';
 import {
   ComponentDidAppearEvent,
   ComponentDidDisappearEvent,
@@ -12,7 +11,7 @@ import {
 import { CommandCompletedEvent, BottomTabSelectedEvent } from '../interfaces/Events';
 
 export class NativeEventsReceiver {
-  private emitter: { addListener(event: string, callback: any): EventSubscription };
+  private emitter: EventEmitter;
   constructor() {
     // NOTE: This try catch is workaround for integration tests
     // TODO: mock NativeEventEmitter in integration tests rather done adding try catch in source code
@@ -25,47 +24,47 @@ export class NativeEventsReceiver {
             remove: () => undefined
           };
         }
-      };
+      } as any as EventEmitter;
     }
   }
 
-  public registerAppLaunchedListener(callback: () => void): EventSubscription {
+  public registerAppLaunchedListener(callback: () => void): EmitterSubscription {
     return this.emitter.addListener('RNN.AppLaunched', callback);
   }
 
-  public registerComponentDidAppearListener(callback: (event: ComponentDidAppearEvent) => void): EventSubscription {
+  public registerComponentDidAppearListener(callback: (event: ComponentDidAppearEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.ComponentDidAppear', callback);
   }
 
-  public registerComponentDidDisappearListener(callback: (event: ComponentDidDisappearEvent) => void): EventSubscription {
+  public registerComponentDidDisappearListener(callback: (event: ComponentDidDisappearEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.ComponentDidDisappear', callback);
   }
 
-  public registerNavigationButtonPressedListener(callback: (event: NavigationButtonPressedEvent) => void): EventSubscription {
+  public registerNavigationButtonPressedListener(callback: (event: NavigationButtonPressedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.NavigationButtonPressed', callback);
   }
 
-  public registerModalDismissedListener(callback: (event: ModalDismissedEvent) => void): EventSubscription {
+  public registerModalDismissedListener(callback: (event: ModalDismissedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.ModalDismissed', callback);
   }
 
-  public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EventSubscription {
+  public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.SearchBarUpdated', callback);
   }
 
-  public registerSearchBarCancelPressedListener(callback: (event: SearchBarCancelPressedEvent) => void): EventSubscription {
+  public registerSearchBarCancelPressedListener(callback: (event: SearchBarCancelPressedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.SearchBarCancelPressed', callback);
   }
 
-  public registerPreviewCompletedListener(callback: (event: PreviewCompletedEvent) => void): EventSubscription {
+  public registerPreviewCompletedListener(callback: (event: PreviewCompletedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.PreviewCompleted', callback);
   }
 
-  public registerCommandCompletedListener(callback: (data: CommandCompletedEvent) => void): EventSubscription {
+  public registerCommandCompletedListener(callback: (data: CommandCompletedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.CommandCompleted', callback);
   }
 
-  public registerBottomTabSelectedListener(callback: (data: BottomTabSelectedEvent) => void): EventSubscription {
+  public registerBottomTabSelectedListener(callback: (data: BottomTabSelectedEvent) => void): EmitterSubscription {
     return this.emitter.addListener('RNN.BottomTabSelected', callback);
   }
 }

lib/src/adapters/UniqueIdProvider.ts

@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 
 export class UniqueIdProvider {
-  generate(prefix: string): string {
+  generate(prefix?: string): string {
     return _.uniqueId(prefix);
   }
 }

lib/src/commands/Commands.test.ts

@@ -19,7 +19,7 @@ describe('Commands', () => {
 
   beforeEach(() => {
     store = new Store();
-    commandsObserver = new CommandsObserver();
+    commandsObserver = new CommandsObserver(new UniqueIdProvider());
     mockedNativeCommandsSender = mock(NativeCommandsSender);
     nativeCommandsSender = instance(mockedNativeCommandsSender);
 

lib/src/commands/Commands.ts

@@ -57,14 +57,14 @@ export class Commands {
     this.commandsObserver.notify('mergeOptions', { componentId, options });
   }
 
-  public showModal(simpleApi: Layout) {
-    const input = _.cloneDeep(simpleApi);
-    const layout = this.layoutTreeParser.parse(input);
-    this.layoutTreeCrawler.crawl(layout);
+  public showModal(layout: Layout) {
+    const layoutCloned = _.cloneDeep(layout);
+    const layoutNode = this.layoutTreeParser.parse(layoutCloned);
+    this.layoutTreeCrawler.crawl(layoutNode);
 
     const commandId = this.uniqueIdProvider.generate('showModal');
-    const result = this.nativeCommandsSender.showModal(commandId, layout);
-    this.commandsObserver.notify('showModal', { commandId, layout });
+    const result = this.nativeCommandsSender.showModal(commandId, layoutNode);
+    this.commandsObserver.notify('showModal', { commandId, layout: layoutNode });
     return result;
   }
 

lib/src/commands/LayoutTreeParser.test.ts

@@ -1,6 +1,8 @@
 import * as  _ from 'lodash';
 import { LayoutTreeParser } from './LayoutTreeParser';
 import { LayoutType } from './LayoutType';
+import { Layout } from '../interfaces/Layout';
+import { OptionsSplitView } from '../interfaces/Options';
 
 describe('LayoutTreeParser', () => {
   let uut: LayoutTreeParser;
@@ -11,7 +13,7 @@ describe('LayoutTreeParser', () => {
 
   describe('parses into { type, data, children }', () => {
     it('unknown type', () => {
-      expect(() => uut.parse({ wut: {} })).toThrowError('unknown LayoutType "wut"');
+      expect(() => uut.parse({ wut: {} } as Layout)).toThrowError('unknown LayoutType "wut"');
     });
 
     it('single component', () => {
@@ -43,7 +45,6 @@ describe('LayoutTreeParser', () => {
         children: []
       });
       expect(result.data.passProps).toBe(LayoutExamples.passProps);
-      expect(result.data.passProps.fnProp()).toEqual('Hello from a function');
     });
 
     it('stack of components with top bar', () => {
@@ -97,10 +98,6 @@ describe('LayoutTreeParser', () => {
       expect(result.children[2].children[0].type).toEqual(LayoutType.Component);
     });
 
-    it('side menu center is require', () => {
-      expect(() => uut.parse({ sideMenu: {} })).toThrowError('sideMenu.center is required');
-    });
-
     it('top tabs', () => {
       const result = uut.parse(LayoutExamples.topTabs);
       expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
@@ -121,16 +118,12 @@ describe('LayoutTreeParser', () => {
       expect(result.children[1].type).toEqual('SideMenuCenter');
       expect(result.children[1].children[0].type).toEqual('BottomTabs');
       expect(result.children[1].children[0].children[2].type).toEqual('Stack');
-      expect(result.children[1].children[0].children[2].children[0].type).toEqual('TopTabs');
-      expect(result.children[1].children[0].children[2].children[0].children[2].type).toEqual('TopTabs');
-      expect(result.children[1].children[0].children[2].children[0].children[2].children[4].type).toEqual('Stack');
-      expect(result.children[1].children[0].children[2].children[0].children[2].data).toEqual({ options: { topBar: { title: { text: 'Hello1'} } } });
     });
 
     it('split view', () => {
       const result = uut.parse(LayoutExamples.splitView);
-      const master = uut.parse(LayoutExamples.splitView.splitView.master);
-      const detail = uut.parse(LayoutExamples.splitView.splitView.detail);
+      const master = uut.parse(LayoutExamples.splitView.splitView!.master!);
+      const detail = uut.parse(LayoutExamples.splitView.splitView!.detail!);
 
       expect(result.type).toEqual('SplitView');
       expect(result.children[0]).toEqual(master);
@@ -139,16 +132,16 @@ describe('LayoutTreeParser', () => {
   });
 
   it('options for all containing types', () => {
-    expect(uut.parse({ component: { options } }).data.options).toBe(options);
+    expect(uut.parse({ component: { name: 'lol', options } }).data.options).toBe(options);
     expect(uut.parse({ stack: { options } }).data.options).toBe(options);
     expect(uut.parse({ bottomTabs: { options } }).data.options).toBe(options);
     expect(uut.parse({ topTabs: { options } }).data.options).toBe(options);
-    expect(uut.parse({ sideMenu: { options, center: { component: {} } } }).data.options).toBe(options);
+    expect(uut.parse({ sideMenu: { options, center: { component: {name: 'lool'} } } }).data.options).toBe(options);
     expect(uut.parse(LayoutExamples.splitView).data.options).toBe(optionsSplitView);
   });
 
   it('pass user provided id as is', () => {
-    const component = { id: 'compId' };
+    const component = { id: 'compId', name: 'loool' };
     expect(uut.parse({ component }).id).toEqual('compId');
     expect(uut.parse({ stack: { id: 'stackId' } }).id).toEqual('stackId');
     expect(uut.parse({ stack: { children: [{ component }] } }).children[0].id).toEqual('compId');
@@ -157,9 +150,6 @@ describe('LayoutTreeParser', () => {
     expect(uut.parse({ topTabs: { id: 'myId' } }).id).toEqual('myId');
     expect(uut.parse({ topTabs: { children: [{ component }] } }).children[0].id).toEqual('compId');
     expect(uut.parse({ sideMenu: { id: 'myId', center: { component } } }).id).toEqual('myId');
-    expect(uut.parse({ sideMenu: { center: { id: 'myId', component } } }).children[0].id).toEqual('myId');
-    expect(uut.parse({ sideMenu: { center: { component }, left: { id: 'theId', component } } }).children[0].id).toEqual('theId');
-    expect(uut.parse({ sideMenu: { center: { component }, right: { id: 'theId', component } } }).children[1].id).toEqual('theId');
   });
 });
 
@@ -180,7 +170,7 @@ const options = {
   }
 };
 
-const optionsSplitView = {
+const optionsSplitView: OptionsSplitView = {
   displayMode: 'auto',
   primaryEdge: 'leading',
   minWidth: 150,
@@ -257,7 +247,7 @@ const topTabs = {
   }
 };
 
-const complexLayout = {
+const complexLayout: Layout = {
   sideMenu: {
     left: singleComponent,
     center: {
@@ -268,26 +258,10 @@ const complexLayout = {
           {
             stack: {
               children: [
-                {
-                  topTabs: {
-                    children: [
-                      stackWithTopBar,
-                      stackWithTopBar,
-                      {
-                        topTabs: {
-                          options,
-                          children: [
-                            singleComponent,
-                            singleComponent,
-                            singleComponent,
-                            singleComponent,
-                            stackWithTopBar
-                          ]
-                        }
-                      }
-                    ]
-                  }
-                }
+                singleComponent,
+                singleComponent,
+                singleComponent,
+                singleComponent,
               ]
             }
           }
@@ -297,7 +271,7 @@ const complexLayout = {
   }
 };
 
-const splitView = {
+const splitView: Layout = {
   splitView: {
     master: {
       stack: {

lib/src/commands/LayoutTreeParser.ts

@@ -1,71 +1,71 @@
 import * as _ from 'lodash';
 import { LayoutType } from './LayoutType';
 import { LayoutNode } from './LayoutTreeCrawler';
+import {
+  Layout,
+  TopTabs,
+  LayoutComponent,
+  LayoutStack,
+  LayoutBottomTabs,
+  LayoutSideMenu,
+  LayoutSplitView,
+  ExternalComponent
+} from '../interfaces/Layout';
 
 export class LayoutTreeParser {
   constructor() {
     this.parse = this.parse.bind(this);
   }
 
-  parse(api): LayoutNode {
+  public parse(api: Layout): LayoutNode {
     if (api.topTabs) {
-      return this._topTabs(api.topTabs);
+      return this.topTabs(api.topTabs);
     } else if (api.sideMenu) {
-      return this._sideMenu(api.sideMenu);
+      return this.sideMenu(api.sideMenu);
     } else if (api.bottomTabs) {
-      return this._bottomTabs(api.bottomTabs);
+      return this.bottomTabs(api.bottomTabs);
     } else if (api.stack) {
-      return this._stack(api.stack);
+      return this.stack(api.stack);
     } else if (api.component) {
-      return this._component(api.component);
+      return this.component(api.component);
     } else if (api.externalComponent) {
-      return this._externalComponent(api.externalComponent);
+      return this.externalComponent(api.externalComponent);
     } else if (api.splitView) {
-      return this._splitView(api.splitView);
+      return this.splitView(api.splitView);
     }
     throw new Error(`unknown LayoutType "${_.keys(api)}"`);
   }
 
-  _topTabs(api): LayoutNode {
+  private topTabs(api: TopTabs): LayoutNode {
     return {
       id: api.id,
       type: LayoutType.TopTabs,
       data: { options: api.options },
-      children: _.map(api.children, this.parse)
+      children: api.children ? api.children.map(this.parse) : []
     };
   }
 
-  _sideMenu(api): LayoutNode {
+  private sideMenu(api: LayoutSideMenu): LayoutNode {
     return {
       id: api.id,
       type: LayoutType.SideMenuRoot,
       data: { options: api.options },
-      children: this._sideMenuChildren(api)
+      children: this.sideMenuChildren(api)
     };
   }
 
-  _sideMenuChildren(api): LayoutNode[] {
-    if (!api.center) {
-      throw new Error(`sideMenu.center is required`);
-    }
+  private sideMenuChildren(api: LayoutSideMenu): LayoutNode[] {
     const children: LayoutNode[] = [];
     if (api.left) {
-      children.push({
-        id: api.left.id,
-        type: LayoutType.SideMenuLeft,
-        data: {},
-        children: [this.parse(api.left)]
-      });
+      children.push({ type: LayoutType.SideMenuLeft, data: {}, children: [this.parse(api.left)] });
     }
     children.push({
-      id: api.center.id,
       type: LayoutType.SideMenuCenter,
       data: {},
       children: [this.parse(api.center)]
     });
     if (api.right) {
       children.push({
-        id: api.right.id,
         type: LayoutType.SideMenuRight,
         data: {},
         children: [this.parse(api.right)]
@@ -74,54 +74,51 @@ export class LayoutTreeParser {
     return children;
   }
 
-  _bottomTabs(api): LayoutNode {
+  private bottomTabs(api: LayoutBottomTabs): LayoutNode {
     return {
       id: api.id,
       type: LayoutType.BottomTabs,
       data: { options: api.options },
-      children: _.map(api.children, this.parse)
+      children: api.children ? api.children.map(this.parse) : []
     };
   }
 
-  _stack(api): LayoutNode {
+  private stack(api: LayoutStack): LayoutNode {
     return {
       id: api.id,
       type: LayoutType.Stack,
-      data: { name: api.name, options: api.options },
-      children: _.map(api.children, this.parse)
+      data: { options: api.options },
+      children: api.children ? api.children.map(this.parse) : []
     };
   }
 
-  _component(api): LayoutNode {
+  private component(api: LayoutComponent): LayoutNode {
     return {
       id: api.id,
       type: LayoutType.Component,
-      data: { name: api.name, options: api.options, passProps: api.passProps },
+      data: { name: api.name.toString(), options: api.options, passProps: api.passProps },
       children: []
     };
   }
 
-  _externalComponent(api): LayoutNode {
+  private externalComponent(api: ExternalComponent): LayoutNode {
     return {
       id: api.id,
       type: LayoutType.ExternalComponent,
-      data: { name: api.name, options: api.options, passProps: api.passProps },
+      data: { name: api.name.toString(), options: api.options, passProps: api.passProps },
       children: []
     };
   }
 
-  _splitView(api): LayoutNode {
-    const master = this.parse(api.master);
-    const detail = this.parse(api.detail);
+  private splitView(api: LayoutSplitView): LayoutNode {
+    const master = api.master ? this.parse(api.master) : undefined;
+    const detail = api.detail ? this.parse(api.detail) : undefined;
 
     return {
       id: api.id,
       type: LayoutType.SplitView,
-      data: { name: api.name, options: api.options },
-      children: [
-        master,
-        detail,
-      ],
+      data: { options: api.options },
+      children: master && detail ? [master, detail] : []
     };
   }
 }

lib/src/components/ComponentRegistry.test.tsx

@@ -1,56 +1,45 @@
-import * as React from 'react';
-import { AppRegistry, Text } from 'react-native';
-import * as renderer from 'react-test-renderer';
 import { ComponentRegistry } from './ComponentRegistry';
 import { Store } from './Store';
+import { mock, instance, verify, anyFunction } from 'ts-mockito';
+import { ComponentWrapper } from './ComponentWrapper';
+import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
+import { AppRegistryService } from '../adapters/AppRegistryService';
 
-describe('ComponentRegistry', () => {
-  let uut;
-  let store;
-  let mockRegistry: any;
-  let mockWrapper: any;
-
+const DummyComponent = () => null;
 
-  class WrappedComponent extends React.Component {
-    render() {
-      return (
-        <Text>
-          {
-            'Hello, World!'
-          }
-        </Text>);
-    }
-  }
+describe('ComponentRegistry', () => {
+  let mockedStore: Store;
+  let mockedComponentEventsObserver: ComponentEventsObserver;
+  let mockedComponentWrapper: ComponentWrapper;
+  let mockedAppRegistryService: AppRegistryService;
+  let uut: ComponentRegistry;
 
   beforeEach(() => {
-    store = new Store();
-    mockRegistry = AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
-    mockWrapper = jest.mock('./ComponentWrapper');
-    mockWrapper.wrap = () => WrappedComponent;
-    uut = new ComponentRegistry(store, {} as any);
+    mockedStore = mock(Store);
+    mockedComponentEventsObserver = mock(ComponentEventsObserver);
+    mockedComponentWrapper = mock(ComponentWrapper);
+    mockedAppRegistryService = mock(AppRegistryService);
+
+    uut = new ComponentRegistry(
+      instance(mockedStore),
+      instance(mockedComponentEventsObserver),
+      instance(mockedComponentWrapper),
+      instance(mockedAppRegistryService)
+    );
   });
 
   it('registers component by componentName into AppRegistry', () => {
-    expect(mockRegistry).not.toHaveBeenCalled();
-    const result = uut.registerComponent('example.MyComponent.name', () => {}, mockWrapper);
-    expect(mockRegistry).toHaveBeenCalledTimes(1);
-    expect(mockRegistry.mock.calls[0][0]).toEqual('example.MyComponent.name');
-    expect(mockRegistry.mock.calls[0][1]()).toEqual(result());
+    uut.registerComponent('example.MyComponent.name', () => DummyComponent);
+    verify(
+      mockedAppRegistryService.registerComponent('example.MyComponent.name', anyFunction())
+    ).called();
   });
 
   it('saves the wrapper component generator to the store', () => {
-    expect(store.getComponentClassForName('example.MyComponent.name')).toBeUndefined();
-    uut.registerComponent('example.MyComponent.name', () => {}, mockWrapper);
-    const Class = store.getComponentClassForName('example.MyComponent.name');
-    expect(Class).not.toBeUndefined();
-    expect(Class()).toEqual(WrappedComponent);
-  });
-
-  it('resulting in a normal component', () => {
-    uut.registerComponent('example.MyComponent.name', () => {}, mockWrapper);
-    const Component = mockRegistry.mock.calls[0][1]();
-    const tree = renderer.create(<Component componentId='123' />);
-    expect(tree.toJSON()!.children).toEqual(['Hello, World!']);
+    uut.registerComponent('example.MyComponent.name', () => DummyComponent);
+    verify(
+      mockedStore.setComponentClassForName('example.MyComponent.name', anyFunction())
+    ).called();
   });
 
   it('should not invoke generator', () => {
@@ -58,12 +47,4 @@ describe('ComponentRegistry', () => {
     uut.registerComponent('example.MyComponent.name', generator);
     expect(generator).toHaveBeenCalledTimes(0);
   });
-
-  it('saves wrapped component to store', () => {
-    jest.spyOn(store, 'setComponentClassForName');
-    const generator = jest.fn(() => {});
-    const componentName = 'example.MyComponent.name';
-    uut.registerComponent(componentName, generator, mockWrapper);
-    expect(store.getComponentClassForName(componentName)()).toEqual(WrappedComponent);
-  });
 });

lib/src/components/ComponentRegistry.ts

@@ -1,22 +1,37 @@
-import { AppRegistry, ComponentProvider } from 'react-native';
+import { ComponentProvider } from 'react-native';
 import { Store } from './Store';
 import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
 import { ComponentWrapper } from './ComponentWrapper';
+import { AppRegistryService } from '../adapters/AppRegistryService';
 
 export class ComponentRegistry {
-  constructor(private readonly store: Store, private readonly componentEventsObserver: ComponentEventsObserver) { }
+  constructor(
+    private store: Store,
+    private componentEventsObserver: ComponentEventsObserver,
+    private componentWrapper: ComponentWrapper,
+    private appRegistryService: AppRegistryService
+  ) {}
 
-  registerComponent(componentName: string | number,
-                    componentProvider: ComponentProvider,
-                    componentWrapper: ComponentWrapper,
-                    concreteComponentProvider?: ComponentProvider,
-                    ReduxProvider?: any,
-                    reduxStore?: any): ComponentProvider {
+  registerComponent(
+    componentName: string | number,
+    componentProvider: ComponentProvider,
+    concreteComponentProvider?: ComponentProvider,
+    ReduxProvider?: any,
+    reduxStore?: any
+  ): ComponentProvider {
     const NavigationComponent = () => {
-      return componentWrapper.wrap(componentName.toString(), componentProvider, this.store, this.componentEventsObserver, concreteComponentProvider, ReduxProvider, reduxStore);
+      return this.componentWrapper.wrap(
+        componentName.toString(),
+        componentProvider,
+        this.store,
+        this.componentEventsObserver,
+        concreteComponentProvider,
+        ReduxProvider,
+        reduxStore
+      );
     };
     this.store.setComponentClassForName(componentName.toString(), NavigationComponent);
-    AppRegistry.registerComponent(componentName.toString(), NavigationComponent);
+    this.appRegistryService.registerComponent(componentName.toString(), NavigationComponent);
     return NavigationComponent;
   }
 }

lib/src/components/ComponentWrapper.test.tsx

@@ -145,7 +145,7 @@ describe('ComponentWrapper', () => {
   });
 
   it('renders HOC components correctly', () => {
-    const generator = () => (props) => (
+    const generator = () => (props: any) => (
       <View>
         <MyComponent {...props}/>
       </View>

lib/src/components/ComponentWrapper.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { ComponentProvider } from 'react-native';
 import * as  _ from 'lodash';
-import * as ReactLifecyclesCompat from 'react-lifecycles-compat';
+import { polyfill } from 'react-lifecycles-compat';
+import hoistNonReactStatics = require('hoist-non-react-statics');
+
 import { Store } from './Store';
 import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
 
@@ -56,8 +58,8 @@ export class ComponentWrapper {
       }
     }
 
-    ReactLifecyclesCompat.polyfill(WrappedComponent);
-    require('hoist-non-react-statics')(WrappedComponent, concreteComponentProvider());
+    polyfill(WrappedComponent);
+    hoistNonReactStatics(WrappedComponent, concreteComponentProvider());
     return ReduxProvider ? this.wrapWithRedux(WrappedComponent, ReduxProvider, reduxStore) : WrappedComponent;
   }
 
@@ -71,7 +73,7 @@ export class ComponentWrapper {
         );
       }
     }
-    require('hoist-non-react-statics')(ReduxWrapper, WrappedComponent);
+    hoistNonReactStatics(ReduxWrapper, WrappedComponent);
     return ReduxWrapper;
   }
 }

lib/src/events/CommandsObserver.test.ts

@@ -1,14 +1,15 @@
-import { CommandsObserver } from './CommandsObserver';
+import { CommandsObserver, CommandsListener } from './CommandsObserver';
+import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
 
 describe('CommandsObserver', () => {
   let uut: CommandsObserver;
-  let cb1;
-  let cb2;
+  let cb1: CommandsListener;
+  let cb2: CommandsListener;
 
   beforeEach(() => {
     cb1 = jest.fn();
     cb2 = jest.fn();
-    uut = new CommandsObserver();
+    uut = new CommandsObserver(new UniqueIdProvider());
   });
 
   it('register and notify listener', () => {
@@ -30,15 +31,17 @@ describe('CommandsObserver', () => {
   });
 
   it('remove listener', () => {
+    expect(cb1).toHaveBeenCalledTimes(0);
+    expect(cb2).toHaveBeenCalledTimes(0);
+
     uut.register(cb1);
-    const result = uut.register(cb2);
-    expect(result).toBeDefined();
+    const cb2Subscription = uut.register(cb2);
 
     uut.notify('commandName', {});
     expect(cb1).toHaveBeenCalledTimes(1);
     expect(cb2).toHaveBeenCalledTimes(1);
 
-    result.remove();
+    cb2Subscription.remove();
 
     uut.notify('commandName', {});
     expect(cb1).toHaveBeenCalledTimes(2);

lib/src/events/CommandsObserver.ts

@@ -1,20 +1,21 @@
-import * as _ from 'lodash';
 import { EventSubscription } from '../interfaces/EventSubscription';
+import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
 
-export type CommandsListener = (name: string, params: {}) => void;
+export type CommandsListener = (name: string, params: any) => void;
 
 export class CommandsObserver {
-  private readonly listeners = {};
+  private listeners: Record<string, CommandsListener> = {};
+  constructor(private uniqueIdProvider: UniqueIdProvider) {}
 
   public register(listener: CommandsListener): EventSubscription {
-    const id = _.uniqueId();
-    _.set(this.listeners, id, listener);
+    const id = this.uniqueIdProvider.generate();
+    this.listeners[id] = listener;
     return {
-      remove: () => _.unset(this.listeners, id)
+      remove: () => delete this.listeners[id]
     };
   }
 
-  public notify(commandName: string, params: {}): void {
-    _.forEach(this.listeners, (listener: CommandsListener) => listener(commandName, params));
+  public notify(commandName: string, params: any): void {
+    Object.values(this.listeners).forEach((listener) => listener(commandName, params));
   }
 }

lib/src/events/EventsRegistry.test.tsx

@@ -1,6 +1,7 @@
 import { EventsRegistry } from './EventsRegistry';
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
 import { CommandsObserver } from './CommandsObserver';
+import { UniqueIdProvider } from '../adapters/UniqueIdProvider.mock';
 
 describe('EventsRegistry', () => {
   let uut: EventsRegistry;
@@ -9,7 +10,7 @@ describe('EventsRegistry', () => {
   const mockScreenEventsRegistry = {} as any;
 
   beforeEach(() => {
-    commandsObserver = new CommandsObserver();
+    commandsObserver = new CommandsObserver(new UniqueIdProvider());
     uut = new EventsRegistry(mockNativeEventsReceiver, commandsObserver, mockScreenEventsRegistry);
   });
 

lib/src/events/EventsRegistry.ts

@@ -1,3 +1,5 @@
+import { EmitterSubscription } from 'react-native';
+
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
 import { CommandsObserver } from './CommandsObserver';
 import { EventSubscription } from '../interfaces/EventSubscription';
@@ -16,43 +18,43 @@ import { CommandCompletedEvent, BottomTabSelectedEvent } from '../interfaces/Eve
 export class EventsRegistry {
   constructor(private nativeEventsReceiver: NativeEventsReceiver, private commandsObserver: CommandsObserver, private componentEventsObserver: ComponentEventsObserver) { }
 
-  public registerAppLaunchedListener(callback: () => void): EventSubscription {
+  public registerAppLaunchedListener(callback: () => void): EmitterSubscription {
     return this.nativeEventsReceiver.registerAppLaunchedListener(callback);
   }
 
-  public registerComponentDidAppearListener(callback: (event: ComponentDidAppearEvent) => void): EventSubscription {
+  public registerComponentDidAppearListener(callback: (event: ComponentDidAppearEvent) => void): EmitterSubscription {
     return this.nativeEventsReceiver.registerComponentDidAppearListener(callback);
   }
 
-  public registerComponentDidDisappearListener(callback: (event: ComponentDidDisappearEvent) => void): EventSubscription {
+  public registerComponentDidDisappearListener(callback: (event: ComponentDidDisappearEvent) => void): EmitterSubscription {
     return this.nativeEventsReceiver.registerComponentDidDisappearListener(callback);
   }
 
-  public registerCommandCompletedListener(callback: (event: CommandCompletedEvent) => void): EventSubscription {
+  public registerCommandCompletedListener(callback: (event: CommandCompletedEvent) => void): EmitterSubscription {
     return this.nativeEventsReceiver.registerCommandCompletedListener(callback);
   }
 
-  public registerBottomTabSelectedListener(callback: (event: BottomTabSelectedEvent) => void): EventSubscription {
+  public registerBottomTabSelectedListener(callback: (event: BottomTabSelectedEvent) => void): EmitterSubscription {
     return this.nativeEventsReceiver.registerBottomTabSelectedListener(callback);
   }
 
-  public registerNavigationButtonPressedListener(callback: (event: NavigationButtonPressedEvent) => void): EventSubscription {
+  public registerNavigationButtonPressedListener(callback: (event: NavigationButtonPressedEvent) => void): EmitterSubscription {
     return this.nativeEventsReceiver.registerNavigationButtonPressedListener(callback);
   }
 
-  public registerModalDismissedListener(callback: (event: ModalDismissedEvent) => void): EventSubscription {
+  public registerModalDismissedListener(callback: (event: ModalDismissedEvent) => void): EmitterSubscription {
     return this.nativeEventsReceiver.registerModalDismissedListener(callback);
   }
 
-  public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EventSubscription {
+  public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EmitterSubscription {
     return this.nativeEventsReceiver.registerSearchBarUpdatedListener(callback);
   }
 
-  public registerSearchBarCancelPressedListener(callback: (event: SearchBarCancelPressedEvent) => void): EventSubscription {
+  public registerSearchBarCancelPressedListener(callback: (event: SearchBarCancelPressedEvent) => void): EmitterSubscription {
     return this.nativeEventsReceiver.registerSearchBarCancelPressedListener(callback);
   }
 
-  public registerPreviewCompletedListener(callback: (event: PreviewCompletedEvent) => void): EventSubscription {
+  public registerPreviewCompletedListener(callback: (event: PreviewCompletedEvent) => void): EmitterSubscription {
     return this.nativeEventsReceiver.registerPreviewCompletedListener(callback);
   }
 

lib/src/interfaces/Layout.ts

@@ -82,7 +82,7 @@ export interface LayoutSideMenu {
   /**
    * Set the center view
    */
-  center?: Layout;
+  center: Layout;
   /**
    * Set the right side bar
    */
@@ -113,15 +113,49 @@ export interface LayoutSplitView {
   options?: OptionsSplitView;
 }
 
+export interface TopTabs {
+  /**
+   * Set the layout's id so Navigation.mergeOptions can be used to update options
+   */
+  id?: string;
+  /**
+   * Set the children screens
+   */
+  children?: any[];
+  /**
+   * Configure top tabs
+   */
+  options?: Options;
+}
+
 export interface LayoutRoot {
   /**
    * Set the root
    */
-  root?: Layout;
+  root: Layout;
   modals?: any;
   overlays?: any;
 }
 
+export interface ExternalComponent {
+  /**
+   * Set the screen's id so Navigation.mergeOptions can be used to update options
+   */
+  id?: string;
+  /**
+   * Name of your component
+   */
+  name: string | number;
+  /**
+   * Configure component options
+   */
+  options?: Options;
+  /**
+   * Properties to pass down to the component
+   */
+  passProps?: object;
+}
+
 export interface Layout<P = {}> {
   /**
    * Set the component
@@ -143,4 +177,12 @@ export interface Layout<P = {}> {
    * Set the split view
    */
   splitView?: LayoutSplitView;
+  /**
+   * Set the top tabs
+   */
+  topTabs?: TopTabs;
+  /**
+   * Set the external component
+   */
+  externalComponent?: ExternalComponent;
 }

lib/src/types.ts

@@ -0,0 +1,5 @@
+declare module 'react-lifecycles-compat' {
+  import * as React from 'react';
+
+  export function polyfill(component: React.ComponentClass<any>): void;
+}

package.json

@@ -60,6 +60,7 @@
     "tslib": "1.9.3"
   },
   "devDependencies": {
+    "@types/hoist-non-react-statics": "^3.0.1",
     "@types/jest": "23.x.x",
     "@types/lodash": "4.x.x",
     "@types/react": "16.x.x",
@@ -68,13 +69,13 @@
     "detox": "9.0.6",
     "handlebars": "4.x.x",
     "jest": "23.x.x",
+    "metro-react-native-babel-preset": "0.50.0",
     "react": "16.6.1",
     "react-native": "0.57.7",
     "react-native-typescript-transformer": "^1.2.10",
     "react-native-view-overflow": "0.0.3",
     "react-redux": "5.x.x",
     "react-test-renderer": "16.6.3",
-    "metro-react-native-babel-preset": "0.50.0",
     "redux": "3.x.x",
     "remx": "2.x.x",
     "semver": "5.x.x",
@@ -154,4 +155,4 @@
       }
     }
   }
-}
+}