{"record":{"id":"6fcb33516f889996","repo":"react-navigation/react-navigation","slug":"a-navigator-can-only-contain-screen-group-or","errorCode":null,"errorMessage":"A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found ${...}). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.","messagePattern":"A navigator can only contain 'Screen', 'Group' or 'React\\.Fragment' as its direct children \\(found (.+?)\\)\\. To render this component in the navigator, pass it in the 'component' prop to 'Screen'\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/core/src/useNavigationBuilder.tsx","lineNumber":200,"sourceCode":"              : groupKeys,\n            // FIXME\n            // @ts-expect-error: add validation\n            child.type !== Group\n              ? groupOptions\n              : groupOptions != null\n                ? [...groupOptions, child.props.screenOptions]\n                : [child.props.screenOptions],\n            typeof child.props.screenLayout === 'function'\n              ? child.props.screenLayout\n              : groupLayout\n          )\n        );\n\n        return acc;\n      }\n    }\n\n    throw new Error(\n      `A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found ${\n        React.isValidElement(child)\n          ? `'${\n              typeof child.type === 'string' ? child.type : child.type?.name\n            }'${\n              child.props != null &&\n              typeof child.props === 'object' &&\n              'name' in child.props &&\n              child.props?.name\n                ? ` for the screen '${child.props.name}'`\n                : ''\n            }`\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  }, []);","sourceCodeStart":182,"sourceCodeEnd":218,"githubUrl":"https://github.com/react-navigation/react-navigation/blob/ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c/packages/core/src/useNavigationBuilder.tsx#L182-L218","documentation":"A navigator's direct children may only be <Screen>, <Group>, or React.Fragment. Anything else — a plain View, a custom component, text, an array element, or another navigator — is rejected because the builder cannot derive route configs from it.","triggerScenarios":"Rendering <View>, <Text>, custom wrapper components, or conditional JSX blocks directly inside <Stack.Navigator>; wrapping children in a component that returns non-Screen output; using array variables of mixed elements; forgetting to unwrap children of a Fragment with conditional expressions like {cond && <View/>}.","commonSituations":"Copy-pasting layout JSX inside a Navigator; creating an 'AuthWrapper' component around screens instead of using Groups; missing import causing a local View component to be treated as a child; upgrading react-navigation where the older lax behavior (or different component names) no longer works.","solutions":["Move any non-screen UI into the screen components themselves","Wrap related screens in <Group> instead of a custom container component","Use React.Fragment to group children conditionally","Verify the error's 'found X' name — if it is a Screen you expected, check imports so the real Screen from the navigator package is used","Extract reusable screen sets into a component that returns <Group>"],"exampleFix":"// before\n<Stack.Navigator>\n  <View style={{flex:1}}>\n    <Stack.Screen name=\"Home\" component={Home} />\n  </View>\n</Stack.Navigator>\n// after\n<Stack.Navigator>\n  <Stack.Screen name=\"Home\" component={Home} />\n</Stack.Navigator>","handlingStrategy":"validation","validationCode":"function assertNavigatorChildren(children) {\n  React.Children.forEach(children, (child) => {\n    if (child == null) return;\n    if (!React.isValidElement(child)) throw new Error('non-element child in navigator');\n    const t = child.type;\n    const ok = t === Screen || t === Group || t === React.Fragment;\n    if (!ok) throw new Error('invalid navigator child: ' + (typeof t === 'string' ? t : t?.name));\n  });\n}","typeGuard":"function isNavigatorChild(el) {\n  const t = el?.type;\n  return t === Screen || t === Group || t === React.Fragment;\n}","tryCatchPattern":"try { configureNavigator(jsx) } catch (e) { if (e.message.includes(\"only contain 'Screen', 'Group'\")) { devLogInvalidChild(jsx); } throw e; }","preventionTips":["Only place Screen, Group, or Fragment directly inside a Navigator","Move layout/UI markup inside screen components","Use Group for conditional/parameterized screen sets","Check imports so you render the real Screen from the navigator package","Read the error's 'found X' name to locate the offending component"],"tags":["react-navigation","navigator-children","jsx-structure"],"backgroundTag":"invalid-navigator-children","analyzedSha":"ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c","analyzedAt":"2026-08-31T14:46:19.520Z","schemaVersion":2},"datasetVersion":"2026-08-31T19:17:28.585Z"}