Recreate wrapped component on re-register component (#6498)

Currently when re-registering a component (calling `Navigation.registerComponent` with the same `componentName` more than once), the actual registered component does not get used if the component before that was already used. This is because on creation of the wrapped component it is cached. Therefor, we have to clear the wrapped component from the cache when registering a new component under the same name.

This also keeps the intended fix of #6239 (not calling the generator more than once), but restores the capability to replace a component.

Author: danilobuerger

lib/src/components/ComponentRegistry.test.tsx

@@ -5,12 +5,9 @@ import { ComponentWrapper } from './ComponentWrapper';
 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;
@@ -57,15 +54,35 @@ describe('ComponentRegistry', () => {
   });
 
   it('should wrap component only once', () => {
+    uut = new ComponentRegistry(
+      new Store(),
+      instance(mockedComponentEventsObserver),
+      componentWrapper,
+      instance(mockedAppRegistryService)
+    );
+
     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)();
+    const componentProvider = uut.registerComponent('example.MyComponent.name', generator);
+    componentProvider();
+    componentProvider();
 
     expect(componentWrapper.wrap).toHaveBeenCalledTimes(1);
   });
+
+  it('should recreate wrapped component on re-register component', () => {
+    uut = new ComponentRegistry(
+      new Store(),
+      instance(mockedComponentEventsObserver),
+      new ComponentWrapper(),
+      instance(mockedAppRegistryService)
+    );
+
+    const generator: ComponentProvider = () => DummyComponent;
+    const w1 = uut.registerComponent('example.MyComponent.name', generator)();
+    const w2 = uut.registerComponent('example.MyComponent.name', generator)();
+
+    expect(w1).not.toBe(w2);
+  });
 });

lib/src/components/Store.ts

@@ -27,6 +27,7 @@ export class Store {
   }
 
   setComponentClassForName(componentName: string | number, ComponentClass: ComponentProvider) {
+    delete this.wrappedComponents[componentName];
     this.componentsByName[componentName.toString()] = ComponentClass;
   }