Struggling to get working with react-navigation v5

[alexpchin]

"@react-navigation/bottom-tabs": "5.11.8",
"@react-navigation/native": "5.9.3",
"@react-navigation/stack": "5.14.3",
"react-navigation-shared-element": "^3.0.0",
"react-native-shared-element": "^0.7.0",

I have a fairly complex app with:

• RootStack -- ModalStack -- AppStack --- IncompleteStack --- LoggedInStack ---- TabStack ----- ExploreStack ----- InboxStack ----- UploadStack ----- ActivitiesStack ----- ProfileStack ----- SharedStack --- LoggedOutStack

I want to replace ExploreStack which has a screen that includes a feed of images like Instagram, where I want to open up an image with a zoom (like Instagram). I have replaced:

// const Stack = createStackNavigator();
const Stack = createSharedElementStackNavigator();

I've had to patch mentions of react-navigation-stack with:

diff --git a/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.d.ts b/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.d.ts
index 60ecd12..27f7168 100644
--- a/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.d.ts
+++ b/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.d.ts
@@ -1,5 +1,5 @@
 import { NavigationNavigator, NavigationProp, NavigationState } from "react-navigation";
-import { createStackNavigator } from "react-navigation-stack";
+import { createStackNavigator } from "@react-navigation/stack";
 declare function createSharedElementStackNavigator(routeConfigs: Parameters<typeof createStackNavigator>[0], stackConfig: Parameters<typeof createStackNavigator>[1], options?: {
     name?: string;
     debug?: boolean;
diff --git a/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.js b/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.js
index e3f4921..b6627aa 100644
--- a/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.js
+++ b/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.js
@@ -1,6 +1,6 @@
 import hoistNonReactStatics from "hoist-non-react-statics";
 import * as React from "react";
-import { createStackNavigator, CardAnimationContext, } from "react-navigation-stack";
+import { createStackNavigator, CardAnimationContext, } from "@react-navigation/stack";
 import SharedElementRendererContext from "../SharedElementRendererContext";
 import SharedElementRendererData from "../SharedElementRendererData";
 import { SharedElementRendererProxy } from "../SharedElementRendererProxy";
diff --git a/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.js.map b/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.js.map
index b8a314d..0077646 100644
--- a/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.js.map
+++ b/node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.js.map
@@ -1 +1,13 @@
-{"version":3,"file":"createSharedElementStackNavigator.js","sourceRoot":"","sources":["../../src/v4/createSharedElementStackNavigator.tsx"],"names":[],"mappings":"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","sourcesContent":["import hoistNonReactStatics from \"hoist-non-react-statics\";\nimport * as React from \"react\";\nimport {\n  NavigationNavigator,\n  NavigationProp,\n  NavigationState,\n} from \"react-navigation\";\nimport {\n  createStackNavigator,\n  CardAnimationContext,\n} from \"react-navigation-stack\";\n\nimport SharedElementRendererContext from \"../SharedElementRendererContext\";\nimport SharedElementRendererData, {\n  ISharedElementRendererData,\n} from \"../SharedElementRendererData\";\nimport { SharedElementRendererProxy } from \"../SharedElementRendererProxy\";\nimport SharedElementRendererView from \"../SharedElementRendererView\";\nimport createSharedElementScene from \"./createSharedElementScene\";\n\nlet _navigatorId = 1;\n\nfunction createSharedElementStackSceneNavigator(\n  routeConfigs: Parameters<typeof createStackNavigator>[0],\n  stackConfig: Parameters<typeof createStackNavigator>[1],\n  rendererData: ISharedElementRendererData,\n  navigatorId: string,\n  debug: boolean\n) {\n  //console.log('createSharedElementStackSceneNavigator...', navigatorId);\n\n  const wrappedRouteConfigs = {\n    ...routeConfigs,\n  };\n  for (const key in routeConfigs) {\n    let routeConfig: any = wrappedRouteConfigs[key];\n    const component =\n      typeof routeConfig === \"object\" && routeConfig.screen\n        ? routeConfig.screen\n        : routeConfig;\n    const wrappedComponent = createSharedElementScene(\n      component,\n      rendererData,\n      CardAnimationContext,\n      navigatorId,\n      debug\n    );\n    if (component === routeConfig) {\n      wrappedRouteConfigs[key] = wrappedComponent;\n    } else {\n      wrappedRouteConfigs[key] = {\n        ...routeConfig,\n        screen: wrappedComponent,\n      };\n    }\n  }\n\n  // Override `onTransitionStart` and `onTransitionEnd` and\n  // hook in into the transition lifecycle events.\n  const defaultNavigationOptions = stackConfig?.defaultNavigationOptions;\n  function defaultNavigationOptionsFn(props: any) {\n    let defaultNavigationOptionsResult =\n      typeof defaultNavigationOptions === \"function\"\n        ? defaultNavigationOptions(props)\n        : defaultNavigationOptions;\n    return {\n      ...defaultNavigationOptionsResult,\n      onTransitionStart: (transitionProps: { closing: boolean }) => {\n        rendererData.startTransition(\n          transitionProps.closing,\n          navigatorId,\n          rendererData.nestingDepth\n        );\n        if (\n          defaultNavigationOptionsResult &&\n          defaultNavigationOptionsResult.onTransitionStart\n        ) {\n          defaultNavigationOptionsResult.onTransitionStart(transitionProps);\n        }\n      },\n      onTransitionEnd: (transitionProps: { closing: boolean }) => {\n        rendererData.endTransition(\n          transitionProps.closing,\n          navigatorId,\n          rendererData.nestingDepth\n        );\n        if (\n          defaultNavigationOptionsResult &&\n          defaultNavigationOptionsResult.onTransitionEnd\n        ) {\n          defaultNavigationOptionsResult.onTransitionEnd(transitionProps);\n        }\n      },\n    };\n  }\n\n  return createStackNavigator(wrappedRouteConfigs, {\n    ...stackConfig,\n    defaultNavigationOptions:\n      typeof defaultNavigationOptions === \"function\"\n        ? defaultNavigationOptionsFn\n        : defaultNavigationOptionsFn({}),\n  });\n}\n\nfunction createSharedElementStackNavigator(\n  routeConfigs: Parameters<typeof createStackNavigator>[0],\n  stackConfig: Parameters<typeof createStackNavigator>[1],\n  options?: {\n    name?: string;\n    debug?: boolean;\n  }\n): NavigationNavigator<\n  Parameters<typeof createStackNavigator>[1],\n  NavigationProp<NavigationState>\n> {\n  const navigatorId =\n    options && options.name ? options.name : `stack${_navigatorId}`;\n  _navigatorId++;\n  const debug = options?.debug || false;\n\n  // Create a proxy which is later updated to link\n  // to the renderer\n  const rendererDataProxy = new SharedElementRendererProxy();\n\n  const SharedElementNavigator = createSharedElementStackSceneNavigator(\n    routeConfigs,\n    stackConfig,\n    rendererDataProxy,\n    navigatorId,\n    debug\n  );\n\n  class SharedElementRenderer extends React.Component {\n    private rendererData?: SharedElementRendererData;\n\n    componentDidMount() {\n      if (debug) {\n        rendererDataProxy.addDebugRef();\n      }\n    }\n\n    componentWillUnmount() {\n      if (debug) {\n        rendererDataProxy.releaseDebugRef();\n      }\n    }\n\n    render() {\n      return (\n        <SharedElementRendererContext.Consumer>\n          {(rendererData) => {\n            // In case a renderer is already present higher up in the chain\n            // then don't bother creating a renderer here, but use that one instead\n            if (!rendererData) {\n              this.rendererData =\n                this.rendererData || new SharedElementRendererData();\n              rendererDataProxy.source = this.rendererData;\n            } else {\n              rendererDataProxy.source = rendererData;\n            }\n            return (\n              <SharedElementRendererContext.Provider value={rendererDataProxy}>\n                <SharedElementNavigator {...this.props} />\n                {this.rendererData ? (\n                  <SharedElementRendererView rendererData={this.rendererData} />\n                ) : undefined}\n              </SharedElementRendererContext.Provider>\n            );\n          }}\n        </SharedElementRendererContext.Consumer>\n      );\n    }\n  }\n  hoistNonReactStatics(SharedElementRenderer, SharedElementNavigator);\n  // @ts-ignore\n  return SharedElementRenderer;\n}\n\nexport default createSharedElementStackNavigator;\n"]}
\ No newline at end of file
+{
+    "file": "createSharedElementStackNavigator.js",
+    "mappings": "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",
+    "names": [],
+    "sourceRoot": "",
+    "sources": [
+        "../../src/v4/createSharedElementStackNavigator.tsx"
+    ],
+    "sourcesContent": [
+        "import hoistNonReactStatics from \"hoist-non-react-statics\";\nimport * as React from \"react\";\nimport {\n  NavigationNavigator,\n  NavigationProp,\n  NavigationState,\n} from \"react-navigation\";\nimport {\n  createStackNavigator,\n  CardAnimationContext,\n} from \"@react-navigation/stack\";\n\nimport SharedElementRendererContext from \"../SharedElementRendererContext\";\nimport SharedElementRendererData, {\n  ISharedElementRendererData,\n} from \"../SharedElementRendererData\";\nimport { SharedElementRendererProxy } from \"../SharedElementRendererProxy\";\nimport SharedElementRendererView from \"../SharedElementRendererView\";\nimport createSharedElementScene from \"./createSharedElementScene\";\n\nlet _navigatorId = 1;\n\nfunction createSharedElementStackSceneNavigator(\n  routeConfigs: Parameters<typeof createStackNavigator>[0],\n  stackConfig: Parameters<typeof createStackNavigator>[1],\n  rendererData: ISharedElementRendererData,\n  navigatorId: string,\n  debug: boolean\n) {\n  //console.log('createSharedElementStackSceneNavigator...', navigatorId);\n\n  const wrappedRouteConfigs = {\n    ...routeConfigs,\n  };\n  for (const key in routeConfigs) {\n    let routeConfig: any = wrappedRouteConfigs[key];\n    const component =\n      typeof routeConfig === \"object\" && routeConfig.screen\n        ? routeConfig.screen\n        : routeConfig;\n    const wrappedComponent = createSharedElementScene(\n      component,\n      rendererData,\n      CardAnimationContext,\n      navigatorId,\n      debug\n    );\n    if (component === routeConfig) {\n      wrappedRouteConfigs[key] = wrappedComponent;\n    } else {\n      wrappedRouteConfigs[key] = {\n        ...routeConfig,\n        screen: wrappedComponent,\n      };\n    }\n  }\n\n  // Override `onTransitionStart` and `onTransitionEnd` and\n  // hook in into the transition lifecycle events.\n  const defaultNavigationOptions = stackConfig?.defaultNavigationOptions;\n  function defaultNavigationOptionsFn(props: any) {\n    let defaultNavigationOptionsResult =\n      typeof defaultNavigationOptions === \"function\"\n        ? defaultNavigationOptions(props)\n        : defaultNavigationOptions;\n    return {\n      ...defaultNavigationOptionsResult,\n      onTransitionStart: (transitionProps: { closing: boolean }) => {\n        rendererData.startTransition(\n          transitionProps.closing,\n          navigatorId,\n          rendererData.nestingDepth\n        );\n        if (\n          defaultNavigationOptionsResult &&\n          defaultNavigationOptionsResult.onTransitionStart\n        ) {\n          defaultNavigationOptionsResult.onTransitionStart(transitionProps);\n        }\n      },\n      onTransitionEnd: (transitionProps: { closing: boolean }) => {\n        rendererData.endTransition(\n          transitionProps.closing,\n          navigatorId,\n          rendererData.nestingDepth\n        );\n        if (\n          defaultNavigationOptionsResult &&\n          defaultNavigationOptionsResult.onTransitionEnd\n        ) {\n          defaultNavigationOptionsResult.onTransitionEnd(transitionProps);\n        }\n      },\n    };\n  }\n\n  return createStackNavigator(wrappedRouteConfigs, {\n    ...stackConfig,\n    defaultNavigationOptions:\n      typeof defaultNavigationOptions === \"function\"\n        ? defaultNavigationOptionsFn\n        : defaultNavigationOptionsFn({}),\n  });\n}\n\nfunction createSharedElementStackNavigator(\n  routeConfigs: Parameters<typeof createStackNavigator>[0],\n  stackConfig: Parameters<typeof createStackNavigator>[1],\n  options?: {\n    name?: string;\n    debug?: boolean;\n  }\n): NavigationNavigator<\n  Parameters<typeof createStackNavigator>[1],\n  NavigationProp<NavigationState>\n> {\n  const navigatorId =\n    options && options.name ? options.name : `stack${_navigatorId}`;\n  _navigatorId++;\n  const debug = options?.debug || false;\n\n  // Create a proxy which is later updated to link\n  // to the renderer\n  const rendererDataProxy = new SharedElementRendererProxy();\n\n  const SharedElementNavigator = createSharedElementStackSceneNavigator(\n    routeConfigs,\n    stackConfig,\n    rendererDataProxy,\n    navigatorId,\n    debug\n  );\n\n  class SharedElementRenderer extends React.Component {\n    private rendererData?: SharedElementRendererData;\n\n    componentDidMount() {\n      if (debug) {\n        rendererDataProxy.addDebugRef();\n      }\n    }\n\n    componentWillUnmount() {\n      if (debug) {\n        rendererDataProxy.releaseDebugRef();\n      }\n    }\n\n    render() {\n      return (\n        <SharedElementRendererContext.Consumer>\n          {(rendererData) => {\n            // In case a renderer is already present higher up in the chain\n            // then don't bother creating a renderer here, but use that one instead\n            if (!rendererData) {\n              this.rendererData =\n                this.rendererData || new SharedElementRendererData();\n              rendererDataProxy.source = this.rendererData;\n            } else {\n              rendererDataProxy.source = rendererData;\n            }\n            return (\n              <SharedElementRendererContext.Provider value={rendererDataProxy}>\n                <SharedElementNavigator {...this.props} />\n                {this.rendererData ? (\n                  <SharedElementRendererView rendererData={this.rendererData} />\n                ) : undefined}\n              </SharedElementRendererContext.Provider>\n            );\n          }}\n        </SharedElementRendererContext.Consumer>\n      );\n    }\n  }\n  hoistNonReactStatics(SharedElementRenderer, SharedElementNavigator);\n  // @ts-ignore\n  return SharedElementRenderer;\n}\n\nexport default createSharedElementStackNavigator;\n"
+    ],
+    "version": 3
+}
\ No newline at end of file
diff --git a/node_modules/react-navigation-shared-element/src/v4/createSharedElementStackNavigator.tsx b/node_modules/react-navigation-shared-element/src/v4/createSharedElementStackNavigator.tsx
index c01637c..0cd6f22 100644
--- a/node_modules/react-navigation-shared-element/src/v4/createSharedElementStackNavigator.tsx
+++ b/node_modules/react-navigation-shared-element/src/v4/createSharedElementStackNavigator.tsx
@@ -8,7 +8,7 @@ import {
 import {
   createStackNavigator,
   CardAnimationContext,
-} from "react-navigation-stack";
+} from "@react-navigation/stack";

 import SharedElementRendererContext from "../SharedElementRendererContext";
 import SharedElementRendererData, {

However, I'm still seeing The action 'NAVIGATE' with payload {"name":"Search"} was not handled by any navigator. errors.

Any ideas?

[timorss]

For me, the app crushes on startup

[rahulkasana]

Instead of patching mention of react-navigation-stack. What worked For me was resolved just now by this -

1. Delete node_modules/react-navigation-shared-element/build/v4 folder
2. Go to node_modules/react-navigation-shared-element/build/index.d.ts -> and comment v4 line // export { default as createSharedElementStackNavigator4 } from "./v4/createSharedElementStackNavigator";
3. Go to node_modules/react-navigation-shared-element/build/index.js -> and comment v4 line // export { default as createSharedElementStackNavigator4 } from "./v4/createSharedElementStackNavigator";
4. also watchman watch-del-all and then run app again

[thegitparticle]

Is there a proper fix for this or how to install the library for react-navigation v5 without the v4 parts?

It is annoying to keep making the changes @rahulkasana suggested everytime yarn is used.

[IjzerenHein]

A new major version has been released that now officially supports React Navigation 5 and 6. The previous 3.0.0 prerelease version was a bit clunky and I understand it would be confusing to use (it required both the v4 React Navigation and v5 dependencies to be installed, but that is no longer the case with the official version). Please view the latest documentation for more info. https://github.com/IjzerenHein/react-navigation-shared-element/releases/tag/v3.1.2 https://github.com/IjzerenHein/react-navigation-shared-element/blob/main/docs/API.md

[fukemy]

I got this error in navigation v6, Assume I have stack like this:

  const RoomDetailStack = () => {
    return <Stack.Navigator>
      <Stack.Screen name='RoomDetail' component={RoomDetailScreen} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='RoomUserList' component={ChatRoomUserList} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='ChatRoomInvite' component={ChatRoomInviteUser} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='GroupCallAppearance' component={GroupCallAppearanceScreen} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='RoomConfig' component={RoomConfigScreen} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='RoomFile' component={RoomFileScreen} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='RoomFileFilter' component={RoomFileFilterScreen} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='ChatSearchMessage' component={ChatSearchMessageScreen} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='ChatSearchMessageDetail' component={ChatSearchMessageDetailScreen} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='UserInfo' component={UserInfoScreen} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='ChatPwdConfig' component={ChatRoomPwdConfigScreen} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='ChatRoomCallHistory' component={ChatRoomCallHistoryScreen} options={{ ...defaultNavProps }}/>
      <Stack.Screen name='ShareRoomInviteLink' component={ShareRoomInviteLinkUrlScreen} options={{ ...defaultNavProps }}/>
    </Stack.Navigator>
  }

and in navigation container

<NavigationContainer ref={RootNavigation.navigationRef}
                          onReady={() => {
                            SplashScreen.hide()
                            RootNavigation.isReadyRef.current = true
                          }}>
                            <Stack.Navigator>
...
    <Stack.Screen name='RoomDetailStack' component={RoomDetailStack}
                                    options={{
                                      ...defaultNavProps,
                                      presentation: 'fullScreenModal',
                                      headerShown: false
                                    }} />
...

</Stack.Navigator>
</NavigationContainer>

after navigate to RoomDetailStack i got this error