this isnt easy

lib/src/components/ComponentRegistry.ts

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

lib/src/components/ComponentWrapper.ts

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