tests pass initially

lib/src/adapters/Element.tsx

@@ -3,8 +3,8 @@ import * as PropTypes from 'prop-types';
 import { requireNativeComponent } from 'react-native';
 
 interface ElementProps {
-  elementId: any;
-  resizeMode: any;
+  elementId;
+  resizeMode;
 }
 
 let RNNElement: React.ComponentClass;

lib/src/adapters/NativeCommandsSender.ts

@@ -1,7 +1,7 @@
 import { NativeModules } from 'react-native';
 
 export class NativeCommandsSender {
-  private nativeCommandsModule: any;
+  private nativeCommandsModule;
 
   constructor() {
     this.nativeCommandsModule = NativeModules.RNNBridgeModule;

lib/src/adapters/NativeEventsReceiver.ts

@@ -1,25 +1,25 @@
 import { NativeModules, NativeEventEmitter } from 'react-native';
 
 export class NativeEventsReceiver {
-  private emitter: NativeEventEmitter;
+  private emitter;
 
   constructor() {
     this.emitter = new NativeEventEmitter(NativeModules.RNNEventEmitter);
   }
 
-  registerComponentDidAppear(callback: any) {
+  registerComponentDidAppear(callback) {
     this.emitter.addListener('RNN.componentDidAppear', callback);
   }
 
-  registerComponentDidDisappear(callback: any) {
+  registerComponentDidDisappear(callback) {
     this.emitter.addListener('RNN.componentDidDisappear', callback);
   }
 
-  registerAppLaunched(callback: any) {
+  registerAppLaunched(callback) {
     this.emitter.addListener('RNN.appLaunched', callback);
   }
 
-  registerNavigationButtonPressed(callback: any) {
+  registerNavigationButtonPressed(callback) {
     this.emitter.addListener('RNN.navigationButtonPressed', callback);
   }
 }

lib/src/commands/Commands.ts

@@ -2,9 +2,9 @@ import * as _ from 'lodash';
 import { OptionsProcessor } from './OptionsProcessor';
 
 export class Commands {
-  private nativeCommandsSender: any;
-  private layoutTreeParser: any;
-  private layoutTreeCrawler: any;
+  private nativeCommandsSender;
+  private layoutTreeParser;
+  private layoutTreeCrawler;
 
   constructor(nativeCommandsSender, layoutTreeParser, layoutTreeCrawler) {
     this.nativeCommandsSender = nativeCommandsSender;
@@ -12,7 +12,7 @@ export class Commands {
     this.layoutTreeCrawler = layoutTreeCrawler;
   }
 
-  setRoot(simpleApi: any) {
+  setRoot(simpleApi) {
     const input = _.cloneDeep(simpleApi);
     const layout = this.layoutTreeParser.parse(input);
     this.layoutTreeCrawler.crawl(layout);

lib/src/commands/LayoutTreeCrawler.test.ts

@@ -2,7 +2,7 @@ import { LayoutType } from './values/LayoutType';
 import { LayoutTreeCrawler } from './LayoutTreeCrawler';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider.mock';
 import { LayoutNode } from './values/LayoutNode';
-const Store = require('../components/Store');
+import { Store } from '../components/Store';
 
 describe('LayoutTreeCrawler', () => {
   let uut;

lib/src/commands/LayoutTreeParser.ts

@@ -7,7 +7,7 @@ export class LayoutTreeParser {
     this.parse = this.parse.bind(this);
   }
 
-  parse(api: any): LayoutNode {
+  parse(api): LayoutNode {
     if (api.topTabs) {
       return this._topTabs(api.topTabs);
     } else if (api.sideMenu) {

lib/src/commands/OptionsProcessor.test.ts

@@ -1,7 +1,7 @@
 import { OptionsProcessor } from './OptionsProcessor';
 
 describe('navigation options', () => {
-  let options: any;
+  let options;
 
   beforeEach(() => {
     options = {};

lib/src/commands/OptionsProcessor.ts

@@ -3,7 +3,7 @@ import { processColor } from 'react-native';
 import * as resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 
 export class OptionsProcessor {
-  static processOptions(options: any) {
+  static processOptions(options) {
     _.forEach(options, (value, key) => {
       if (!value) return
 

lib/src/components/ComponentRegistry.test.ts → lib/src/components/ComponentRegistry.test.tsx

@@ -1,32 +1,36 @@
-const React = require('react');
-const { Component } = require('react');
-const { AppRegistry, Text } = require('react-native');
-
-const renderer = require('react-test-renderer');
-const ComponentRegistry = require('./ComponentRegistry');
-const Store = require('./Store');
+import * as React from 'react';
+import { AppRegistry, Text } from 'react-native';
+import * as renderer from 'react-test-renderer';
+import { ComponentRegistry } from './ComponentRegistry';
+import { Store } from './Store';
 
 describe('ComponentRegistry', () => {
   let uut;
   let store;
+  let mockRegistry: any;
 
-  class MyComponent extends Component {
+  class MyComponent extends React.Component {
     render() {
-      return <Text>{'Hello, World!'}</Text>;
+      return (
+        <Text>
+          {
+            'Hello, World!'
+          }
+        </Text>);
     }
   }
 
   beforeEach(() => {
     store = new Store();
-    AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
+    mockRegistry = AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
     uut = new ComponentRegistry(store);
   });
 
   it('registers component component by componentName into AppRegistry', () => {
-    expect(AppRegistry.registerComponent).not.toHaveBeenCalled();
+    expect(mockRegistry).not.toHaveBeenCalled();
     uut.registerComponent('example.MyComponent.name', () => MyComponent);
-    expect(AppRegistry.registerComponent).toHaveBeenCalledTimes(1);
-    expect(AppRegistry.registerComponent.mock.calls[0][0]).toEqual('example.MyComponent.name');
+    expect(mockRegistry).toHaveBeenCalledTimes(1);
+    expect(mockRegistry.mock.calls[0][0]).toEqual('example.MyComponent.name');
   });
 
   it('saves the original component into the store', () => {
@@ -35,12 +39,12 @@ describe('ComponentRegistry', () => {
     const Class = store.getOriginalComponentClassForName('example.MyComponent.name');
     expect(Class).not.toBeUndefined();
     expect(Class).toEqual(MyComponent);
-    expect(Object.getPrototypeOf(Class)).toEqual(Component);
+    expect(Object.getPrototypeOf(Class)).toEqual(React.Component);
   });
 
   it('resulting in a normal component', () => {
     uut.registerComponent('example.MyComponent.name', () => MyComponent);
-    const Component = AppRegistry.registerComponent.mock.calls[0][1]();
+    const Component = mockRegistry.mock.calls[0][1]();
     const tree = renderer.create(<Component componentId="123" />);
     expect(tree.toJSON().children).toEqual(['Hello, World!']);
   });

lib/src/components/ComponentRegistry.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { AppRegistry } from 'react-native';
-import {ComponentWrapper} from './ComponentWrapper';
+import { AppRegistry, ComponentProvider } from 'react-native';
+import { ComponentWrapper } from './ComponentWrapper';
 
 export class ComponentRegistry {
-  private store: any;
+  private store;
 
   constructor(store) {
     this.store = store;
   }
 
-  registerComponent(componentName: string, getComponentClassFunc: ()=>React.Component) {
+  registerComponent(componentName: string, getComponentClassFunc: ComponentProvider) {
     const OriginalComponentClass = getComponentClassFunc();
     const NavigationComponent = ComponentWrapper.wrap(componentName, OriginalComponentClass, this.store);
     this.store.setOriginalComponentClassForName(componentName, OriginalComponentClass);

lib/src/components/ComponentWrapper.test.ts → lib/src/components/ComponentWrapper.test.tsx

@@ -1,23 +1,31 @@
-const React = require('react');
-const { Component } = require('react');
-
-const { Text } = require('react-native');
-const renderer = require('react-test-renderer');
-const ComponentWrapper = require('./ComponentWrapper');
-const Store = require('./Store');
+import * as React from 'react';
+import { Text } from 'react-native';
+import * as renderer from 'react-test-renderer';
+import { ComponentWrapper } from './ComponentWrapper';
+import { Store } from './Store';
+
+declare module 'react-test-renderer' {
+  interface ReactTestInstance {
+    [P: string]: any;
+  }
+}
 
 describe('ComponentWrapper', () => {
   let store;
   const componentName = 'example.MyComponent';
   let childRef;
 
-  class MyComponent extends Component {
+  class MyComponent extends React.Component {
     render() {
       return <Text>{'Hello, World!'}</Text>;
     }
   }
 
-  class TestParent extends Component {
+
+
+  class TestParent extends React.Component<any, { propsFromState: {} }> {
+    private ChildClass;
+
     constructor(props) {
       super(props);
       this.ChildClass = props.ChildClass;
@@ -25,9 +33,8 @@ describe('ComponentWrapper', () => {
     }
 
     render() {
-      const Child = this.ChildClass;
       return (
-        <Child
+        <this.ChildClass
           ref={(r) => childRef = r}
           componentId="component1"
           {...this.state.propsFromState}
@@ -46,7 +53,7 @@ describe('ComponentWrapper', () => {
     console.error = (a) => a;
     expect(() => {
       renderer.create(<NavigationComponent />);
-    }).toThrow(new Error('Component example.MyComponent does not have a componentId!'));
+    }).toThrowError('Component example.MyComponent does not have a componentId!');
     console.error = orig;
   });
 
@@ -132,7 +139,7 @@ describe('ComponentWrapper', () => {
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
     const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
     const instance = tree.getInstance();
-    expect(instance.originalComponentRef).toBeInstanceOf(Component);
+    expect(instance.originalComponentRef).toBeInstanceOf(React.Component);
     tree.unmount();
     expect(instance.originalComponentRef).toBeFalsy();
   });

lib/src/components/ComponentWrapper.ts

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import * as  _ from 'lodash';
-
-interface State {
-  componentId: string,
-  allProps: {}
-}
-
-export class ComponentWrapper {
-  static wrap(componentName: string, OriginalComponentClass: React.ComponentClass | React.StatelessComponent, store: any): React.ComponentClass {
-    class WrappedComponent extends React.Component<any, State> {
-      render() {
-        return <div />;
-      }
-    };
-
-    return WrappedComponent;
-  }
-}
-
-// this._saveComponentRef = this._saveComponentRef.bind(this);
-//         this._assertComponentId(props);
-//         this.state = {
-//           componentId: props.componentId,
-//           allProps: _.merge({}, props, store.getPropsForComponentId(props.componentId))
-//         };
-
-// _assertComponentId(props) {
-//   if (!props.componentId) {
-//     throw new Error(`Component ${componentName} does not have a componentId!`);
-//   }
-// }
-
-// _saveComponentRef(r) {
-//   this.originalComponentRef = r;
-// }
-
-// componentWillMount() {
-//   store.setRefForComponentId(this.state.componentId, this);
-// }
-
-// componentWillUnmount() {
-//   store.cleanId(this.state.componentId);
-// }
-
-// didAppear() {
-//   if (this.originalComponentRef.didAppear) {
-//     this.originalComponentRef.didAppear();
-//   }
-// }
-
-// didDisappear() {
-//   if (this.originalComponentRef.didDisappear) {
-//     this.originalComponentRef.didDisappear();
-//   }
-// }
-
-// onNavigationButtonPressed(buttonId) {
-//   if (this.originalComponentRef.onNavigationButtonPressed) {
-//     this.originalComponentRef.onNavigationButtonPressed(buttonId);
-//   }
-// }
-
-// componentWillReceiveProps(nextProps) {
-//   this.setState({
-//     allProps: _.merge({}, nextProps, store.getPropsForComponentId(this.state.componentId))
-//   });
-// }
-
-// ref= { this._saveComponentRef }
-//         {...this.state.allProps }
-//         componentId = { this.state.componentId }
-//         key = { this.state.componentId }

lib/src/components/ComponentWrapper.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import * as  _ from 'lodash';
+
+interface State {
+  componentId: string,
+  allProps: {}
+}
+
+export class ComponentWrapper {
+  static wrap(componentName: string, OriginalComponentClass: React.ComponentType<any>, store): React.ComponentType<any> {
+
+    class WrappedComponent extends React.Component<any, State> {
+
+      private originalComponentRef;
+
+      constructor(props) {
+        super(props);
+        this._saveComponentRef = this._saveComponentRef.bind(this);
+        this._assertComponentId(props);
+        this.state = {
+          componentId: props.componentId,
+          allProps: _.merge({}, props, store.getPropsForComponentId(props.componentId))
+        };
+      }
+
+      _assertComponentId(props) {
+        if (!props.componentId) {
+          throw new Error(`Component ${componentName} does not have a componentId!`);
+        }
+      }
+
+      _saveComponentRef(r) {
+        this.originalComponentRef = r;
+      }
+
+      componentWillMount() {
+        store.setRefForComponentId(this.state.componentId, this);
+      }
+
+      componentWillUnmount() {
+        store.cleanId(this.state.componentId);
+      }
+
+      didAppear() {
+        if (this.originalComponentRef.didAppear) {
+          this.originalComponentRef.didAppear();
+        }
+      }
+
+      didDisappear() {
+        if (this.originalComponentRef.didDisappear) {
+          this.originalComponentRef.didDisappear();
+        }
+      }
+
+      onNavigationButtonPressed(buttonId) {
+        if (this.originalComponentRef.onNavigationButtonPressed) {
+          this.originalComponentRef.onNavigationButtonPressed(buttonId);
+        }
+      }
+
+      componentWillReceiveProps(nextProps) {
+        this.setState({
+          allProps: _.merge({}, nextProps, store.getPropsForComponentId(this.state.componentId))
+        });
+      }
+
+      render() {
+        return (
+          <OriginalComponentClass
+            ref={this._saveComponentRef}
+            { ...this.state.allProps }
+            componentId={this.state.componentId}
+            key={this.state.componentId}
+          />
+        );
+      }
+    };
+
+    return WrappedComponent;
+  }
+}

lib/src/components/Lifecycle.ts

@@ -1,5 +1,5 @@
 export class Lifecycle {
-  private store: any;
+  private store;
 
   constructor(store) {
     this.store = store;

lib/src/events/PrivateEventsListener.test.ts

@@ -4,8 +4,8 @@ import { Store } from '../components/Store';
 
 describe('PrivateEventsListener', () => {
   let uut: PrivateEventsListener;
-  let nativeEventsReceiver: any;
-  let store: any;
+  let nativeEventsReceiver;
+  let store;
 
   beforeEach(() => {
     nativeEventsReceiver = new NativeEventsReceiver();

lib/src/events/PrivateEventsListener.ts

@@ -1,10 +1,10 @@
-import * as Lifecycle from '../components/Lifecycle';
+import { Lifecycle } from '../components/Lifecycle';
 
 export class PrivateEventsListener {
-  private nativeEventsReceiver: any;
-  private lifecycle: any;
+  private nativeEventsReceiver;
+  private lifecycle;
 
-  constructor(nativeEventsReceiver: any, store: any) {
+  constructor(nativeEventsReceiver, store) {
     this.nativeEventsReceiver = nativeEventsReceiver;
     this.lifecycle = new Lifecycle(store);
   }

lib/src/events/PublicEventsRegistry.ts

@@ -1,5 +1,5 @@
 export class PublicEventsRegistry {
-  private nativeEventsReceiver: any;
+  private nativeEventsReceiver;
 
   constructor(nativeEventsReceiver) {
     this.nativeEventsReceiver = nativeEventsReceiver;