From 12a615bd70112571a43f73463376c7a9cfc683ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danilo=20B=C3=BCrger?= <info@danilobuerger.de>
Date: Sun, 23 Aug 2020 10:32:48 +0200
Subject: [PATCH] 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.
---
 lib/src/components/ComponentRegistry.test.tsx | 33 ++++++++++++++-----
 lib/src/components/Store.ts                   |  1 +
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/lib/src/components/ComponentRegistry.test.tsx b/lib/src/components/ComponentRegistry.test.tsx
index 860bcdffb8a..8819ac9b492 100644
--- a/lib/src/components/ComponentRegistry.test.tsx
+++ b/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);
+  });
 });
diff --git a/lib/src/components/Store.ts b/lib/src/components/Store.ts
index c1e963c3525..8d1ff309c5d 100644
--- a/lib/src/components/Store.ts
+++ b/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;
   }