Fix component generator called multiple times (#6239)

Fix registered component generator function called multiple times. Apparently this hasn't resulted in actual bugs, but it's unpredictable behaviour which can easily lead to bugs and issues.

This commit caches registered components so they are created only once.

Fixes #6232

lib/src/commands/Commands.ts

-import cloneDeep from 'lodash/cloneDeep'
-import map from 'lodash/map'
+import cloneDeep from 'lodash/cloneDeep';
+import map from 'lodash/map';
 import { CommandsObserver } from '../events/CommandsObserver';
 import { NativeCommandsSender } from '../adapters/NativeCommandsSender';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';

lib/src/components/ComponentRegistry.test.tsx

 import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
 import { AppRegistryService } from '../adapters/AppRegistryService';
 import { ComponentProvider } from 'react-native';
+import * as React from 'react';
 
 const DummyComponent = () => null;
 
+class MyComponent extends React.Component<any, any> {}
+
 describe('ComponentRegistry', () => {
   let mockedStore: Store;
   let mockedComponentEventsObserver: ComponentEventsObserver;
   let mockedComponentWrapper: ComponentWrapper;
   let mockedAppRegistryService: AppRegistryService;
+  let componentWrapper: ComponentWrapper;
+  let store: Store;
   let uut: ComponentRegistry;
 
   beforeEach(() => {
     mockedComponentEventsObserver = mock(ComponentEventsObserver);
     mockedComponentWrapper = mock(ComponentWrapper);
     mockedAppRegistryService = mock(AppRegistryService);
+    store = instance(mockedStore);
+    componentWrapper = instance(mockedComponentWrapper);
 
     uut = new ComponentRegistry(
-      instance(mockedStore),
+      store,
       instance(mockedComponentEventsObserver),
-      instance(mockedComponentWrapper),
+      componentWrapper,
       instance(mockedAppRegistryService)
     );
   });
     uut.registerComponent('example.MyComponent.name', generator);
     expect(generator).toHaveBeenCalledTimes(0);
   });
+
+  it('should wrap component only once', () => {
+    componentWrapper.wrap = jest.fn();
+    let wrappedComponent: React.ComponentClass<any>;
+    store.hasRegisteredWrappedComponent = jest.fn(() => wrappedComponent !== undefined);
+    store.setWrappedComponent = jest.fn(() => wrappedComponent = MyComponent);
+
+    const generator: ComponentProvider = jest.fn(() => DummyComponent);
+    uut.registerComponent('example.MyComponent.name', generator)();
+    uut.registerComponent('example.MyComponent.name', generator)();
+
+    expect(componentWrapper.wrap).toHaveBeenCalledTimes(1);
+  });
 });

lib/src/components/ComponentRegistry.ts

     reduxStore?: any
   ): ComponentProvider {
     const NavigationComponent = () => {
-      return this.componentWrapper.wrap(
-        componentName.toString(),
-        componentProvider,
-        this.store,
-        this.componentEventsObserver,
-        concreteComponentProvider,
-        ReduxProvider,
-        reduxStore
-      );
+      if (this.store.hasRegisteredWrappedComponent(componentName)) {
+        return this.store.getWrappedComponent(componentName);
+      } else {
+        const wrappedComponent = this.componentWrapper.wrap(
+          componentName.toString(),
+          componentProvider,
+          this.store,
+          this.componentEventsObserver,
+          concreteComponentProvider,
+          ReduxProvider,
+          reduxStore
+        );
+        this.store.setWrappedComponent(componentName, wrappedComponent);
+        return wrappedComponent;
+      }
     };
     this.store.setComponentClassForName(componentName.toString(), NavigationComponent);
     this.appRegistryService.registerComponent(componentName.toString(), NavigationComponent);

lib/src/components/ComponentWrapper.test.tsx

     expect(store.getComponentInstance('component1')).toBeTruthy();
   });
 
+  it('Component generator is invoked only once', () => {
+    const componentGenerator = jest.fn(() => MyComponent);
+    uut.wrap(componentName, componentGenerator, store, componentEventsObserver);
+
+    expect(componentGenerator.mock.calls.length).toBe(1);
+  });
+
   describe(`register with redux store`, () => {
     class MyReduxComp extends React.Component<any> {
       static options() {

lib/src/components/ComponentWrapper.tsx

 import * as React from 'react';
 import { ComponentProvider } from 'react-native';
-import merge from 'lodash/merge'
+import merge from 'lodash/merge';
 import { polyfill } from 'react-lifecycles-compat';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
     }
 
     polyfill(WrappedComponent);
-    hoistNonReactStatics(WrappedComponent, concreteComponentProvider());
+    hoistNonReactStatics(WrappedComponent, concreteComponentProvider === OriginalComponentGenerator ? GeneratedComponentClass : concreteComponentProvider());
     return ReduxProvider ? this.wrapWithRedux(WrappedComponent, ReduxProvider, reduxStore) : WrappedComponent;
   }
 

lib/src/components/Store.ts

+import * as React from 'react';
 import { ComponentProvider } from 'react-native';
 import { IWrappedComponent } from './ComponentWrapper';
 
   private componentsByName: Record<string, ComponentProvider> = {};
   private propsById: Record<string, any> = {};
   private componentsInstancesById: Record<string, IWrappedComponent> = {};
+  private wrappedComponents: Record<string, React.ComponentClass<any>> = {};
 
   updateProps(componentId: string, props: any) {
     this.propsById[componentId] = props;
   getComponentInstance(id: string): IWrappedComponent {
     return this.componentsInstancesById[id];
   }
+
+  setWrappedComponent(componentName: string | number, wrappedComponent: React.ComponentClass<any>): void {
+    this.wrappedComponents[componentName] = wrappedComponent;
+  }
+
+  hasRegisteredWrappedComponent(componentName: string | number): boolean {
+    return componentName in this.wrappedComponents;
+  }
+
+  getWrappedComponent(componentName: string | number): React.ComponentClass<any> {
+    return this.wrappedComponents[componentName];
+  }
 }