{"record":{"id":"f62224f1134b9398","repo":"react-navigation/react-navigation","slug":"got-both-component-and-children-props-for-the","errorCode":null,"errorMessage":"Got both 'component' and 'children' props for the screen '${name}'. You must pass only one of them.","messagePattern":"Got both 'component' and 'children' props for the screen '(.+?)'\\. You must pass only one of them\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/core/src/useNavigationBuilder.tsx","lineNumber":230,"sourceCode":"            }`\n          : typeof child === 'object'\n            ? JSON.stringify(child)\n            : `'${String(child)}'`\n      }). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.`\n    );\n  }, []);\n\n  if (process.env.NODE_ENV !== 'production') {\n    configs.forEach((config) => {\n      const { name, children, component, getComponent } = config.props;\n\n      if (\n        children != null ||\n        component !== undefined ||\n        getComponent !== undefined\n      ) {\n        if (children != null && component !== undefined) {\n          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(","sourceCodeStart":212,"sourceCodeEnd":248,"githubUrl":"https://github.com/react-navigation/react-navigation/blob/ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c/packages/core/src/useNavigationBuilder.tsx#L212-L248","documentation":"A Screen's content must come from exactly one source. Passing both a 'component' prop and 'children' (render function) is ambiguous, so the builder throws immediately when both are set.","triggerScenarios":"<Screen name=\"X\" component={X}>{() => <X/>}</Screen>; wrappers that always pass children while callers also pass component; merging prop objects where component and children coexist.","commonSituations":"Migrating between the component-prop style and children-as-function style and leaving remnants of both; higher-order wrappers that inject children; accidental spread of props containing children.","solutions":["Keep only one: delete the children render function or the component prop","Prefer component={...} (or getComponent) for standard screens","If using children, make it a function returning an element and remove component","Audit wrapper components that add children to Screen elements"],"exampleFix":"// before\n<Stack.Screen name=\"Profile\" component={Profile}>\n  {({ navigation }) => <Profile navigation={navigation} />}\n</Stack.Screen>\n// after\n<Stack.Screen name=\"Profile\" component={Profile} />","handlingStrategy":"validation","validationCode":"function validateScreenContentSource(props) {\n  if (props.children != null && props.component !== undefined) throw new Error('Screen uses both component and children');\n  if (props.children != null && props.getComponent !== undefined) throw new Error('Screen uses both children and getComponent');\n  if (props.component !== undefined && props.getComponent !== undefined) throw new Error('Screen uses both component and getComponent');\n}","typeGuard":"function hasSingleContentSource(p) {\n  const n = [p.children != null, p.component !== undefined, p.getComponent !== undefined].filter(Boolean).length;\n  return n <= 1;\n}","tryCatchPattern":"try { registerScreens(screens) } catch (e) { if (e.message.includes(\"both 'component' and 'children'\")) { stripChildrenProps(screens); } throw e; }","preventionTips":["Pick one content style per project (prefer component)","Never spread unvetted prop objects into Screen","Search codebase for Screen usages passing children plus component","Centralize screen creation in a helper that enforces one source"],"tags":["react-navigation","navigator-children","duplicate-props"],"backgroundTag":"invalid-navigator-children","analyzedSha":"ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c","analyzedAt":"2026-08-31T14:46:19.520Z","schemaVersion":2},"datasetVersion":"2026-08-31T19:17:28.585Z"}