Road to noImplicitAny part 6 (FINAL part) (#4508)

## What this PR is about?
Finally all strict rules are enables for TypeScript compiler! 🎉 Basically previously `noImplicitAny` was turned off but now it plus all strict rules are turned ON! 💋 

## Some highlights of the changes
- `Element` renamed internally to `SharedElement` to make more sense what is it
- `LayoutTreeParser`'s responsibility is now to do all `id` related stuff. Previously it was spread between `LayoutTreeCrawler` and `LayoutTreeParse` so it is more simple now
- clean up a lot of tests because they were testing duplicate stuff that was covered by other tests already
- removed all usages of `static get options` and replaces them with `static options`. This is how it is in the docs plus you cannot have `static get options(passProps)` because it is impossible to have getter with parameters.

lib/src/Navigation.ts

@@ -9,7 +9,7 @@ import { LayoutTreeParser } from './commands/LayoutTreeParser';
 import { LayoutTreeCrawler } from './commands/LayoutTreeCrawler';
 import { EventsRegistry } from './events/EventsRegistry';
 import { ComponentProvider } from 'react-native';
-import { Element } from './adapters/Element';
+import { SharedElement } from './adapters/SharedElement';
 import { CommandsObserver } from './events/CommandsObserver';
 import { Constants } from './adapters/Constants';
 import { ComponentEventsObserver } from './events/ComponentEventsObserver';
@@ -23,9 +23,10 @@ import { AssetService } from './adapters/AssetResolver';
 import { AppRegistryService } from './adapters/AppRegistryService';
 
 export class NavigationRoot {
-  public readonly Element: React.ComponentType<{ elementId: any; resizeMode?: any; }>;
-  public readonly TouchablePreview: React.ComponentType<any>;
-  public readonly store: Store;
+  public readonly Element = SharedElement;
+  public readonly TouchablePreview = TouchablePreview;
+
+  private readonly store: Store;
   private readonly nativeEventsReceiver: NativeEventsReceiver;
   private readonly uniqueIdProvider: UniqueIdProvider;
   private readonly componentRegistry: ComponentRegistry;
@@ -39,8 +40,6 @@ export class NavigationRoot {
   private readonly componentWrapper: ComponentWrapper;
 
   constructor() {
-    this.Element = Element;
-    this.TouchablePreview = TouchablePreview;
     this.componentWrapper = new ComponentWrapper();
     this.store = new Store();
     this.nativeEventsReceiver = new NativeEventsReceiver();
@@ -53,9 +52,9 @@ export class NavigationRoot {
       this.componentWrapper,
       appRegistryService
     );
-    this.layoutTreeParser = new LayoutTreeParser();
+    this.layoutTreeParser = new LayoutTreeParser(this.uniqueIdProvider);
     const optionsProcessor = new OptionsProcessor(this.store, this.uniqueIdProvider, new ColorService(), new AssetService());
-    this.layoutTreeCrawler = new LayoutTreeCrawler(this.uniqueIdProvider, this.store, optionsProcessor);
+    this.layoutTreeCrawler = new LayoutTreeCrawler(this.store, optionsProcessor);
     this.nativeCommandsSender = new NativeCommandsSender();
     this.commandsObserver = new CommandsObserver(this.uniqueIdProvider);
     this.commands = new Commands(

lib/src/adapters/Element.tsx → lib/src/adapters/SharedElement.tsx

@@ -2,7 +2,12 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { requireNativeComponent } from 'react-native';
 
-export class Element extends React.Component<{ elementId: string; resizeMode?: string }> {
+export interface SharedElementProps {
+  elementId: string;
+  resizeMode: string;
+}
+
+export class SharedElement extends React.Component<SharedElementProps> {
   static propTypes = {
     elementId: PropTypes.string.isRequired,
     resizeMode: PropTypes.string
@@ -13,10 +18,10 @@ export class Element extends React.Component<{ elementId: string; resizeMode?: s
   };
 
   render() {
-    return <RNNElement {...this.props} />;
+    return <RnnSharedElement {...this.props} />;
   }
 }
 
-const RNNElement = requireNativeComponent('RNNElement', Element, {
+const RnnSharedElement = requireNativeComponent('RNNElement', SharedElement, {
   nativeOnly: { nativeID: true }
 });

lib/src/adapters/UniqueIdProvider.mock.ts

@@ -1,5 +0,0 @@
-export class UniqueIdProvider {
-  generate(prefix: string): string {
-    return `${prefix}+UNIQUE_ID`;
-  }
-}

lib/src/commands/Commands.test.ts

@@ -4,34 +4,37 @@ import { mock, verify, instance, deepEqual, when, anything, anyString } from 'ts
 import { LayoutTreeParser } from './LayoutTreeParser';
 import { LayoutTreeCrawler } from './LayoutTreeCrawler';
 import { Store } from '../components/Store';
-import { UniqueIdProvider } from '../adapters/UniqueIdProvider.mock';
 import { Commands } from './Commands';
 import { CommandsObserver } from '../events/CommandsObserver';
 import { NativeCommandsSender } from '../adapters/NativeCommandsSender';
 import { OptionsProcessor } from './OptionsProcessor';
+import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
+import { Options } from '../interfaces/Options';
 
 describe('Commands', () => {
   let uut: Commands;
   let mockedNativeCommandsSender: NativeCommandsSender;
-  let nativeCommandsSender: NativeCommandsSender;
-  let store: Store;
+  let mockedStore: Store;
   let commandsObserver: CommandsObserver;
+  let mockedUniqueIdProvider: UniqueIdProvider;
 
   beforeEach(() => {
-    store = new Store();
-    commandsObserver = new CommandsObserver(new UniqueIdProvider());
     mockedNativeCommandsSender = mock(NativeCommandsSender);
-    nativeCommandsSender = instance(mockedNativeCommandsSender);
+    mockedUniqueIdProvider = mock(UniqueIdProvider);
+    when(mockedUniqueIdProvider.generate(anything())).thenCall((prefix) => `${prefix}+UNIQUE_ID`);
+    const uniqueIdProvider = instance(mockedUniqueIdProvider);
+    mockedStore = mock(Store);
+    commandsObserver = new CommandsObserver(uniqueIdProvider);
 
     const mockedOptionsProcessor = mock(OptionsProcessor);
     const optionsProcessor = instance(mockedOptionsProcessor);
 
     uut = new Commands(
-      nativeCommandsSender,
-      new LayoutTreeParser(),
-      new LayoutTreeCrawler(new UniqueIdProvider(), store, optionsProcessor),
+      instance(mockedNativeCommandsSender),
+      new LayoutTreeParser(uniqueIdProvider),
+      new LayoutTreeCrawler(instance(mockedStore), optionsProcessor),
       commandsObserver,
-      new UniqueIdProvider(),
+      uniqueIdProvider,
       optionsProcessor
     );
   });
@@ -39,146 +42,119 @@ describe('Commands', () => {
   describe('setRoot', () => {
     it('sends setRoot to native after parsing into a correct layout tree', () => {
       uut.setRoot({
-        root: {
-          component: {
-            name: 'com.example.MyScreen'
-          }
-        }
+        root: { component: { name: 'com.example.MyScreen' } }
       });
-      verify(mockedNativeCommandsSender.setRoot('setRoot+UNIQUE_ID', deepEqual({
-        root: {
-          type: 'Component',
-          id: 'Component+UNIQUE_ID',
-          children: [],
-          data: {
-            name: 'com.example.MyScreen',
-            options: {},
-            passProps: undefined
-          }
-        },
-        modals: [],
-        overlays: []
-      }))).called();
-    });
-
-    it('passProps into components', () => {
-      const passProps = {
-        fn: () => 'Hello'
-      };
-      expect(store.getPropsForId('Component+UNIQUE_ID')).toEqual({});
-      uut.setRoot({ root: { component: { name: 'asd', passProps } } });
-      expect(store.getPropsForId('Component+UNIQUE_ID')).toEqual(passProps);
-      expect(store.getPropsForId('Component+UNIQUE_ID').fn()).toEqual('Hello');
+      verify(
+        mockedNativeCommandsSender.setRoot(
+          'setRoot+UNIQUE_ID',
+          deepEqual({
+            root: {
+              type: 'Component',
+              id: 'Component+UNIQUE_ID',
+              children: [],
+              data: { name: 'com.example.MyScreen', options: {}, passProps: undefined }
+            },
+            modals: [],
+            overlays: []
+          })
+        )
+      ).called();
     });
 
     it('returns a promise with the resolved layout', async () => {
-      when(mockedNativeCommandsSender.setRoot(anything(), anything())).thenResolve('the resolved layout' as any);
+      when(mockedNativeCommandsSender.setRoot(anything(), anything())).thenResolve(
+        'the resolved layout'
+      );
       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'
-            }
-          }
-        ]
+        root: { component: { name: 'com.example.MyScreen' } },
+        modals: [{ component: { name: 'com.example.MyModal' } }],
+        overlays: [{ component: { name: 'com.example.MyOverlay' } }]
       });
-      verify(mockedNativeCommandsSender.setRoot('setRoot+UNIQUE_ID', deepEqual({
-        root:
-          {
-            type: 'Component',
-            id: 'Component+UNIQUE_ID',
-            children: [],
-            data: {
-              name: 'com.example.MyScreen',
-              options: {},
-              passProps: undefined
-            }
-          },
-        modals: [
-          {
-            type: 'Component',
-            id: 'Component+UNIQUE_ID',
-            children: [],
-            data: {
-              name: 'com.example.MyModal',
-              options: {},
-              passProps: undefined
-            }
-          }
-        ],
-        overlays: [
-          {
-            type: 'Component',
-            id: 'Component+UNIQUE_ID',
-            children: [],
-            data: {
-              name: 'com.example.MyOverlay',
-              options: {},
-              passProps: undefined
-            }
-          }
-        ]
-      }))).called();
+      verify(
+        mockedNativeCommandsSender.setRoot(
+          'setRoot+UNIQUE_ID',
+          deepEqual({
+            root: {
+              type: 'Component',
+              id: 'Component+UNIQUE_ID',
+              children: [],
+              data: {
+                name: 'com.example.MyScreen',
+                options: {},
+                passProps: undefined
+              }
+            },
+            modals: [
+              {
+                type: 'Component',
+                id: 'Component+UNIQUE_ID',
+                children: [],
+                data: {
+                  name: 'com.example.MyModal',
+                  options: {},
+                  passProps: undefined
+                }
+              }
+            ],
+            overlays: [
+              {
+                type: 'Component',
+                id: 'Component+UNIQUE_ID',
+                children: [],
+                data: {
+                  name: 'com.example.MyOverlay',
+                  options: {},
+                  passProps: undefined
+                }
+              }
+            ]
+          })
+        )
+      ).called();
     });
   });
 
   describe('mergeOptions', () => {
     it('passes options for component', () => {
-      uut.mergeOptions('theComponentId', { title: '1' } as any);
-      verify(mockedNativeCommandsSender.mergeOptions('theComponentId', deepEqual({title: '1'}))).called();
+      uut.mergeOptions('theComponentId', { blurOnUnmount: true });
+      verify(
+        mockedNativeCommandsSender.mergeOptions(
+          'theComponentId',
+          deepEqual({ blurOnUnmount: true })
+        )
+      ).called();
     });
   });
 
   describe('showModal', () => {
     it('sends command to native after parsing into a correct layout tree', () => {
-      uut.showModal({
-        component: {
-          name: 'com.example.MyScreen'
-        }
-      });
-      verify(mockedNativeCommandsSender.showModal('showModal+UNIQUE_ID', deepEqual({
-        type: 'Component',
-        id: 'Component+UNIQUE_ID',
-        data: {
-          name: 'com.example.MyScreen',
-          options: {},
-          passProps: undefined
-        },
-        children: []
-      }))).called();
-    });
-
-    it('passProps into components', () => {
-      const passProps = {};
-      expect(store.getPropsForId('Component+UNIQUE_ID')).toEqual({});
-      uut.showModal({
-        component: {
-          name: 'com.example.MyScreen',
-          passProps
-        }
-      });
-      expect(store.getPropsForId('Component+UNIQUE_ID')).toEqual(passProps);
+      uut.showModal({ component: { name: 'com.example.MyScreen' } });
+      verify(
+        mockedNativeCommandsSender.showModal(
+          'showModal+UNIQUE_ID',
+          deepEqual({
+            type: 'Component',
+            id: 'Component+UNIQUE_ID',
+            data: {
+              name: 'com.example.MyScreen',
+              options: {},
+              passProps: undefined
+            },
+            children: []
+          })
+        )
+      ).called();
     });
 
     it('returns a promise with the resolved layout', async () => {
-      when(mockedNativeCommandsSender.showModal(anything(), anything())).thenResolve('the resolved layout' as any);
+      when(mockedNativeCommandsSender.showModal(anything(), anything())).thenResolve(
+        'the resolved layout'
+      );
       const result = await uut.showModal({ component: { name: 'com.example.MyScreen' } });
       expect(result).toEqual('the resolved layout');
     });
@@ -187,11 +163,19 @@ describe('Commands', () => {
   describe('dismissModal', () => {
     it('sends command to native', () => {
       uut.dismissModal('myUniqueId', {});
-      verify(mockedNativeCommandsSender.dismissModal('dismissModal+UNIQUE_ID', 'myUniqueId', deepEqual({}))).called();
+      verify(
+        mockedNativeCommandsSender.dismissModal(
+          'dismissModal+UNIQUE_ID',
+          'myUniqueId',
+          deepEqual({})
+        )
+      ).called();
     });
 
     it('returns a promise with the id', async () => {
-      when(mockedNativeCommandsSender.dismissModal(anyString(), anything(), anything())).thenResolve('the id' as any);
+      when(
+        mockedNativeCommandsSender.dismissModal(anyString(), anything(), anything())
+      ).thenResolve('the id');
       const result = await uut.dismissModal('myUniqueId');
       expect(result).toEqual('the id');
     });
@@ -200,11 +184,15 @@ describe('Commands', () => {
   describe('dismissAllModals', () => {
     it('sends command to native', () => {
       uut.dismissAllModals({});
-      verify(mockedNativeCommandsSender.dismissAllModals('dismissAllModals+UNIQUE_ID', deepEqual({}))).called();
+      verify(
+        mockedNativeCommandsSender.dismissAllModals('dismissAllModals+UNIQUE_ID', deepEqual({}))
+      ).called();
     });
 
     it('returns a promise with the id', async () => {
-      when(mockedNativeCommandsSender.dismissAllModals(anyString(), anything())).thenResolve('the id' as any);
+      when(mockedNativeCommandsSender.dismissAllModals(anyString(), anything())).thenResolve(
+        'the id'
+      );
       const result = await uut.dismissAllModals();
       expect(result).toEqual('the id');
     });
@@ -212,55 +200,53 @@ describe('Commands', () => {
 
   describe('push', () => {
     it('resolves with the parsed layout', async () => {
-      when(mockedNativeCommandsSender.push(anyString(), anyString(), anything())).thenResolve('the resolved layout' as any);
-      const result = await uut.push('theComponentId', { component: { name: 'com.example.MyScreen' } });
+      when(mockedNativeCommandsSender.push(anyString(), anyString(), anything())).thenResolve(
+        'the resolved layout'
+      );
+      const result = await uut.push('theComponentId', {
+        component: { name: 'com.example.MyScreen' }
+      });
       expect(result).toEqual('the resolved layout');
     });
 
     it('parses into correct layout node and sends to native', () => {
       uut.push('theComponentId', { component: { name: 'com.example.MyScreen' } });
-      verify(mockedNativeCommandsSender.push('push+UNIQUE_ID', 'theComponentId', deepEqual({
-        type: 'Component',
-        id: 'Component+UNIQUE_ID',
-        data: {
-          name: 'com.example.MyScreen',
-          options: {},
-          passProps: undefined
-        },
-        children: []
-      }))).called();
-    });
-
-    it('calls component generator once', async () => {
-      const generator = jest.fn(() => {
-        return {};
-      });
-      store.setComponentClassForName('theComponentName', generator);
-      await uut.push('theComponentId', { component: { name: 'theComponentName' } });
-      expect(generator).toHaveBeenCalledTimes(1);
+      verify(
+        mockedNativeCommandsSender.push(
+          'push+UNIQUE_ID',
+          'theComponentId',
+          deepEqual({
+            type: 'Component',
+            id: 'Component+UNIQUE_ID',
+            data: {
+              name: 'com.example.MyScreen',
+              options: {},
+              passProps: undefined
+            },
+            children: []
+          })
+        )
+      ).called();
     });
   });
 
   describe('pop', () => {
     it('pops a component, passing componentId', () => {
       uut.pop('theComponentId', {});
-      verify(mockedNativeCommandsSender.pop('pop+UNIQUE_ID', 'theComponentId', deepEqual({}))).called();
+      verify(
+        mockedNativeCommandsSender.pop('pop+UNIQUE_ID', 'theComponentId', deepEqual({}))
+      ).called();
     });
     it('pops a component, passing componentId and options', () => {
-      const options = {
-        customTransition: {
-          animations: [
-            { type: 'sharedElement', fromId: 'title2', toId: 'title1', startDelay: 0, springVelocity: 0.2, duration: 0.5 }
-          ],
-          duration: 0.8
-        }
-      };
-      uut.pop('theComponentId', options as any);
+      const options: Options = { popGesture: true };
+      uut.pop('theComponentId', options);
       verify(mockedNativeCommandsSender.pop('pop+UNIQUE_ID', 'theComponentId', options)).called();
     });
 
     it('pop returns a promise that resolves to componentId', async () => {
-      when(mockedNativeCommandsSender.pop(anyString(), anyString(), anything())).thenResolve('theComponentId' as any);
+      when(mockedNativeCommandsSender.pop(anyString(), anyString(), anything())).thenResolve(
+        'theComponentId'
+      );
       const result = await uut.pop('theComponentId', {});
       expect(result).toEqual('theComponentId');
     });
@@ -269,11 +255,15 @@ describe('Commands', () => {
   describe('popTo', () => {
     it('pops all components until the passed Id is top', () => {
       uut.popTo('theComponentId', {});
-      verify(mockedNativeCommandsSender.popTo('popTo+UNIQUE_ID', 'theComponentId', deepEqual({}))).called();
+      verify(
+        mockedNativeCommandsSender.popTo('popTo+UNIQUE_ID', 'theComponentId', deepEqual({}))
+      ).called();
     });
 
     it('returns a promise that resolves to targetId', async () => {
-      when(mockedNativeCommandsSender.popTo(anyString(), anyString(), anything())).thenResolve('theComponentId' as any);
+      when(mockedNativeCommandsSender.popTo(anyString(), anyString(), anything())).thenResolve(
+        'theComponentId'
+      );
       const result = await uut.popTo('theComponentId');
       expect(result).toEqual('theComponentId');
     });
@@ -282,11 +272,15 @@ describe('Commands', () => {
   describe('popToRoot', () => {
     it('pops all components to root', () => {
       uut.popToRoot('theComponentId', {});
-      verify(mockedNativeCommandsSender.popToRoot('popToRoot+UNIQUE_ID', 'theComponentId', deepEqual({}))).called();
+      verify(
+        mockedNativeCommandsSender.popToRoot('popToRoot+UNIQUE_ID', 'theComponentId', deepEqual({}))
+      ).called();
     });
 
     it('returns a promise that resolves to targetId', async () => {
-      when(mockedNativeCommandsSender.popToRoot(anyString(), anyString(), anything())).thenResolve('theComponentId' as any);
+      when(mockedNativeCommandsSender.popToRoot(anyString(), anyString(), anything())).thenResolve(
+        'theComponentId'
+      );
       const result = await uut.popToRoot('theComponentId');
       expect(result).toEqual('theComponentId');
     });
@@ -295,42 +289,51 @@ describe('Commands', () => {
   describe('setStackRoot', () => {
     it('parses into correct layout node and sends to native', () => {
       uut.setStackRoot('theComponentId', [{ component: { name: 'com.example.MyScreen' } }]);
-      verify(mockedNativeCommandsSender.setStackRoot('setStackRoot+UNIQUE_ID', 'theComponentId', deepEqual([
-        {
-          type: 'Component',
-          id: 'Component+UNIQUE_ID',
-          data: {
-            name: 'com.example.MyScreen',
-            options: {},
-            passProps: undefined
-          },
-          children: []
-        }
-      ]))).called();
+      verify(
+        mockedNativeCommandsSender.setStackRoot(
+          'setStackRoot+UNIQUE_ID',
+          'theComponentId',
+          deepEqual([
+            {
+              type: 'Component',
+              id: 'Component+UNIQUE_ID',
+              data: {
+                name: 'com.example.MyScreen',
+                options: {},
+                passProps: undefined
+              },
+              children: []
+            }
+          ])
+        )
+      ).called();
     });
   });
 
   describe('showOverlay', () => {
     it('sends command to native after parsing into a correct layout tree', () => {
-      uut.showOverlay({
-        component: {
-          name: 'com.example.MyScreen'
-        }
-      });
-      verify(mockedNativeCommandsSender.showOverlay('showOverlay+UNIQUE_ID', deepEqual({
-        type: 'Component',
-        id: 'Component+UNIQUE_ID',
-        data: {
-          name: 'com.example.MyScreen',
-          options: {},
-          passProps: undefined
-        },
-        children: []
-      }))).called();
+      uut.showOverlay({ component: { name: 'com.example.MyScreen' } });
+      verify(
+        mockedNativeCommandsSender.showOverlay(
+          'showOverlay+UNIQUE_ID',
+          deepEqual({
+            type: 'Component',
+            id: 'Component+UNIQUE_ID',
+            data: {
+              name: 'com.example.MyScreen',
+              options: {},
+              passProps: undefined
+            },
+            children: []
+          })
+        )
+      ).called();
     });
 
     it('resolves with the component id', async () => {
-      when(mockedNativeCommandsSender.showOverlay(anyString(), anything())).thenResolve('Component1' as any);
+      when(mockedNativeCommandsSender.showOverlay(anyString(), anything())).thenResolve(
+        'Component1'
+      );
       const result = await uut.showOverlay({ component: { name: 'com.example.MyScreen' } });
       expect(result).toEqual('Component1');
     });
@@ -338,7 +341,7 @@ describe('Commands', () => {
 
   describe('dismissOverlay', () => {
     it('check promise returns true', async () => {
-      when(mockedNativeCommandsSender.dismissOverlay(anyString(), anyString())).thenResolve(true as any);
+      when(mockedNativeCommandsSender.dismissOverlay(anyString(), anyString())).thenResolve(true);
       const result = await uut.dismissOverlay('Component1');
       verify(mockedNativeCommandsSender.dismissOverlay(anyString(), anyString())).called();
       expect(result).toEqual(true);
@@ -346,27 +349,36 @@ describe('Commands', () => {
 
     it('send command to native with componentId', () => {
       uut.dismissOverlay('Component1');
-      verify(mockedNativeCommandsSender.dismissOverlay('dismissOverlay+UNIQUE_ID', 'Component1')).called();
+      verify(
+        mockedNativeCommandsSender.dismissOverlay('dismissOverlay+UNIQUE_ID', 'Component1')
+      ).called();
     });
   });
 
   describe('notifies commandsObserver', () => {
     let cb: any;
+    let mockedLayoutTreeParser: LayoutTreeParser;
+    let mockedLayoutTreeCrawler: LayoutTreeCrawler;
+    let anotherMockedUniqueIdProvider: UniqueIdProvider;
 
     beforeEach(() => {
       cb = jest.fn();
-      const mockParser = { parse: () => 'parsed' };
-      const mockCrawler = { crawl: (x: any) => x, processOptions: (x: any) => x };
+      mockedLayoutTreeParser = mock(LayoutTreeParser);
+      mockedLayoutTreeCrawler = mock(LayoutTreeCrawler);
       commandsObserver.register(cb);
       const mockedOptionsProcessor = mock(OptionsProcessor);
-      const optionsProcessor = instance(mockedOptionsProcessor);
+      anotherMockedUniqueIdProvider = mock(UniqueIdProvider);
+      when(anotherMockedUniqueIdProvider.generate(anything())).thenCall(
+        (prefix) => `${prefix}+UNIQUE_ID`
+      );
+
       uut = new Commands(
         mockedNativeCommandsSender,
-        mockParser as any,
-        mockCrawler as any,
+        instance(mockedLayoutTreeParser),
+        instance(mockedLayoutTreeCrawler),
         commandsObserver,
-        new UniqueIdProvider(),
-        optionsProcessor
+        instance(anotherMockedUniqueIdProvider),
+        instance(mockedOptionsProcessor)
       );
     });
 
@@ -377,29 +389,6 @@ describe('Commands', () => {
       return methods;
     }
 
-    // function getAllMethodsOfNativeCommandsSender() {
-    //   const nativeCommandsSenderFns = _.functions(mockedNativeCommandsSender);
-    //   expect(nativeCommandsSenderFns.length).toBeGreaterThan(1);
-    //   return nativeCommandsSenderFns;
-    // }
-
-    // it('always call last, when nativeCommand fails, dont notify listeners', () => {
-    //   // expect(getAllMethodsOfUut().sort()).toEqual(getAllMethodsOfNativeCommandsSender().sort());
-
-    //   // call all commands on uut, all should throw, no commandObservers called
-    //   _.forEach(getAllMethodsOfUut(), (m) => {
-    //     expect(() => uut[m]()).toThrow();
-    //     expect(cb).not.toHaveBeenCalled();
-    //   });
-    // });
-
-    // it('notify on all commands', () => {
-    //   _.forEach(getAllMethodsOfUut(), (m) => {
-    //     uut[m]({});
-    //   });
-    //   expect(cb).toHaveBeenCalledTimes(getAllMethodsOfUut().length);
-    // });
-
     describe('passes correct params', () => {
       const argsForMethodName: Record<string, any[]> = {
         setRoot: [{}],
@@ -418,20 +407,27 @@ describe('Commands', () => {
         getLaunchArgs: ['id']
       };
       const paramsForMethodName: Record<string, object> = {
-        setRoot: { commandId: 'setRoot+UNIQUE_ID', layout: { root: 'parsed', modals: [], overlays: [] } },
+        setRoot: {
+          commandId: 'setRoot+UNIQUE_ID',
+          layout: { root: null, modals: [], overlays: [] }
+        },
         setDefaultOptions: { options: {} },
         mergeOptions: { componentId: 'id', options: {} },
-        showModal: { commandId: 'showModal+UNIQUE_ID', layout: 'parsed' },
+        showModal: { commandId: 'showModal+UNIQUE_ID', layout: null },
         dismissModal: { commandId: 'dismissModal+UNIQUE_ID', componentId: 'id', mergeOptions: {} },
         dismissAllModals: { commandId: 'dismissAllModals+UNIQUE_ID', mergeOptions: {} },
-        push: { commandId: 'push+UNIQUE_ID', componentId: 'id', layout: 'parsed' },
+        push: { commandId: 'push+UNIQUE_ID', componentId: 'id', layout: null },
         pop: { commandId: 'pop+UNIQUE_ID', componentId: 'id', mergeOptions: {} },
         popTo: { commandId: 'popTo+UNIQUE_ID', componentId: 'id', mergeOptions: {} },
         popToRoot: { commandId: 'popToRoot+UNIQUE_ID', componentId: 'id', mergeOptions: {} },
-        setStackRoot: { commandId: 'setStackRoot+UNIQUE_ID', componentId: 'id', layout: ['parsed'] },
-        showOverlay: { commandId: 'showOverlay+UNIQUE_ID', layout: 'parsed' },
+        setStackRoot: {
+          commandId: 'setStackRoot+UNIQUE_ID',
+          componentId: 'id',
+          layout: [null]
+        },
+        showOverlay: { commandId: 'showOverlay+UNIQUE_ID', layout: null },
         dismissOverlay: { commandId: 'dismissOverlay+UNIQUE_ID', componentId: 'id' },
-        getLaunchArgs: { commandId: 'getLaunchArgs+UNIQUE_ID' },
+        getLaunchArgs: { commandId: 'getLaunchArgs+UNIQUE_ID' }
       };
       _.forEach(getAllMethodsOfUut(), (m) => {
         it(`for ${m}`, () => {

lib/src/commands/LayoutTreeCrawler.test.ts

@@ -1,227 +1,158 @@
 import * as React from 'react';
 
 import { LayoutType } from './LayoutType';
-import { LayoutTreeCrawler, LayoutNode } from './LayoutTreeCrawler';
-import { UniqueIdProvider } from '../adapters/UniqueIdProvider.mock';
+import { LayoutTreeCrawler } from './LayoutTreeCrawler';
 import { Store } from '../components/Store';
-import { mock, instance } from 'ts-mockito';
+import { mock, instance, verify, deepEqual, when } from 'ts-mockito';
 import { OptionsProcessor } from './OptionsProcessor';
+import { Options } from '../interfaces/Options';
 
 describe('LayoutTreeCrawler', () => {
   let uut: LayoutTreeCrawler;
-  let store: Store;
+  let mockedStore: Store;
+  let mockedOptionsProcessor: OptionsProcessor;
 
   beforeEach(() => {
-    store = new Store();
-    const mockedOptionsProcessor = mock(OptionsProcessor);
-    const optionsProcessor = instance(mockedOptionsProcessor);
-    uut = new LayoutTreeCrawler(new UniqueIdProvider(), store, optionsProcessor);
-  });
+    mockedStore = mock(Store);
+    mockedOptionsProcessor = mock(OptionsProcessor);
 
-  it('crawls a layout tree and adds unique id to each node', () => {
-    const node = { type: LayoutType.Stack, id: 'Stack+UNIQUE_ID', children: [{ id: 'BottomTabs+UNIQUE_ID', type: LayoutType.BottomTabs, data: {}, children: [] }], data: {} };
-    uut.crawl(node);
-    expect(node.id).toEqual('Stack+UNIQUE_ID');
-    expect(node.children[0].id).toEqual('BottomTabs+UNIQUE_ID');
-  });
-
-  it('does not generate unique id when already provided', () => {
-    const node = { id: 'user defined id', type: LayoutType.Stack, data: {}, children: [] };
-    uut.crawl(node);
-    expect(node.id).toEqual('user defined id');
-  });
-
-  it('crawls a layout tree and ensures data exists', () => {
-    const node = { type: LayoutType.Stack, children: [{ type: LayoutType.BottomTabs, data: {}, children: [] }], data: {} };
-    uut.crawl(node);
-    expect(node.data).toEqual({});
-    expect(node.children[0].data).toEqual({});
-  });
-
-  it('crawls a layout tree and ensures children exists', () => {
-    const node = { type: LayoutType.Stack, children: [{ type: LayoutType.BottomTabs, data: {}, children: [] }], data: {} };
-    uut.crawl(node);
-    expect(node.children[0].children).toEqual([]);
+    uut = new LayoutTreeCrawler(instance(mockedStore), instance(mockedOptionsProcessor));
   });
 
   it('saves passProps into store for Component nodes', () => {
     const node = {
+      id: 'testId',
       type: LayoutType.BottomTabs,
-      children: [{ type: LayoutType.Component, data: { name: 'the name', passProps: { myProp: 123 } }, children: [] }],
+      children: [
+        {
+          id: 'testId',
+          type: LayoutType.Component,
+          data: { name: 'the name', passProps: { myProp: 123 } },
+          children: []
+        }
+      ],
       data: {}
     };
-    expect(store.getPropsForId('Component+UNIQUE_ID')).toEqual({});
     uut.crawl(node);
-    expect(store.getPropsForId('Component+UNIQUE_ID')).toEqual({ myProp: 123 });
+    verify(mockedStore.setPropsForId('testId', deepEqual({ myProp: 123 }))).called();
   });
 
   it('Components: injects options from original component class static property', () => {
-    const theStyle = {};
-    const MyComponent = class CoolComponent extends React.Component {
-      static get options() {
-        return theStyle;
-      }
+    when(mockedStore.getComponentClassForName('theComponentName')).thenReturn(
+      () =>
+        class extends React.Component {
+          static options(): Options {
+            return { popGesture: true };
+          }
+        }
+    );
+    const node = {
+      id: 'testId',
+      type: LayoutType.Component,
+      data: { name: 'theComponentName', options: {} },
+      children: []
     };
-
-    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: {} }, children: [] };
-    store.setComponentClassForName('theComponentName', () => MyComponent);
     uut.crawl(node);
-    expect(node.data.options).toEqual(theStyle);
+    expect(node.data.options).toEqual({ popGesture: true });
   });
 
   it('Components: crawl does not cache options', () => {
-    const optionsWithTitle = (title?: string) => {
-      return {
-        topBar: {
-          title: {
-            text: title
+    when(mockedStore.getComponentClassForName('theComponentName')).thenReturn(
+      () =>
+        class extends React.Component {
+          static options(props: { title?: string }) {
+            return { topBar: { title: { text: props.title } } };
           }
         }
-      };
-    };
-
-    const MyComponent = class CoolComponent extends React.Component {
-      static options(props: {title: string}) {
-        return {
-          topBar: {
-            title: {
-              text: props.title
-            }
-          }
-        };
-      }
-    };
-
-    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: {}, passProps: { title: 'title' } }, children: [] };
-    store.setComponentClassForName('theComponentName', () => MyComponent);
-    uut.crawl(node);
-    expect(node.data.options).toEqual(optionsWithTitle('title'));
-
-    const node2 = { type: LayoutType.Component, data: { name: 'theComponentName', options: {} }, children: [] };
-    uut.crawl(node2);
-    expect(node2.data.options).toEqual(optionsWithTitle(undefined));
-  });
-
-  it('Components: passes passProps to the static options function to be used by the user', () => {
-    const MyComponent = class CoolComponent extends React.Component {
-      static options(passProps: {bar: {baz: {value: string}}}) {
-        return { foo: passProps.bar.baz.value };
-      }
+    );
+    const node = {
+      id: 'testId',
+      type: LayoutType.Component,
+      data: { name: 'theComponentName', options: {}, passProps: { title: 'title' } },
+      children: []
     };
-
-    const node = { type: LayoutType.Component, data: { name: 'theComponentName', passProps: { bar: { baz: { value: 'hello' } } }, options: {} }, children: [] };
-    store.setComponentClassForName('theComponentName', () => MyComponent);
     uut.crawl(node);
-    expect(node.data.options).toEqual({ foo: 'hello' });
-  });
+    expect(node.data.options).toEqual({ topBar: { title: { text: 'title' } } });
 
-  it('Components: passProps in the static options is optional', () => {
-    const MyComponent = class CoolComponent extends React.Component {
-      static options(passProps: string) {
-        return { foo: passProps };
-      }
+    const node2 = {
+      id: 'testId',
+      type: LayoutType.Component,
+      data: { name: 'theComponentName', options: {} },
+      children: []
     };
-
-    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: {} }, children: [] };
-    store.setComponentClassForName('theComponentName', () => MyComponent);
-    uut.crawl(node);
-    expect(node.data.options).toEqual({ foo: {} });
+    uut.crawl(node2);
+    expect(node2.data.options).toEqual({ topBar: { title: {} } });
   });
 
   it('Components: merges options from component class static property with passed options, favoring passed options', () => {
-    const theStyle = {
-      bazz: 123,
-      inner: {
-        foo: 'bar'
-      },
-      opt: 'exists only in static'
-    };
-    const MyComponent = class CoolComponent extends React.Component {
-      static get options() {
-        return theStyle;
-      }
-    };
+    when(mockedStore.getComponentClassForName('theComponentName')).thenReturn(
+      () =>
+        class extends React.Component {
+          static options() {
+            return {
+              bazz: 123,
+              inner: { foo: 'this gets overriden' },
+              opt: 'exists only in static'
+            };
+          }
+        }
+    );
 
-    const passedOptions = {
-      aaa: 'exists only in passed',
-      bazz: 789,
-      inner: {
-        foo: 'this is overriden'
-      }
+    const node = {
+      id: 'testId',
+      type: LayoutType.Component,
+      data: {
+        name: 'theComponentName',
+        options: {
+          aaa: 'exists only in passed',
+          bazz: 789,
+          inner: { foo: 'this should override same keys' }
+        }
+      },
+      children: []
     };
 
-    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: passedOptions }, children: [] };
-    store.setComponentClassForName('theComponentName', () => MyComponent);
-
     uut.crawl(node);
 
     expect(node.data.options).toEqual({
       aaa: 'exists only in passed',
       bazz: 789,
-      inner: {
-        foo: 'this is overriden'
-      },
+      inner: { foo: 'this should override same keys' },
       opt: 'exists only in static'
     });
   });
 
-  it('Component: deepClones options', () => {
-    const theStyle = {};
-    const MyComponent = class CoolComponent extends React.Component {
-      static get options() {
-        return theStyle;
-      }
-    };
-
-    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: {} }, children: [] };
-    store.setComponentClassForName('theComponentName', () => MyComponent);
-    uut.crawl(node);
-    expect(node.data.options).not.toBe(theStyle);
-  });
-
   it('Components: must contain data name', () => {
-    const node = { type: LayoutType.Component, data: {}, children: [] };
+    const node = { type: LayoutType.Component, data: {}, children: [], id: 'testId' };
     expect(() => uut.crawl(node)).toThrowError('Missing component data.name');
   });
 
   it('Components: options default obj', () => {
-    const MyComponent = class extends React.Component { };
+    when(mockedStore.getComponentClassForName('theComponentName')).thenReturn(
+      () => class extends React.Component {}
+    );
 
-    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: {} }, children: [] };
-    store.setComponentClassForName('theComponentName', () => MyComponent);
+    const node = {
+      id: 'testId',
+      type: LayoutType.Component,
+      data: { name: 'theComponentName', options: {} },
+      children: []
+    };
     uut.crawl(node);
     expect(node.data.options).toEqual({});
   });
 
   it('Components: omits passProps after processing so they are not passed over the bridge', () => {
     const node = {
+      id: 'testId',
       type: LayoutType.Component,
       data: {
         name: 'compName',
-        passProps: {}
+        passProps: { someProp: 'here' }
       },
       children: []
     };
     uut.crawl(node);
     expect(node.data.passProps).toBeUndefined();
   });
-
-  describe('LayoutNode', () => {
-    it('convertable from same data structure', () => {
-      const x = {
-        id: 'theId',
-        type: LayoutType.Component,
-        data: {},
-        children: []
-      };
-
-      let got;
-      function expectingLayoutNode(param: LayoutNode) {
-        got = param;
-      }
-      expectingLayoutNode(x);
-
-      expect(got).toBe(x);
-    });
-  });
 });

lib/src/commands/LayoutTreeCrawler.ts

@@ -1,7 +1,8 @@
 import * as _ from 'lodash';
 import { LayoutType } from './LayoutType';
 import { OptionsProcessor } from './OptionsProcessor';
-import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
+import { Store } from '../components/Store';
+import { Options } from '../interfaces/Options';
 
 export interface Data {
   name?: string;
@@ -9,49 +10,55 @@ export interface Data {
   passProps?: any;
 }
 export interface LayoutNode {
-  id?: string;
+  id: string;
   type: LayoutType;
   data: Data;
   children: LayoutNode[];
 }
 
+type ComponentWithOptions = React.ComponentType<any> & { options(passProps: any): Options };
+
 export class LayoutTreeCrawler {
-  constructor(
-    private readonly uniqueIdProvider: UniqueIdProvider,
-    public readonly store: any,
-    private readonly optionsProcessor: OptionsProcessor
-  ) {
+  constructor(public readonly store: Store, private readonly optionsProcessor: OptionsProcessor) {
     this.crawl = this.crawl.bind(this);
   }
 
   crawl(node: LayoutNode): void {
-    node.id = node.id || this.uniqueIdProvider.generate(node.type);
     if (node.type === LayoutType.Component) {
-      this._handleComponent(node);
+      this.handleComponent(node);
     }
     this.optionsProcessor.processOptions(node.data.options);
-    _.forEach(node.children, this.crawl);
+    node.children.forEach(this.crawl);
   }
 
-  _handleComponent(node) {
-    this._assertComponentDataName(node);
-    this._savePropsToStore(node);
-    this._applyStaticOptions(node);
+  private handleComponent(node: LayoutNode) {
+    this.assertComponentDataName(node);
+    this.savePropsToStore(node);
+    this.applyStaticOptions(node);
     node.data.passProps = undefined;
   }
 
-  _savePropsToStore(node) {
+  private savePropsToStore(node: LayoutNode) {
     this.store.setPropsForId(node.id, node.data.passProps);
   }
 
-  _applyStaticOptions(node) {
-    const clazz = this.store.getComponentClassForName(node.data.name) ? this.store.getComponentClassForName(node.data.name)() : {};
-    const staticOptions = _.isFunction(clazz.options) ? clazz.options(node.data.passProps || {}) : (_.cloneDeep(clazz.options) || {});
-    const passedOptions = node.data.options || {};
-    node.data.options = _.merge({}, staticOptions, passedOptions);
+  private isComponentWithOptions(component: any): component is ComponentWithOptions {
+    return (component as ComponentWithOptions).options !== undefined;
+  }
+
+  private staticOptionsIfPossible(node: LayoutNode) {
+    const foundReactGenerator = this.store.getComponentClassForName(node.data.name!);
+    const reactComponent = foundReactGenerator ? foundReactGenerator() : undefined;
+    return reactComponent && this.isComponentWithOptions(reactComponent)
+      ? reactComponent.options(node.data.passProps || {})
+      : {};
+  }
+
+  private applyStaticOptions(node: LayoutNode) {
+    node.data.options = _.merge({}, this.staticOptionsIfPossible(node), node.data.options);
   }
 
-  _assertComponentDataName(component) {
+  private assertComponentDataName(component: LayoutNode) {
     if (!component.data.name) {
       throw new Error('Missing component data.name');
     }

lib/src/commands/LayoutTreeParser.test.ts

@@ -1,14 +1,19 @@
-import * as  _ from 'lodash';
+import * as _ from 'lodash';
 import { LayoutTreeParser } from './LayoutTreeParser';
 import { LayoutType } from './LayoutType';
 import { Layout } from '../interfaces/Layout';
 import { OptionsSplitView } from '../interfaces/Options';
+import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
+import { mock, instance, when, anything } from 'ts-mockito';
 
 describe('LayoutTreeParser', () => {
   let uut: LayoutTreeParser;
+  let mockedUniqueIdProvider: UniqueIdProvider;
 
   beforeEach(() => {
-    uut = new LayoutTreeParser();
+    mockedUniqueIdProvider = mock(UniqueIdProvider);
+    when(mockedUniqueIdProvider.generate(anything())).thenReturn('myUniqueId');
+    uut = new LayoutTreeParser(instance(mockedUniqueIdProvider));
   });
 
   describe('parses into { type, data, children }', () => {
@@ -18,16 +23,26 @@ describe('LayoutTreeParser', () => {
 
     it('single component', () => {
       expect(uut.parse(LayoutExamples.singleComponent)).toEqual({
+        id: 'myUniqueId',
         type: LayoutType.Component,
-        data: { name: 'MyReactComponent', options: LayoutExamples.options, passProps: LayoutExamples.passProps },
+        data: {
+          name: 'MyReactComponent',
+          options: LayoutExamples.options,
+          passProps: LayoutExamples.passProps
+        },
         children: []
       });
     });
 
     it('external component', () => {
       expect(uut.parse(LayoutExamples.externalComponent)).toEqual({
+        id: 'myUniqueId',
         type: LayoutType.ExternalComponent,
-        data: { name: 'MyReactComponent', options: LayoutExamples.options, passProps: LayoutExamples.passProps },
+        data: {
+          name: 'MyReactComponent',
+          options: LayoutExamples.options,
+          passProps: LayoutExamples.passProps
+        },
         children: []
       });
     });
@@ -40,6 +55,7 @@ describe('LayoutTreeParser', () => {
         }
       });
       expect(result).toEqual({
+        id: 'myUniqueId',
         type: LayoutType.Component,
         data: { name: 'MyScreen', passProps: LayoutExamples.passProps },
         children: []
@@ -49,17 +65,20 @@ describe('LayoutTreeParser', () => {
 
     it('stack of components with top bar', () => {
       expect(uut.parse(LayoutExamples.stackWithTopBar)).toEqual({
+        id: 'myUniqueId',
         type: LayoutType.Stack,
         data: {
           options: LayoutExamples.options
         },
         children: [
           {
+            id: 'myUniqueId',
             type: LayoutType.Component,
             data: { name: 'MyReactComponent1' },
             children: []
           },
           {
+            id: 'myUniqueId',
             type: LayoutType.Component,
             data: { name: 'MyReactComponent2', options: LayoutExamples.options },
             children: []
@@ -71,7 +90,7 @@ describe('LayoutTreeParser', () => {
     it('bottom tabs', () => {
       const result = uut.parse(LayoutExamples.bottomTabs);
       expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
-      expect(result.id).toEqual(undefined);
+      expect(result.id).toEqual('myUniqueId');
       expect(result.type).toEqual(LayoutType.BottomTabs);
       expect(result.data).toEqual({});
       expect(result.children.length).toEqual(3);
@@ -83,7 +102,7 @@ describe('LayoutTreeParser', () => {
     it('side menus', () => {
       const result = uut.parse(LayoutExamples.sideMenu);
       expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
-      expect(result.id).toEqual(undefined);
+      expect(result.id).toEqual('myUniqueId');
       expect(result.type).toEqual(LayoutType.SideMenuRoot);
       expect(result.data).toEqual({});
       expect(result.children.length).toEqual(3);
@@ -101,7 +120,7 @@ describe('LayoutTreeParser', () => {
     it('top tabs', () => {
       const result = uut.parse(LayoutExamples.topTabs);
       expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
-      expect(result.id).toEqual(undefined);
+      expect(result.id).toEqual('myUniqueId');
       expect(result.type).toEqual(LayoutType.TopTabs);
       expect(result.data).toEqual({ options: LayoutExamples.options });
       expect(result.children.length).toEqual(5);
@@ -136,7 +155,9 @@ describe('LayoutTreeParser', () => {
     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: {name: 'lool'} } } }).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);
   });
 
@@ -146,7 +167,9 @@ describe('LayoutTreeParser', () => {
     expect(uut.parse({ stack: { id: 'stackId' } }).id).toEqual('stackId');
     expect(uut.parse({ stack: { children: [{ component }] } }).children[0].id).toEqual('compId');
     expect(uut.parse({ bottomTabs: { id: 'myId' } }).id).toEqual('myId');
-    expect(uut.parse({ bottomTabs: { children: [{ component }] } }).children[0].id).toEqual('compId');
+    expect(uut.parse({ bottomTabs: { children: [{ component }] } }).children[0].id).toEqual(
+      'compId'
+    );
     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');
@@ -174,7 +197,7 @@ const optionsSplitView: OptionsSplitView = {
   displayMode: 'auto',
   primaryEdge: 'leading',
   minWidth: 150,
-  maxWidth: 300,
+  maxWidth: 300
 };
 
 const singleComponent = {
@@ -236,13 +259,7 @@ const sideMenu = {
 
 const topTabs = {
   topTabs: {
-    children: [
-      singleComponent,
-      singleComponent,
-      singleComponent,
-      singleComponent,
-      stackWithTopBar
-    ],
+    children: [singleComponent, singleComponent, singleComponent, singleComponent, stackWithTopBar],
     options
   }
 };
@@ -257,12 +274,7 @@ const complexLayout: Layout = {
           stackWithTopBar,
           {
             stack: {
-              children: [
-                singleComponent,
-                singleComponent,
-                singleComponent,
-                singleComponent,
-              ]
+              children: [singleComponent, singleComponent, singleComponent, singleComponent]
             }
           }
         ]
@@ -275,15 +287,13 @@ const splitView: Layout = {
   splitView: {
     master: {
       stack: {
-        children: [
-          singleComponent,
-        ],
+        children: [singleComponent],
         options
-      },
+      }
     },
     detail: stackWithTopBar,
-    options: optionsSplitView,
-  },
+    options: optionsSplitView
+  }
 };
 
 const LayoutExamples = {

lib/src/commands/LayoutTreeParser.ts

@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import { LayoutType } from './LayoutType';
 import { LayoutNode } from './LayoutTreeCrawler';
 import {
@@ -11,9 +10,10 @@ import {
   LayoutSplitView,
   ExternalComponent
 } from '../interfaces/Layout';
+import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
 
 export class LayoutTreeParser {
-  constructor() {
+  constructor(private uniqueIdProvider: UniqueIdProvider) {
     this.parse = this.parse.bind(this);
   }
 
@@ -33,12 +33,12 @@ export class LayoutTreeParser {
     } else if (api.splitView) {
       return this.splitView(api.splitView);
     }
-    throw new Error(`unknown LayoutType "${_.keys(api)}"`);
+    throw new Error(`unknown LayoutType "${Object.keys(api)}"`);
   }
 
   private topTabs(api: TopTabs): LayoutNode {
     return {
-      id: api.id,
+      id: api.id || this.uniqueIdProvider.generate(LayoutType.TopTabs),
       type: LayoutType.TopTabs,
       data: { options: api.options },
       children: api.children ? api.children.map(this.parse) : []
@@ -47,7 +47,7 @@ export class LayoutTreeParser {
 
   private sideMenu(api: LayoutSideMenu): LayoutNode {
     return {
-      id: api.id,
+      id: api.id || this.uniqueIdProvider.generate(LayoutType.SideMenuRoot),
       type: LayoutType.SideMenuRoot,
       data: { options: api.options },
       children: this.sideMenuChildren(api)
@@ -57,15 +57,22 @@ export class LayoutTreeParser {
   private sideMenuChildren(api: LayoutSideMenu): LayoutNode[] {
     const children: LayoutNode[] = [];
     if (api.left) {
-      children.push({ type: LayoutType.SideMenuLeft, data: {}, children: [this.parse(api.left)] });
+      children.push({
+        id: this.uniqueIdProvider.generate(LayoutType.SideMenuLeft),
+        type: LayoutType.SideMenuLeft,
+        data: {},
+        children: [this.parse(api.left)]
+      });
     }
     children.push({
+      id: this.uniqueIdProvider.generate(LayoutType.SideMenuCenter),
       type: LayoutType.SideMenuCenter,
       data: {},
       children: [this.parse(api.center)]
     });
     if (api.right) {
       children.push({
+        id: this.uniqueIdProvider.generate(LayoutType.SideMenuRight),
         type: LayoutType.SideMenuRight,
         data: {},
         children: [this.parse(api.right)]
@@ -76,7 +83,7 @@ export class LayoutTreeParser {
 
   private bottomTabs(api: LayoutBottomTabs): LayoutNode {
     return {
-      id: api.id,
+      id: api.id || this.uniqueIdProvider.generate(LayoutType.BottomTabs),
       type: LayoutType.BottomTabs,
       data: { options: api.options },
       children: api.children ? api.children.map(this.parse) : []
@@ -85,7 +92,7 @@ export class LayoutTreeParser {
 
   private stack(api: LayoutStack): LayoutNode {
     return {
-      id: api.id,
+      id: api.id || this.uniqueIdProvider.generate(LayoutType.Stack),
       type: LayoutType.Stack,
       data: { options: api.options },
       children: api.children ? api.children.map(this.parse) : []
@@ -94,7 +101,7 @@ export class LayoutTreeParser {
 
   private component(api: LayoutComponent): LayoutNode {
     return {
-      id: api.id,
+      id: api.id || this.uniqueIdProvider.generate(LayoutType.Component),
       type: LayoutType.Component,
       data: { name: api.name.toString(), options: api.options, passProps: api.passProps },
       children: []
@@ -103,7 +110,7 @@ export class LayoutTreeParser {
 
   private externalComponent(api: ExternalComponent): LayoutNode {
     return {
-      id: api.id,
+      id: api.id || this.uniqueIdProvider.generate(LayoutType.ExternalComponent),
       type: LayoutType.ExternalComponent,
       data: { name: api.name.toString(), options: api.options, passProps: api.passProps },
       children: []
@@ -115,7 +122,7 @@ export class LayoutTreeParser {
     const detail = api.detail ? this.parse(api.detail) : undefined;
 
     return {
-      id: api.id,
+      id: api.id || this.uniqueIdProvider.generate(LayoutType.SplitView),
       type: LayoutType.SplitView,
       data: { options: api.options },
       children: master && detail ? [master, detail] : []

lib/src/commands/OptionsProcessor.test.ts

@@ -1,7 +1,6 @@
 import { OptionsProcessor } from './OptionsProcessor';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
 import { Store } from '../components/Store';
-import * as _ from 'lodash';
 import { Options, OptionsModalPresentationStyle } from '../interfaces/Options';
 import { mock, when, anyString, instance, anyNumber, verify } from 'ts-mockito';
 import { ColorService } from '../adapters/ColorService';

lib/src/components/ComponentWrapper.test.tsx

@@ -159,7 +159,7 @@ describe('ComponentWrapper', () => {
 
   describe(`register with redux store`, () => {
     class MyReduxComp extends React.Component<any> {
-      static get options() {
+      static options() {
         return { foo: 123 };
       }
       render() {
@@ -185,7 +185,7 @@ describe('ComponentWrapper', () => {
       const NavigationComponent = uut.wrap(componentName, () => ConnectedComp, store, componentEventsObserver, undefined, ReduxProvider, reduxStore);
       const tree = renderer.create(<NavigationComponent componentId={'theCompId'} />);
       expect(tree.toJSON()!.children).toEqual(['it just works']);
-      expect((NavigationComponent as any).options).toEqual({ foo: 123 });
+      expect((NavigationComponent as any).options()).toEqual({ foo: 123 });
     });
   });
 

lib/src/components/Store.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import * as _ from 'lodash';
+import { ComponentProvider } from 'react-native';
 
 export class Store {
-  private componentsByName: Record<string, () => React.ComponentClass<any, any>> = {};
+  private componentsByName: Record<string, ComponentProvider> = {};
   private propsById: Record<string, any> = {};
 
   setPropsForId(componentId: string, props: any) {
@@ -13,15 +13,15 @@ export class Store {
     return _.get(this.propsById, componentId, {});
   }
 
-  setComponentClassForName(componentName: string | number, ComponentClass: () => React.ComponentClass<any, any>) {
-    _.set(this.componentsByName, componentName.toString(), ComponentClass);
+  cleanId(componentId: string) {
+    _.unset(this.propsById, componentId);
   }
 
-  getComponentClassForName(componentName: string | number) {
-    return _.get(this.componentsByName, componentName.toString());
+  setComponentClassForName(componentName: string | number, ComponentClass: ComponentProvider) {
+    _.set(this.componentsByName, componentName.toString(), ComponentClass);
   }
 
-  cleanId(componentId: string) {
-    _.unset(this.propsById, componentId);
+  getComponentClassForName(componentName: string | number): ComponentProvider | undefined {
+    return _.get(this.componentsByName, componentName.toString());
   }
 }

lib/src/events/CommandsObserver.ts

@@ -1,7 +1,7 @@
 import { EventSubscription } from '../interfaces/EventSubscription';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
 
-export type CommandsListener = (name: string, params: any) => void;
+export type CommandsListener = (name: string, params: Record<string, any>) => void;
 
 export class CommandsObserver {
   private listeners: Record<string, CommandsListener> = {};
@@ -15,7 +15,7 @@ export class CommandsObserver {
     };
   }
 
-  public notify(commandName: string, params: any): void {
+  public notify(commandName: string, params: Record<string, any>): void {
     Object.values(this.listeners).forEach((listener) => listener(commandName, params));
   }
 }

lib/src/events/ComponentEventsObserver.ts

@@ -12,8 +12,10 @@ import {
 } from '../interfaces/ComponentEvents';
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver';
 
+type ReactComponentWithIndexing = React.Component<any> & Record<string, any>;
+
 export class ComponentEventsObserver {
-  private readonly listeners = {};
+  private listeners: Record<string, Record<string, ReactComponentWithIndexing>> = {};
   private alreadyRegistered = false;
 
   constructor(private readonly nativeEventsReceiver: NativeEventsReceiver) {
@@ -87,7 +89,7 @@ export class ComponentEventsObserver {
 
   private triggerOnAllListenersByComponentId(event: ComponentEvent, method: string) {
     _.forEach(this.listeners[event.componentId], (component) => {
-      if (_.isObject(component) && _.isFunction(component[method])) {
+      if (component[method]) {
         component[method](event);
       }
     });

lib/src/events/EventsRegistry.test.tsx

@@ -1,7 +1,7 @@
 import { EventsRegistry } from './EventsRegistry';
 import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
 import { CommandsObserver } from './CommandsObserver';
-import { UniqueIdProvider } from '../adapters/UniqueIdProvider.mock';
+import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
 
 describe('EventsRegistry', () => {
   let uut: EventsRegistry;

playground/src/screens/BackHandlerModalScreen.js

@@ -4,7 +4,7 @@ const { Component } = require('react');
 const { View, Text, Button, BackHandler } = require('react-native');
 
 class BackHandlerModalScreen extends Component {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/BackHandlerScreen.js

@@ -4,7 +4,7 @@ const { Navigation } = require('react-native-navigation');
 const { View, Text, Button, BackHandler } = require('react-native');
 
 class BackHandlerScreen extends Component {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/CustomDialog.js

@@ -7,7 +7,7 @@ const { Navigation } = require('react-native-navigation');
 const testIDs = require('../testIDs');
 
 class CustomDialog extends PureComponent {
-  static get options() {
+  static options() {
     return {
       statusBarBackgroundColor: 'green'
     };

playground/src/screens/CustomTransitionDestination.js

@@ -11,7 +11,7 @@ class CustomTransitionDestination extends Component {
     this.push = this.push.bind(this);
   }
 
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/CustomTransitionOrigin.js

@@ -8,7 +8,7 @@ class CustomTransitionOrigin extends Component {
     super(props);
     this.onClickNavigationIcon = this.onClickNavigationIcon.bind(this);
   }
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/KeyboardScreen.js

@@ -22,7 +22,7 @@ const LOREM_IPSUM = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, se
                     'dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 
 class KeyboardScreen extends Component {
-  static get options() {
+  static options() {
     return {
       bottomTabs: {
         drawBehind: true,

playground/src/screens/ModalScreen.js

@@ -9,7 +9,7 @@ const { Navigation } = require('react-native-navigation');
 const testIDs = require('../testIDs');
 
 class ModalScreen extends Component {
-  static get options() {
+  static options() {
     return {
       statusBar: {
         visible: false,

playground/src/screens/OptionsScreen.js

@@ -20,7 +20,7 @@ class OptionsScreen extends Component {
     Navigation.events().bindComponent(this);
   }
 
-  static get options() {
+  static options() {
     return {
       statusBar: {
         style: 'dark',

playground/src/screens/PushedScreen.js

@@ -7,7 +7,7 @@ const Button = require('./Button');
 const testIDs = require('../testIDs');
 
 class PushedScreen extends Component {
-  static get options() {
+  static options() {
     return {
       _statusBar: {
         visible: false,

playground/src/screens/ScrollViewScreen.js

@@ -9,7 +9,7 @@ const testIDs = require('../testIDs');
 const FAB = 'fab';
 
 class ScrollViewScreen extends Component {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/SearchScreen.js

@@ -20,7 +20,7 @@ for(let i = 0; i < 200; i++) {
 }
 
 class SearchControllerScreen extends Component {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/TextScreen.js

@@ -7,7 +7,7 @@ const { Navigation } = require('react-native-navigation');
 const testIDs = require('../testIDs');
 const Bounds = require('../components/Bounds');
 class TextScreen extends Component {
-  static get options() {
+  static options() {
     return {
       bottomTabs: {
         drawBehind: true,

playground/src/screens/TopTabOptionsScreen.js

@@ -5,7 +5,7 @@ const { View, Text, Button } = require('react-native');
 const { Navigation } = require('react-native-navigation');
 
 class TopTabOptionsScreen extends PureComponent {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/TopTabScreen.js

@@ -5,7 +5,7 @@ const { View, Text } = require('react-native');
 const FAB = 'fab';
 
 class TopTabScreen extends PureComponent {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/WelcomeScreen.js

@@ -8,7 +8,7 @@ const Button = require('./Button');
 const { Navigation } = require('react-native-navigation');
 
 class WelcomeScreen extends Component {
-  static get options() {
+  static options() {
     return {
       _statusBar: {
         backgroundColor: 'transparent',

playground/src/screens/complexlayouts/BottomTabSideMenuScreen.js

@@ -5,7 +5,7 @@ const { Navigation } = require('react-native-navigation');
 const testIDs = require('../../testIDs');
 
 class BottomTabSideMenuScreen extends Component {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

tsconfig-strict.json

@@ -4,20 +4,15 @@
     "allowSyntheticDefaultImports": false,
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
-    "alwaysStrict": true,
     "diagnostics": true,
     "forceConsistentCasingInFileNames": true,
     "importHelpers": true,
     "noEmitOnError": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitReturns": true,
-    "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "pretty": true,
-    "strictFunctionTypes": true,
-    "strictNullChecks": true,
-    "strict": true,
-    "noImplicitAny": false
+    "strict": true
   }
 }