react-navigation/react-navigation · error

Looks like you have nested a 'NavigationContainer' inside an

Error message

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.

What it means

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.

Source

Thrown at packages/core/src/BaseNavigationContainer.tsx:106

 * @param props.onUnhandledAction Callback which is called when an action is not handled.
 * @param props.theme Theme object for the UI elements.
 * @param props.children Child elements to render the content.
 * @param props.ref Ref object which refers to the navigation object containing helper methods.
 */
export function BaseNavigationContainer<ParamList extends {} = RootParamList>({
  initialState,
  onStateChange,
  onReady,
  onUnhandledAction,
  theme,
  children,
  ref,
}: Props<ParamList>) {
  const parent = React.use(NavigationStateContext);
  const independent = useNavigationIndependentTree();

  if (!parent.isDefault && !independent) {
    throw new Error(
      "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."
    );
  }

  const { state, getState, setState, subscribe, scheduleUpdate, flushUpdates } =
    useSyncState<State>(() =>
      getPartialState(initialState == null ? undefined : initialState)
    );

  const consumedParams = useLazyValue(() => new WeakMap<object, true>());

  const isFirstMountRef = React.useRef<boolean>(true);

  const navigatorKeyRef = React.useRef<string | undefined>(undefined);

  const getKey = React.useCallback(() => navigatorKeyRef.current, []);

  const setKey = React.useCallback((key: string) => {

View on GitHub (pinned to ab1319d6bb)

Solutions

1. Keep a single NavigationContainer at the app root and remove the nested one
2. If independence is intentional, wrap the nested container in <NavigationIndependentTree>...</NavigationIndependentTree>
3. 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

Example fix

// before
<NavigationContainer>
  <MyFeature /> // internally renders another NavigationContainer
</NavigationContainer>
// after
<NavigationIndependentTree>
  <NavigationContainer>
    <MyFeature />
  </NavigationContainer>
</NavigationIndependentTree>

// before mounting, assert only one container
if (useNavigationState && isInsideAnotherContainer) {
  wrapInIndependentTree = true; // render inside <NavigationIndependentTree>
}

try { renderApp() } catch (e) { if (String(e).includes("nested a 'NavigationContainer'")) { // render nested container inside NavigationIndependentTree } else throw e; }

When it happens

Trigger: 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>.

Common situations: 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.

Related errors

• Couldn't find values for tab animation. Are you inside a scr
• Couldn't find the bottom tab bar height. Are you inside a sc
• The '${customTabBarPosition}' position for the tab bar is no
• Couldn't find a route at index ${state.index}.
• Couldn't find a descriptor for route '${focusedRoute.key}'.

AI-assisted analysis of react-navigation/react-navigation@ab1319d6bb (2026-08-31). Data as JSON: /api/errors/8b414d228b0e208e. Report an issue: GitHub.