fix: shared element flicker of same named screen transitions

(check example)

In createSharedElementScene.tsx, changed  function to use route.key instead of route.name when checking to see if the current route is active. Previously, all screens that had the same name inthe stack think that they are active when the navigation event fires. This correctly finds the one screen that is active to perform the correct transition. In SharedElementRendererData, when updating share elements, use  variable to correctly send the screen's 'sharedElements' function the showing state. This fixes a bug where, if a user went backwards to a screen of the same name,  would be true when it should be false. Please take a look at the example I added. These fixes now allow for properly navigating back and forthwith a screen of the same name.

Author: iamdavidmartin

example/src/App.tsx

@@ -33,6 +33,7 @@ import NestedStack from "./tests/NestedStack";
 import NestedStackV4 from "./tests/NestedStack.v4";
 import NestedStack2 from "./tests/NestedStack2";
 import NestedStack2V4 from "./tests/NestedStack2.v4";
+import PushPopSameScreen2 from "./tests/PushPopSameScreen2";
 import PushPopSameScreen from "./tests/PushPopSameScreen";
 import PushPopSameScreenV4 from "./tests/PushPopSameScreen.v4";
 import RevealFromBottomAndroid from "./tests/RevealFromBottomAndroid";
@@ -88,6 +89,12 @@ export default () => (
         Component={ForwardOnly}
       />
       <Test title="BackOnly" ComponentV4={BackOnlyV4} Component={BackOnly} />
+      <Test
+        title="PushPopSameScreen - v2"
+        ComponentV4={PushPopSameScreen2}
+        Component={PushPopSameScreen2}
+        issue={["v4"]}
+      />
       <Test
         title="PushPopSameScreen"
         ComponentV4={PushPopSameScreen}

example/src/screens/DetailScreenWithMore.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { StyleSheet, View, Image, Text } from "react-native";
+import { NavigationStackProp } from "react-navigation-stack";
+
+import { TouchableScale } from "../components";
+import { Item, defaultItem, items } from "../data";
+import { DetailComponent } from "./DetailComponent";
+import { getMoreDetailSharedElements } from "./getMoreDetailsSharedElements";
+import { SharedElement } from "react-navigation-shared-element";
+
+type Props = {
+  navigation: NavigationStackProp<any>;
+  route: any; // v5
+  modal: "none" | "full" | "sheet";
+  onPress?: ({
+    navigation,
+    item,
+    nextItem,
+  }: {
+    navigation: NavigationStackProp<any>;
+    item?: Item;
+    nextItem?: Item;
+  }) => void;
+};
+
+export const DetailScreenWithMore = (props: Props) => {
+  const { navigation, route, modal, onPress } = props;
+  const params = route?.params || navigation?.state?.params;
+  const item: Item = params?.item || defaultItem;
+  const content = (
+    <DetailComponent item={item} navigation={navigation} modal={modal} />
+  );
+
+  // get 3 items that aren't the item we're viewing now
+  const moreItems = items.filter((_i) => _i.id !== item.id).slice(0, 3);
+  const moreContent = (
+    <View
+      style={{
+        zIndex: 1000,
+        bottom: 20,
+        left: 0,
+        right: 0,
+        position: "absolute",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingHorizontal: 20,
+      }}
+    >
+      {moreItems.map((_i, index) => (
+        <TouchableScale
+          key={index}
+          style={styles.flex}
+          onPress={
+            onPress ? () => onPress({ navigation, nextItem: _i }) : undefined
+          }
+        >
+          <View style={styles.container}>
+            <SharedElement id={`${_i.id}.image`}>
+              <Image style={styles.image} source={_i.image} />
+            </SharedElement>
+            <SharedElement id={`${_i.id}.title`}>
+              <Text style={styles.text}>{`${_i.title}`}</Text>
+            </SharedElement>
+            <Text style={styles.caption}>tap me</Text>
+          </View>
+        </TouchableScale>
+      ))}
+    </View>
+  );
+  return (
+    <>
+      {moreContent}
+      {content}
+    </>
+  );
+};
+
+DetailScreenWithMore.navigationOptions = {
+  title: "Boys will be boys",
+};
+
+// Add the `sharedElements` function to the component, which
+// should return a list of shared-elements to transition.
+// The `sharedElements` function is called whenever you navigate
+// to or from this screen. You can use the provided navigation
+// states or trigger or disable animations.
+DetailScreenWithMore.sharedElements = getMoreDetailSharedElements;
+
+const styles = StyleSheet.create({
+  flex: {
+    width: 100,
+    backgroundColor: "white",
+    borderRadius: 50,
+    padding: 10,
+  },
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 15,
+  },
+  caption: {
+    fontSize: 15,
+    opacity: 0.5,
+  },
+  image: {
+    width: 50,
+    height: 30,
+    resizeMode: "cover",
+  },
+});

example/src/screens/getMoreDetailsSharedElements.ts

@@ -0,0 +1,19 @@
+import type { SharedElementsComponentConfig } from "react-navigation-shared-element";
+
+export const getMoreDetailSharedElements: SharedElementsComponentConfig = (
+  route,
+  otherRoute,
+  showing
+) => {
+  let item = undefined;
+  if (!showing && route.name == otherRoute.name) {
+    item = otherRoute.params.item;
+  } else {
+    item = route.params.item;
+  }
+  return [
+    { id: `${item.id}.image` },
+    { id: `${item.id}.title`, animation: "fade" },
+    { id: "close", animation: "fade" },
+  ];
+};

example/src/screens/index.ts

@@ -1,5 +1,6 @@
 export * from "./MainScreen";
 export * from "./DetailScreen";
+export * from "./DetailScreenWithMore";
 export * from "./DetailScreenImageBackground";
 export * from "./DetailPagerScreen";
 export * from "./ListScreen";

example/src/tests/PushPopSameScreen2.tsx

@@ -0,0 +1,62 @@
+import { NavigationContainer } from "@react-navigation/native";
+import * as React from "react";
+import { createSharedElementStackNavigator } from "react-navigation-shared-element";
+
+import { Item, items } from "../data";
+import { createScreen, DetailScreenWithMore } from "../screens";
+
+const name = "PushPopSameScreen2";
+
+const Stack = createSharedElementStackNavigator({
+  name,
+  debug: false,
+});
+
+const PressableDetailWithMoreScreen = createScreen(
+  DetailScreenWithMore,
+  undefined,
+  undefined,
+  {
+    onPress: (event: any) => {
+      let nextItem = event.nextItem;
+      if (event.item) {
+        const item: Item = event.item;
+        const itemIdx = items.indexOf(item);
+        nextItem = items[itemIdx < items.length - 2 ? itemIdx + 1 : 0];
+      } else {
+      }
+      event.navigation.push("Detail", {
+        item: nextItem,
+      });
+    },
+  }
+);
+
+export default () => (
+  <NavigationContainer>
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Detail"
+        component={PressableDetailWithMoreScreen}
+        initialParams={{ item: items[0] }}
+        sharedElements={(route, otherRoute, showing) => {
+          let item = undefined;
+
+          if (!showing && route.name == otherRoute.name) {
+            // we are naviating backwards
+            // to the same screen, so pick the params from the
+            // otherRoute (aka "from route")
+            item = otherRoute.params.item;
+          } else {
+            item = route.params.item;
+          }
+          return [
+            { id: `${item.id}.image` },
+            { id: `${item.id}.title`, animation: "fade" },
+            { id: "close", animation: "fade" },
+          ];
+        }}
+      />
+    </Stack.Navigator>
+  </NavigationContainer>
+);

src/SharedElementRendererData.ts

@@ -316,10 +316,18 @@ export default class SharedElementRendererData
     let sharedElements: SharedElementsStrictConfig | null = null;
     let isShowing = true;
     if (sceneAnimValue && scene && prevScene && route && prevRoute) {
-      sharedElements = getSharedElements(scene, prevScene, true);
+      sharedElements = getSharedElements(
+        scene,
+        prevScene,
+        !this.isTransitionClosing
+      );
       if (!sharedElements) {
         isShowing = false;
-        sharedElements = getSharedElements(prevScene, scene, false);
+        sharedElements = getSharedElements(
+          prevScene,
+          scene,
+          !this.isTransitionClosing
+        );
       }
     }
     if (this.sharedElements !== sharedElements) {

src/createSharedElementScene.tsx

@@ -56,7 +56,7 @@ function isActiveRoute(
     : // @ts-ignore: dangerouslyGetState is provided for navigation 5 compatibility
       navigation.dangerouslyGetState();
   const activeRoute = getActiveRoute(state);
-  return route.name === activeRoute.name;
+  return route.key === activeRoute.key;
 }
 
 function createSharedElementScene(