[test] Add test for pushing and popping the same screen

Author: IjzerenHein

example/src/App.tsx

@@ -31,6 +31,8 @@ import NestedStack from "./tests/NestedStack";
 import NestedStackV4 from "./tests/NestedStack.v4";
 import NestedStack2 from "./tests/NestedStack2";
 import NestedStack2V4 from "./tests/NestedStack2.v4";
+import PushPopSameScreen from "./tests/PushPopSameScreen";
+import PushPopSameScreenV4 from "./tests/PushPopSameScreen.v4";
 import RevealFromBottomAndroid from "./tests/RevealFromBottomAndroid";
 import RevealFromBottomAndroidV4 from "./tests/RevealFromBottomAndroid.v4";
 import ScaleFromCenterAndroid from "./tests/ScaleFromCenterAndroid";
@@ -82,6 +84,11 @@ export default () => (
         Component={ForwardOnly}
       />
       <Test title="BackOnly" ComponentV4={BackOnlyV4} Component={BackOnly} />
+      <Test
+        title="PushPopSameScreen"
+        ComponentV4={PushPopSameScreen}
+        Component={PushPopSameScreenV4}
+      />
       <Test
         title="NestedStack"
         ComponentV4={NestedStackV4}

example/src/screens/DetailScreen.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
+import { StyleSheet } from "react-native";
 import { NavigationStackProp } from "react-navigation-stack";
 
+import { TouchableScale } from "../components";
 import { Item, defaultItem } from "../data";
 import { DetailComponent } from "./DetailComponent";
 import { getDetailSharedElements } from "./getDetailSharedElements";
@@ -9,13 +11,32 @@ type Props = {
   navigation: NavigationStackProp<any>;
   route: any; // v5
   modal: "none" | "full" | "sheet";
+  onPress?: ({
+    navigation,
+    item,
+  }: {
+    navigation: NavigationStackProp<any>;
+    item: Item;
+  }) => void;
 };
 
 export const DetailScreen = (props: Props) => {
-  const { navigation, route, modal } = props;
+  const { navigation, route, modal, onPress } = props;
   const params = route?.params || navigation?.state?.params;
   const item: Item = params?.item || defaultItem;
-  return <DetailComponent item={item} navigation={navigation} modal={modal} />;
+  const content = (
+    <DetailComponent item={item} navigation={navigation} modal={modal} />
+  );
+  return onPress ? (
+    <TouchableScale
+      onPress={() => onPress({ navigation, item })}
+      style={StyleSheet.absoluteFill}
+    >
+      {content}
+    </TouchableScale>
+  ) : (
+    content
+  );
 };
 
 DetailScreen.navigationOptions = {

example/src/tests/PushPopSameScreen.tsx

@@ -0,0 +1,50 @@
+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, DetailScreen } from "../screens";
+
+const sameIdItems = items.map((item) => ({ ...item, id: "sameId" }));
+
+const name = "PushPopSameScreen";
+
+const Stack = createSharedElementStackNavigator({
+  name,
+  debug: true,
+});
+
+const PressableDetailScreen = createScreen(DetailScreen, undefined, undefined, {
+  onPress: (event: any) => {
+    const item: Item = event.item;
+    const itemIdx = sameIdItems.indexOf(item);
+    const nextItem =
+      sameIdItems[itemIdx < sameIdItems.length - 2 ? itemIdx + 1 : 0];
+    event.navigation.push("Detail", {
+      item: nextItem,
+    });
+  },
+});
+
+export default () => (
+  <NavigationContainer>
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Detail"
+        component={PressableDetailScreen}
+        initialParams={{ item: sameIdItems[0] }}
+        sharedElements={(route, otherRoute, showing) => {
+          const item = route.params.item;
+          return [
+            { id: `${item.id}.image`, animation: "fade" },
+            { id: `${item.id}.logo` },
+            { id: `${item.id}.gradient`, animation: "fade" },
+            { id: `${item.id}.title`, animation: "fade" },
+            { id: `${item.id}.description`, animation: "fade" },
+            { id: "close" },
+          ];
+        }}
+      />
+    </Stack.Navigator>
+  </NavigationContainer>
+);

example/src/tests/PushPopSameScreen.v4.tsx

@@ -0,0 +1,55 @@
+import { createAppContainer } from "react-navigation";
+import {
+  createSharedElementStackNavigator,
+  SharedElementsComponentConfig,
+} from "react-navigation-shared-element/build/v4";
+
+import { Item, items } from "../data";
+import { createScreen, DetailScreen } from "../screens";
+
+const sameIdItems = items.map((item) => ({ ...item, id: "sameId" }));
+
+const name = "PushPopSameScreen";
+
+const sharedElements: SharedElementsComponentConfig = (
+  route,
+  otherRoute,
+  showing
+) => {
+  const item = route.params.item;
+  return [
+    { id: `${item.id}.image`, animation: "fade" },
+    { id: `${item.id}.logo` },
+    { id: `${item.id}.gradient`, animation: "fade" },
+    { id: `${item.id}.title`, animation: "fade" },
+    { id: `${item.id}.description`, animation: "fade" },
+    { id: "close" },
+  ];
+};
+
+const StackNavigator = createSharedElementStackNavigator(
+  {
+    Detail: createScreen(DetailScreen, undefined, sharedElements, {
+      onPress: (event: any) => {
+        const item: Item = event.item;
+        const itemIdx = sameIdItems.indexOf(item);
+        const nextItem =
+          sameIdItems[itemIdx < sameIdItems.length - 2 ? itemIdx + 1 : 0];
+        event.navigation.push("Detail", {
+          item: nextItem,
+        });
+      },
+    }),
+  },
+  {
+    initialRouteParams: {
+      item: sameIdItems[0],
+    },
+  },
+  {
+    name,
+    debug: true,
+  }
+);
+
+export default createAppContainer(StackNavigator);