react-navigation/react-navigation · error

Got both 'component' and 'children' props for the screen '${

Error message

Got both 'component' and 'children' props for the screen '${name}'. You must pass only one of them.

What it means

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.

Source

Thrown at packages/core/src/useNavigationBuilder.tsx:230

            }`
          : typeof child === 'object'
            ? JSON.stringify(child)
            : `'${String(child)}'`
      }). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.`
    );
  }, []);

  if (process.env.NODE_ENV !== 'production') {
    configs.forEach((config) => {
      const { name, children, component, getComponent } = config.props;

      if (
        children != null ||
        component !== undefined ||
        getComponent !== undefined
      ) {
        if (children != null && component !== undefined) {
          throw new Error(
            `Got both 'component' and 'children' props for the screen '${name}'. You must pass only one of them.`
          );
        }

        if (children != null && getComponent !== undefined) {
          throw new Error(
            `Got both 'getComponent' and 'children' props for the screen '${name}'. You must pass only one of them.`
          );
        }

        if (component !== undefined && getComponent !== undefined) {
          throw new Error(
            `Got both 'component' and 'getComponent' props for the screen '${name}'. You must pass only one of them.`
          );
        }

        if (children != null && typeof children !== 'function') {
          throw new Error(

View on GitHub (pinned to ab1319d6bb)

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

Example fix

// before
<Stack.Screen name="Profile" component={Profile}>
  {({ navigation }) => <Profile navigation={navigation} />}
</Stack.Screen>
// after
<Stack.Screen name="Profile" component={Profile} />

Defensive patterns

Strategy: validation

Validate before calling

function validateScreenContentSource(props) {
  if (props.children != null && props.component !== undefined) throw new Error('Screen uses both component and children');
  if (props.children != null && props.getComponent !== undefined) throw new Error('Screen uses both children and getComponent');
  if (props.component !== undefined && props.getComponent !== undefined) throw new Error('Screen uses both component and getComponent');
}

Type guard

function hasSingleContentSource(p) {
  const n = [p.children != null, p.component !== undefined, p.getComponent !== undefined].filter(Boolean).length;
  return n <= 1;
}

Try / catch

try { registerScreens(screens) } catch (e) { if (e.message.includes("both 'component' and 'children'")) { stripChildrenProps(screens); } throw e; }

Prevention

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

When it happens

Trigger: <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.

Common situations: 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.

Related errors

AI-assisted analysis of react-navigation/react-navigation@ab1319d6bb (2026-08-31). Data as JSON: /api/errors/f62224f1134b9398. Report an issue: GitHub.