fix: fixed navigation.setParams not working

Author: IjzerenHein

src/SharedElementRendererData.tsx

@@ -4,7 +4,6 @@ import {
   SharedElementsConfig,
   SharedElementAnimatedValue,
   SharedElementTransitionProps,
-  NavigationProp,
 } from './types';
 import { normalizeSharedElementsConfig } from './utils';
 
@@ -13,35 +12,27 @@ export type SharedElementRendererUpdateHandler = () => any;
 export interface ISharedElementRendererData {
   startTransition(animValue: SharedElementAnimatedValue): void;
   endTransition(): void;
-  willActivateScene(
-    sceneData: SharedElementSceneData,
-    navigation: NavigationProp
-  ): void;
-  didActivateScene(
-    sceneData: SharedElementSceneData,
-    navigation: NavigationProp
-  ): void;
+  willActivateScene(sceneData: SharedElementSceneData): void;
+  didActivateScene(sceneData: SharedElementSceneData): void;
 }
 
 function getSharedElements(
   sceneData: SharedElementSceneData,
-  navigation: NavigationProp,
-  otherNavigation: NavigationProp,
+  otherSceneData: SharedElementSceneData,
   show: boolean
 ): SharedElementsConfig | null {
   const { sharedElements } = sceneData.Component;
   if (!sharedElements) return null;
   // TODO push/pop distinction?
   return normalizeSharedElementsConfig(
-    sharedElements(navigation, otherNavigation, show)
+    sharedElements(sceneData.navigation, otherSceneData.navigation, show)
   );
 }
 
 export default class SharedElementRendererData
   implements ISharedElementRendererData {
   private sceneData: SharedElementSceneData | null = null;
   private prevSceneData: SharedElementSceneData | null = null;
-  private prevNavigation: NavigationProp | null = null;
   private updateSubscribers = new Set<SharedElementRendererUpdateHandler>();
   private sceneSubscription: SharedElementEventSubscription | null = null;
   private sharedElements: SharedElementsConfig = [];
@@ -55,25 +46,17 @@ export default class SharedElementRendererData
     // Nothing to do
   }
 
-  willActivateScene(
-    sceneData: SharedElementSceneData,
-    navigation: NavigationProp
-  ): void {
+  willActivateScene(sceneData: SharedElementSceneData): void {
     /*console.log(
       'SharedElementRendererData.willActivateScene: ',
       sceneData.name,
       ', previous: ',
       this.prevSceneData ? this.prevSceneData.name : ''
     );*/
-    if (!this.prevSceneData || !this.prevNavigation) return;
+    if (!this.prevSceneData) return;
     const sharedElements =
-      getSharedElements(sceneData, navigation, this.prevNavigation, true) ||
-      getSharedElements(
-        this.prevSceneData,
-        this.prevNavigation,
-        navigation,
-        false
-      );
+      getSharedElements(sceneData, this.prevSceneData, true) ||
+      getSharedElements(this.prevSceneData, sceneData, false);
     if (sharedElements && sharedElements.length) {
       // console.log('sharedElements: ', sharedElements, sceneData);
       this.sceneData = sceneData;
@@ -86,17 +69,13 @@ export default class SharedElementRendererData
     }
   }
 
-  didActivateScene(
-    sceneData: SharedElementSceneData,
-    navigation: NavigationProp
-  ): void {
+  didActivateScene(sceneData: SharedElementSceneData): void {
     //console.log('SharedElementRendererData.didActivateScene: ', sceneData.name);
     if (this.sceneSubscription) {
       this.sceneSubscription.remove();
       this.sceneSubscription = null;
     }
     this.prevSceneData = sceneData;
-    this.prevNavigation = navigation;
     if (this.sceneData) {
       this.sceneData = null;
       if (this.sharedElements.length) {

src/SharedElementRendererProxy.tsx

@@ -1,7 +1,7 @@
 import SharedElementRendererData, {
   ISharedElementRendererData,
 } from './SharedElementRendererData';
-import { SharedElementAnimatedValue, NavigationProp } from './types';
+import { SharedElementAnimatedValue } from './types';
 import SharedElementSceneData from './SharedElementSceneData';
 
 export class SharedElementRendererProxy implements ISharedElementRendererData {
@@ -27,30 +27,24 @@ export class SharedElementRendererProxy implements ISharedElementRendererData {
     return this.data.endTransition();
   }
 
-  willActivateScene(
-    sceneData: SharedElementSceneData,
-    navigation: NavigationProp
-  ) {
+  willActivateScene(sceneData: SharedElementSceneData) {
     if (!this.data) {
       console.warn(
         'SharedElementRendererProxy.willActivateScene called before Proxy was initialized'
       );
       return;
     }
-    return this.data.willActivateScene(sceneData, navigation);
+    return this.data.willActivateScene(sceneData);
   }
 
-  didActivateScene(
-    sceneData: SharedElementSceneData,
-    navigation: NavigationProp
-  ) {
+  didActivateScene(sceneData: SharedElementSceneData) {
     if (!this.data) {
       console.warn(
         'SharedElementRendererProxy.didActivateScene called before Proxy was initialized'
       );
       return;
     }
-    return this.data.didActivateScene(sceneData, navigation);
+    return this.data.didActivateScene(sceneData);
   }
 
   get source(): SharedElementRendererData | null {

src/SharedElementSceneData.tsx

@@ -2,6 +2,7 @@ import {
   SharedElementNode,
   SharedElementEventSubscription,
   SharedElementSceneComponent,
+  NavigationProp,
 } from './types';
 
 export type SharedElementSceneUpdateHandlerEventType =
@@ -23,9 +24,14 @@ export default class SharedElementSceneData {
   } = {};
   public readonly Component: SharedElementSceneComponent;
   public readonly name: string;
+  public navigation: NavigationProp;
 
-  constructor(Component: SharedElementSceneComponent) {
+  constructor(
+    Component: SharedElementSceneComponent,
+    navigation: NavigationProp
+  ) {
     this.Component = Component;
+    this.navigation = navigation;
     this.name =
       Component.displayName ||
       Component.name ||

src/createSharedElementScene.tsx

@@ -42,7 +42,8 @@ function createSharedElementScene(
       [key: string]: SharedElementEventSubscription;
     } = {};
     private sceneData: SharedElementSceneData = new SharedElementSceneData(
-      Component
+      Component,
+      this.props.navigation
     );
 
     componentDidMount() {
@@ -74,21 +75,24 @@ function createSharedElementScene(
       );
     }
 
+    componentDidUpdate() {
+      this.sceneData.navigation = this.props.navigation;
+    }
+
     private onSetRef = (ref: any) => {
       this.sceneData.setAncestor(nodeFromRef(ref));
     };
 
     private onWillFocus = () => {
-      const { navigation } = this.props;
-      rendererData.willActivateScene(this.sceneData, navigation);
+      rendererData.willActivateScene(this.sceneData);
     };
 
     private onDidFocus = () => {
       const { navigation } = this.props;
       const activeRoute = getActiveRouteState(navigation.state);
       if (navigation.state.routeName === activeRoute.routeName) {
         // console.log('onDidFocus: ', this.sceneData.name, navigation);
-        rendererData.didActivateScene(this.sceneData, navigation);
+        rendererData.didActivateScene(this.sceneData);
       }
     };
   }