{"record":{"id":"8b414d228b0e208e","repo":"react-navigation/react-navigation","slug":"looks-like-you-have-nested-a-navigationcontainer","errorCode":null,"errorMessage":"Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, wrap the container in 'NavigationIndependentTree' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.","messagePattern":"Looks like you have nested a 'NavigationContainer' inside another\\. Normally you need only one container at the root of the app, so this was probably an error\\. If this was intentional, wrap the container in 'NavigationIndependentTree' explicitly\\. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/core/src/BaseNavigationContainer.tsx","lineNumber":106,"sourceCode":" * @param props.onUnhandledAction Callback which is called when an action is not handled.\n * @param props.theme Theme object for the UI elements.\n * @param props.children Child elements to render the content.\n * @param props.ref Ref object which refers to the navigation object containing helper methods.\n */\nexport function BaseNavigationContainer<ParamList extends {} = RootParamList>({\n  initialState,\n  onStateChange,\n  onReady,\n  onUnhandledAction,\n  theme,\n  children,\n  ref,\n}: Props<ParamList>) {\n  const parent = React.use(NavigationStateContext);\n  const independent = useNavigationIndependentTree();\n\n  if (!parent.isDefault && !independent) {\n    throw new Error(\n      \"Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, wrap the container in 'NavigationIndependentTree' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.\"\n    );\n  }\n\n  const { state, getState, setState, subscribe, scheduleUpdate, flushUpdates } =\n    useSyncState<State>(() =>\n      getPartialState(initialState == null ? undefined : initialState)\n    );\n\n  const consumedParams = useLazyValue(() => new WeakMap<object, true>());\n\n  const isFirstMountRef = React.useRef<boolean>(true);\n\n  const navigatorKeyRef = React.useRef<string | undefined>(undefined);\n\n  const getKey = React.useCallback(() => navigatorKeyRef.current, []);\n\n  const setKey = React.useCallback((key: string) => {","sourceCodeStart":88,"sourceCodeEnd":124,"githubUrl":"https://github.com/react-navigation/react-navigation/blob/ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c/packages/core/src/BaseNavigationContainer.tsx#L88-L124","documentation":"NavigationStateContext supplies the parent navigator's state; a NavigationContainer expects to be the tree root (default context). If the container renders where a non-default parent state exists and NavigationIndependentTree is not used, it means the container is nested inside another container/navigator, so the library throws with guidance to either remove the nesting or opt into an independent tree.","triggerScenarios":"Rendering a second <NavigationContainer> inside another NavigationContainer's subtree; rendering a container inside a screen of a navigator that already has a container above it; forgetting to wrap the nested container in <NavigationIndependentTree>.","commonSituations":"Embeding a widget/library that internally renders its own NavigationContainer into an app that already has one; storybook previews mounted inside an existing container; composing feature modules each shipping their own container.","solutions":["Keep a single NavigationContainer at the app root and remove the nested one","If independence is intentional, wrap the nested container in <NavigationIndependentTree>...</NavigationIndependentTree>","If the nested container comes from a third-party component, render it in a separate root (Modal host, separate app surface) or patch it to use independent tree"],"exampleFix":"// before\n<NavigationContainer>\n  <MyFeature /> // internally renders another NavigationContainer\n</NavigationContainer>\n// after\n<NavigationIndependentTree>\n  <NavigationContainer>\n    <MyFeature />\n  </NavigationContainer>\n</NavigationIndependentTree>","handlingStrategy":"validation","validationCode":"// before mounting, assert only one container\nif (useNavigationState && isInsideAnotherContainer) {\n  wrapInIndependentTree = true; // render inside <NavigationIndependentTree>\n}","typeGuard":null,"tryCatchPattern":"try { renderApp() } catch (e) { if (String(e).includes(\"nested a 'NavigationContainer'\")) { // render nested container inside NavigationIndependentTree } else throw e; }","preventionTips":["Keep exactly one NavigationContainer at the app root","Audit third-party components for internal NavigationContainers","Wrap intentionally independent containers in NavigationIndependentTree","Use NavigationContainerIndependentContext-aware libraries in nested widgets"],"tags":["react-navigation","nested-container","navigationcontainer"],"backgroundTag":"nested-navigation-container","analyzedSha":"ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c","analyzedAt":"2026-08-31T14:46:19.520Z","schemaVersion":2},"datasetVersion":"2026-08-31T19:17:28.585Z"}