merge static memebers from wrapped components #3322

integration/remx/MyComponent.js

@@ -6,6 +6,10 @@ const { connect } = require('remx');
 const store = require('./MyStore');
 
 class MyComponent extends Component {
+  static options = {
+    title: 'MyComponent'
+  };
+
   render() {
     if (this.props.renderCountIncrement) {
       this.props.renderCountIncrement();

integration/remx/remx.test.js

@@ -1,6 +1,7 @@
 const React = require('react');
 require('react-native');
 const renderer = require('react-test-renderer');
+const { Navigation } = require('../../lib/dist/index');
 
 describe('remx support', () => {
   let MyConnectedComponent;
@@ -43,4 +44,11 @@ describe('remx support', () => {
 
     expect(renderCountIncrement).toHaveBeenCalledTimes(2);
   });
+
+  it('support for static members in connected components', () => {
+    expect(MyConnectedComponent.options).toEqual({ title: 'MyComponent' });
+
+    const registeredComponentClass = Navigation.componentRegistry.registerComponent('MyComponentName', () => MyConnectedComponent);
+    expect(registeredComponentClass.options).toEqual({ title: 'MyComponent' });
+  });
 });

lib/src/Navigation.ts

@@ -12,6 +12,7 @@ import { Element } from './adapters/Element';
 import { ComponentEventsObserver } from './events/ComponentEventsObserver';
 import { CommandsObserver } from './events/CommandsObserver';
 import { Constants } from './adapters/Constants';
+import { ComponentType } from 'react';
 
 export class Navigation {
   public readonly Element: React.ComponentType<{ elementId: any; resizeMode: any; }>;
@@ -48,8 +49,8 @@ export class Navigation {
    * Every navigation component in your app must be registered with a unique name.
    * The component itself is a traditional React component extending React.Component.
    */
-  public registerComponent(componentName: string, getComponentClassFunc: ComponentProvider): void {
-    this.componentRegistry.registerComponent(componentName, getComponentClassFunc);
+  public registerComponent(componentName: string, getComponentClassFunc: ComponentProvider): ComponentType<any> {
+    return this.componentRegistry.registerComponent(componentName, getComponentClassFunc);
   }
 
   /**

lib/src/components/ComponentRegistry.test.tsx

@@ -28,9 +28,10 @@ describe('ComponentRegistry', () => {
 
   it('registers component component by componentName into AppRegistry', () => {
     expect(mockRegistry).not.toHaveBeenCalled();
-    uut.registerComponent('example.MyComponent.name', () => MyComponent);
+    const result = uut.registerComponent('example.MyComponent.name', () => MyComponent);
     expect(mockRegistry).toHaveBeenCalledTimes(1);
     expect(mockRegistry.mock.calls[0][0]).toEqual('example.MyComponent.name');
+    expect(mockRegistry.mock.calls[0][1]()).toEqual(result);
   });
 
   it('saves the original component into the store', () => {

lib/src/components/ComponentRegistry.ts

@@ -1,5 +1,6 @@
 import { AppRegistry, ComponentProvider } from 'react-native';
 import { ComponentWrapper } from './ComponentWrapper';
+import { ComponentType } from 'react';
 
 export class ComponentRegistry {
   private store;
@@ -8,10 +9,11 @@ export class ComponentRegistry {
     this.store = store;
   }
 
-  registerComponent(componentName: string, getComponentClassFunc: ComponentProvider): void {
+  registerComponent(componentName: string, getComponentClassFunc: ComponentProvider): ComponentType<any> {
     const OriginalComponentClass = getComponentClassFunc();
     const NavigationComponent = ComponentWrapper.wrap(componentName, OriginalComponentClass, this.store);
     this.store.setOriginalComponentClassForName(componentName, OriginalComponentClass);
     AppRegistry.registerComponent(componentName, () => NavigationComponent);
+    return NavigationComponent;
   }
 }

lib/src/components/ComponentWrapper.test.tsx

@@ -16,6 +16,10 @@ describe('ComponentWrapper', () => {
   let childRef;
 
   class MyComponent extends React.Component {
+    static options = {
+      title: 'MyComponentTitle'
+    };
+
     render() {
       return <Text>{'Hello, World!'}</Text>;
     }
@@ -142,6 +146,11 @@ describe('ComponentWrapper', () => {
     expect(instance.originalComponentRef).toBeFalsy();
   });
 
+  it(`merges static members from wrapped component`, () => {
+    const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store) as any;
+    expect(NavigationComponent.options).toEqual({ title: 'MyComponentTitle' });
+  });
+
   describe('component lifecycle', () => {
     const componentDidAppearCallback = jest.fn();
     const componentDidDisappearCallback = jest.fn();

lib/src/components/ComponentWrapper.tsx

@@ -82,6 +82,8 @@ export class ComponentWrapper {
 
     ReactLifecyclesCompat.polyfill(WrappedComponent);
 
+    _.defaults(WrappedComponent, OriginalComponentClass);
+
     return WrappedComponent;
   }
 }

package.json

@@ -147,4 +147,3 @@
     }
   }
 }
-