react-navigation/react-navigation · error

Couldn't determine focus state. Is your component inside a s

Error message

Couldn't determine focus state. Is your component inside a screen in a navigator?

What it means

useIsFocused reads IsFocusedContext; the value is undefined when no screen in a navigator provides it. The hook throws so callers get an explicit setup error instead of always reading false focus. The component must be rendered inside a screen within a navigator.

Source

Thrown at packages/core/src/useIsFocused.tsx:19

import * as React from 'react';

export const FocusedRouteKeyContext = React.createContext<string | undefined>(
  undefined
);

export const IsFocusedContext = React.createContext<boolean | undefined>(
  undefined
);

/**
 * Hook to get the current focus state of the screen. Returns a `true` if screen is focused, otherwise `false`.
 * This can be used if a component needs to render something based on the focus state.
 */
export function useIsFocused(): boolean {
  const isFocused = React.use(IsFocusedContext);

  if (isFocused === undefined) {
    throw new Error(
      "Couldn't determine focus state. Is your component inside a screen in a navigator?"
    );
  }

  return isFocused;
}

View on GitHub (pinned to ab1319d6bb)

Solutions

Move the component (or move the useIsFocused call) into a component rendered inside a <Screen> within a navigator
In tests, wrap the component in a NavigationContainer with a navigator containing a Screen
For components used both places, split so only the navigator-mounted part uses useIsFocused
Provide an alternative prop for focus state when used outside navigation context

Example fix

// before
function App() { return <Badge />; } // Badge uses useIsFocused -> throws
// after
<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} /> // HomeScreen renders <Badge />
  </Stack.Navigator>
</NavigationContainer>

Defensive patterns

Strategy: try-catch

Validate before calling

null

Type guard

null

Try / catch

function useSafeIsFocused(): boolean {
  try {
    return useIsFocused();
  } catch {
    return false; // component used outside a navigator screen
  }
}

Prevention

Only call useIsFocused inside components mounted under a <Screen>
Wrap test renders in NavigationContainer + navigator + Screen
Split shared components so navigation-dependent logic lives in the navigator-mounted part
Use context-free alternatives (e.g. AppState) for root-level visibility needs

When it happens

Trigger: Calling useIsFocused in a component rendered outside any navigator screen (App root, sibling of NavigationContainer, portal, second root) or in a component used before/without any Screen ancestor.

Common situations: Shared components used both inside and outside navigators; tests rendering the component bare; overlay/portal components rendered at the app root.

Related errors

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