{"record":{"id":"534bf10f8b0c9140","repo":"react-navigation/react-navigation","slug":"couldn-t-determine-focus-state-is-your-component","errorCode":null,"errorMessage":"Couldn't determine focus state. Is your component inside a screen in a navigator?","messagePattern":"Couldn't determine focus state\\. Is your component inside a screen in a navigator\\?","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/core/src/useIsFocused.tsx","lineNumber":19,"sourceCode":"import * as React from 'react';\n\nexport const FocusedRouteKeyContext = React.createContext<string | undefined>(\n  undefined\n);\n\nexport const IsFocusedContext = React.createContext<boolean | undefined>(\n  undefined\n);\n\n/**\n * Hook to get the current focus state of the screen. Returns a `true` if screen is focused, otherwise `false`.\n * This can be used if a component needs to render something based on the focus state.\n */\nexport function useIsFocused(): boolean {\n  const isFocused = React.use(IsFocusedContext);\n\n  if (isFocused === undefined) {\n    throw new Error(\n      \"Couldn't determine focus state. Is your component inside a screen in a navigator?\"\n    );\n  }\n\n  return isFocused;\n}\n","sourceCodeStart":1,"sourceCodeEnd":26,"githubUrl":"https://github.com/react-navigation/react-navigation/blob/ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c/packages/core/src/useIsFocused.tsx#L1-L26","documentation":"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.","triggerScenarios":"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.","commonSituations":"Shared components used both inside and outside navigators; tests rendering the component bare; overlay/portal components rendered at the app root.","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"],"exampleFix":"// before\nfunction App() { return <Badge />; } // Badge uses useIsFocused -> throws\n// after\n<NavigationContainer>\n  <Stack.Navigator>\n    <Stack.Screen name=\"Home\" component={HomeScreen} /> // HomeScreen renders <Badge />\n  </Stack.Navigator>\n</NavigationContainer>","handlingStrategy":"try-catch","validationCode":"null","typeGuard":"null","tryCatchPattern":"function useSafeIsFocused(): boolean {\n  try {\n    return useIsFocused();\n  } catch {\n    return false; // component used outside a navigator screen\n  }\n}","preventionTips":["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"],"tags":["focus","context","hooks"],"backgroundTag":"missing-react-context-provider","analyzedSha":"ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c","analyzedAt":"2026-08-31T14:46:19.520Z","schemaVersion":2},"datasetVersion":"2026-08-31T19:17:28.585Z"}