{"record":{"id":"ae711e3d11a76aa0","repo":"react-navigation/react-navigation","slug":"useframesize-must-be-used-within-a-framesizeprovid","errorCode":null,"errorMessage":"useFrameSize must be used within a FrameSizeProvider","messagePattern":"useFrameSize must be used within a FrameSizeProvider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/elements/src/useFrameSize.tsx","lineNumber":35,"sourceCode":"type FrameContextType = {\n  getCurrent: () => Frame;\n  subscribe: (listener: Listener) => RemoveListener;\n  subscribeThrottled: (listener: Listener) => RemoveListener;\n};\n\nconst FrameContext = getNamedContext<FrameContextType | undefined>(\n  'FrameContext',\n  undefined\n);\n\nexport function useFrameSize<T>(\n  selector: (frame: Frame) => T,\n  throttle?: boolean\n): T {\n  const context = React.use(FrameContext);\n\n  if (context == null) {\n    throw new Error('useFrameSize must be used within a FrameSizeProvider');\n  }\n\n  const value = useSyncExternalStoreWithSelector(\n    throttle ? context.subscribeThrottled : context.subscribe,\n    context.getCurrent,\n    context.getCurrent,\n    selector\n  );\n\n  return value;\n}\n\ntype FrameSizeProviderProps = {\n  initialFrame: Frame;\n  render: (props: {\n    ref: React.RefObject<React.ComponentRef<typeof View> | null>;\n    onLayout: (event: LayoutChangeEvent) => void;\n  }) => React.ReactNode;","sourceCodeStart":17,"sourceCodeEnd":53,"githubUrl":"https://github.com/react-navigation/react-navigation/blob/ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c/packages/elements/src/useFrameSize.tsx#L17-L53","documentation":"useFrameSize reads FrameContext to subscribe to frame (window/screen) size updates with a selector. The context is provided by FrameSizeProvider, which react-navigation sets up internally around navigator content; when absent, the hook has nothing to subscribe to and throws.","triggerScenarios":"Calling useFrameSize() outside the provider tree — e.g. in the app root above NavigationContainer, in a modal/portal rendered outside the navigator, or in a component used before the internal FrameSizeProvider mounts (older/mismatched package versions where the provider isn't installed).","commonSituations":"Using useFrameSize-derived helpers (tabBarHeight, header defaults) in custom components placed outside navigator screens; version mismatch between @react-navigation/elements and navigator packages so the provider isn't rendered; tests rendering hooks without navigator wrappers.","solutions":["Render the consuming component inside a navigator (screen content) so FrameSizeProvider from react-navigation wraps it","Align @react-navigation/elements with your navigator package versions so the internal FrameSizeProvider is present","Wrap standalone usage manually in FrameSizeProvider with an explicit frame value","For tests/stories, wrap the component in a FrameSizeProvider mock provider"],"exampleFix":"// before\n// App root — outside any navigator\nconst tabHeight = useFrameSize(f => f.height); // throws\n\n// after\nfunction ScreenContent() { // rendered inside a navigator screen\n  const tabHeight = useFrameSize(f => f.height);\n  return <View />;\n}","handlingStrategy":"fallback","validationCode":"import { FrameContext } from '@react-navigation/elements';\nconst ctx = React.useContext(FrameContext);\nif (ctx == null) console.warn('useFrameSize used outside FrameSizeProvider');","typeGuard":"function useFrameSizeSafe<T>(selector: (f: Frame) => T, fallback: T): T {\n  const ctx = React.useContext(FrameContext);\n  return ctx == null ? fallback : selector(ctx.getCurrent());\n}","tryCatchPattern":"Not applicable — context hooks throw on render. Use a provider or guarded context read:\nconst width = React.useContext(FrameContext)?.getCurrent().width ?? fallbackWidth;","preventionTips":["Use the hook only inside navigator screen content where FrameSizeProvider is mounted","Keep @react-navigation/elements in sync with your navigator package versions","In tests/stories, wrap components in a FrameSizeProvider"],"tags":["react-navigation","react-context","hook-misuse","provider"],"backgroundTag":"missing-context-provider","analyzedSha":"ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c","analyzedAt":"2026-08-31T14:46:19.520Z","schemaVersion":2},"datasetVersion":"2026-08-31T19:17:28.585Z"}