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

 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';
 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;
   private readonly componentWrapper: ComponentWrapper;
 
   constructor() {
-    this.Element = Element;
-    this.TouchablePreview = TouchablePreview;
     this.componentWrapper = new ComponentWrapper();
     this.store = new Store();
     this.nativeEventsReceiver = new NativeEventsReceiver();
       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

 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
   };
 
   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

-export class UniqueIdProvider {
-  generate(prefix: string): string {
-    return `${prefix}+UNIQUE_ID`;
-  }
-}

lib/src/commands/Commands.test.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
     );
   });
   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');
     });
   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');
     });
   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');
     });
 
   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');
     });
   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');
     });
   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');
     });
   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');
     });
 
   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);
 
     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)
       );
     });
 
       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: [{}],
         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

 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

 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;
   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

-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 }', () => {
 
     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: []
       });
     });
         }
       });
       expect(result).toEqual({
+        id: 'myUniqueId',
         type: LayoutType.Component,
         data: { name: 'MyScreen', passProps: LayoutExamples.passProps },
         children: []
 
     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: []
     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);
     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);
     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);
     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);
   });
 
     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');
   displayMode: 'auto',
   primaryEdge: 'leading',
   minWidth: 150,
-  maxWidth: 300,
+  maxWidth: 300
 };
 
 const singleComponent = {
 
 const topTabs = {
   topTabs: {
-    children: [
-      singleComponent,
-      singleComponent,
-      singleComponent,
-      singleComponent,
-      stackWithTopBar
-    ],
+    children: [singleComponent, singleComponent, singleComponent, singleComponent, stackWithTopBar],
     options
   }
 };
           stackWithTopBar,
           {
             stack: {
-              children: [
-                singleComponent,
-                singleComponent,
-                singleComponent,
-                singleComponent,
-              ]
+              children: [singleComponent, singleComponent, singleComponent, singleComponent]
             }
           }
         ]
   splitView: {
     master: {
       stack: {
-        children: [
-          singleComponent,
-        ],
+        children: [singleComponent],
         options
-      },
+      }
     },
     detail: stackWithTopBar,
-    options: optionsSplitView,
-  },
+    options: optionsSplitView
+  }
 };
 
 const LayoutExamples = {

lib/src/commands/LayoutTreeParser.ts

-import * as _ from 'lodash';
 import { LayoutType } from './LayoutType';
 import { LayoutNode } from './LayoutTreeCrawler';
 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);
   }
 
     } 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) : []
 
   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)
   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)]
 
   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) : []
 
   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) : []
 
   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: []
 
   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: []
     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

 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

 
   describe(`register with redux store`, () => {
     class MyReduxComp extends React.Component<any> {
-      static get options() {
+      static options() {
         return { foo: 123 };
       }
       render() {
       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

-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) {
     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

 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> = {};
     };
   }
 
-  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

 } 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) {
 
   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

 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

 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

 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

 const testIDs = require('../testIDs');
 
 class CustomDialog extends PureComponent {
-  static get options() {
+  static options() {
     return {
       statusBarBackgroundColor: 'green'
     };

playground/src/screens/CustomTransitionDestination.js

     this.push = this.push.bind(this);
   }
 
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/CustomTransitionOrigin.js

     super(props);
     this.onClickNavigationIcon = this.onClickNavigationIcon.bind(this);
   }
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/KeyboardScreen.js

                     '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

 const testIDs = require('../testIDs');
 
 class ModalScreen extends Component {
-  static get options() {
+  static options() {
     return {
       statusBar: {
         visible: false,

playground/src/screens/OptionsScreen.js

     Navigation.events().bindComponent(this);
   }
 
-  static get options() {
+  static options() {
     return {
       statusBar: {
         style: 'dark',

playground/src/screens/PushedScreen.js

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

playground/src/screens/ScrollViewScreen.js

 const FAB = 'fab';
 
 class ScrollViewScreen extends Component {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/SearchScreen.js

 }
 
 class SearchControllerScreen extends Component {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/TextScreen.js

 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

 const { Navigation } = require('react-native-navigation');
 
 class TopTabOptionsScreen extends PureComponent {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/TopTabScreen.js

 const FAB = 'fab';
 
 class TopTabScreen extends PureComponent {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

playground/src/screens/WelcomeScreen.js

 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

 const testIDs = require('../../testIDs');
 
 class BottomTabSideMenuScreen extends Component {
-  static get options() {
+  static options() {
     return {
       topBar: {
         title: {

tsconfig-strict.json

     "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
   }
 }