{"record":{"id":"49428981984cb36b","repo":"react-navigation/react-navigation","slug":"got-an-invalid-value-for-children-prop-for-the-s","errorCode":null,"errorMessage":"Got an invalid value for 'children' prop for the screen '${name}'. It must be a function returning a React Element.","messagePattern":"Got an invalid value for 'children' prop for the screen '(.+?)'\\. It must be a function returning a React Element\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/core/src/useNavigationBuilder.tsx","lineNumber":248,"sourceCode":"          throw new Error(\n            `Got both 'component' and 'children' props for the screen '${name}'. You must pass only one of them.`\n          );\n        }\n\n        if (children != null && getComponent !== undefined) {\n          throw new Error(\n            `Got both 'getComponent' and 'children' props for the screen '${name}'. You must pass only one of them.`\n          );\n        }\n\n        if (component !== undefined && getComponent !== undefined) {\n          throw new Error(\n            `Got both 'component' and 'getComponent' props for the screen '${name}'. You must pass only one of them.`\n          );\n        }\n\n        if (children != null && typeof children !== 'function') {\n          throw new Error(\n            `Got an invalid value for 'children' prop for the screen '${name}'. It must be a function returning a React Element.`\n          );\n        }\n\n        if (component !== undefined && !isValidElementType(component)) {\n          throw new Error(\n            `Got an invalid value for 'component' prop for the screen '${name}'. It must be a valid React Component.`\n          );\n        }\n\n        if (getComponent !== undefined && typeof getComponent !== 'function') {\n          throw new Error(\n            `Got an invalid value for 'getComponent' prop for the screen '${name}'. It must be a function returning a React Component.`\n          );\n        }\n\n        if (typeof component === 'function') {\n          if (component.name === 'component') {","sourceCodeStart":230,"sourceCodeEnd":266,"githubUrl":"https://github.com/react-navigation/react-navigation/blob/ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c/packages/core/src/useNavigationBuilder.tsx#L230-L266","documentation":"When 'children' is provided to a Screen it must be a function returning a React element (the render-prop API). A non-function children — an element, string, or array — cannot be called by the builder, so it throws.","triggerScenarios":"<Screen name=\"X\"><MyComp /></Screen> (element as JSX child); passing a component class/object instead of a render function; spread props where children is pre-rendered JSX.","commonSituations":"Treating Screen like a regular React component and nesting the screen UI as a child; migrating from React Navigation v4/v5 styles where nesting sometimes worked; wrappers converting children to elements before passing them on.","solutions":["Pass children as a function: {() => <MyComp/>} or {(props) => ...}","Prefer component={MyComp} if no dynamic render is needed","Ensure wrappers do not pre-render children into elements","Add a runtime check that children is a function before rendering Screen"],"exampleFix":"// before\n<Stack.Screen name=\"About\"><About /></Stack.Screen>\n// after\n<Stack.Screen name=\"About\" component={About} />","handlingStrategy":"type-guard","validationCode":"function validateChildrenIsRenderFn(props) {\n  if (props.children != null && typeof props.children !== 'function') {\n    throw new Error('Screen children must be a function returning a React element');\n  }\n}","typeGuard":"function isRenderPropChildren(c) {\n  return c == null || typeof c === 'function';\n}","tryCatchPattern":"try { renderScreen(screenProps) } catch (e) { if (e.message.includes(\"invalid value for 'children' prop\")) { convertToComponentProp(screenProps); } throw e; }","preventionTips":["Never nest JSX directly inside Screen — use component or a function child","Remember Screen children is a render-prop API, not normal composition","Fix wrappers that pre-render children into elements","Use component={X} as the default and reach for children only when needed"],"tags":["react-navigation","navigator-children","prop-type"],"backgroundTag":"invalid-navigator-children","analyzedSha":"ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c","analyzedAt":"2026-08-31T14:46:19.520Z","schemaVersion":2},"datasetVersion":"2026-08-31T19:17:28.585Z"}