react-navigation/react-navigation · error · Error

Couldn't find a parent screen. Is your component inside a sc

Error message

Couldn't find a parent screen. Is your component inside a screen in a navigator?

What it means

When useRoute is called with a name, React Navigation looks up a NamedRouteContextList provided by ancestor screens to find the named parent route. An undefined list means no parent screen exists at all — the component is not inside any navigator screen — so no named lookup can even be attempted.

Source

Thrown at packages/core/src/useRoute.tsx:65

    : RouteProp<ParamListBase>;

export function useRoute(name?: string) {
  if (name === undefined) {
    const route = React.use(NavigationRouteContext);

    if (route === undefined) {
      throw new Error(
        "Couldn't find a route object. Is your component inside a screen in a navigator?"
      );
    }

    return route;
  }

  const NamedRouteContextList = React.use(NamedRouteContextListContext);

  if (NamedRouteContextList === undefined) {
    throw new Error(
      "Couldn't find a parent screen. Is your component inside a screen in a navigator?"
    );
  }

  const NamedRouteContext = NamedRouteContextList[name];

  if (NamedRouteContext === undefined) {
    throw new Error(
      `Couldn't find a route named '${name}' in any of the parent screens. Is your component inside the correct screen?`
    );
  }

  const route = React.use(NamedRouteContext);

  return route;
}

View on GitHub (pinned to ab1319d6bb)

Solutions

Render the component inside a screen of a navigator so parent route contexts exist.
Call plain useRoute() if you only need the current screen's route rather than a named ancestor's.
Access a parent route via navigation.getParent() semantics or restructure so the consumer is a descendant of the desired screen.
In tests, wrap with a navigator and matching nested screens.

Example fix

// before
function RootHeader() {
  const parent = useRoute('Profile'); // no parent screen at all
  return <Text>{parent.params?.name}</Text>;
}

// after
function ProfileBody() { // rendered inside Profile screen
  const parent = useRoute('Profile');
  return <RootHeader name={parent.params?.name} />;
}

Defensive patterns

Strategy: type-guard

Validate before calling

// Ensure at least one ancestor screen before named lookup:
const currentRoute = navigationRef.current?.getCurrentRoute();
if (currentRoute == null) {
  console.warn('useRoute(name) requires being inside a navigator screen');
}

Type guard

function hasParentScreen(list: unknown): list is Record<string, React.Context<unknown>> {
  return list !== undefined && typeof list === 'object';
}

Try / catch

let parentRoute;
try {
  parentRoute = useRoute('ParentScreen');
} catch (e) {
  if (e.message.includes("Couldn't find a parent screen")) {
    parentRoute = useRoute(); // fall back to current route
  } else throw e;
}

Prevention

Render named-route consumers only inside screens of a mounted navigator.
Prefer plain useRoute() unless a specific ancestor route is required.
Document which components require navigator context and enforce it in code review.
Add storybook/test wrappers that supply a navigator.

When it happens

Trigger: Calling useRoute('SomeScreen') in a component rendered outside any navigator (no parent screen in the tree); calling it at the app root or above the NavigationContainer.

Common situations: Components trying to read a parent navigator's route from a global header or drawer wrapper rendered outside screens; nested navigators where the consumer was moved outside the outer navigator during refactor.

Related errors

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