react-navigation/react-navigation · error

Got an invalid value for 'children' prop for the screen '${n

Error message

Got an invalid value for 'children' prop for the screen '${name}'. It must be a function returning a React Element.

What it means

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.

Source

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

          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(
            `Got an invalid value for 'children' prop for the screen '${name}'. It must be a function returning a React Element.`
          );
        }

        if (component !== undefined && !isValidElementType(component)) {
          throw new Error(
            `Got an invalid value for 'component' prop for the screen '${name}'. It must be a valid React Component.`
          );
        }

        if (getComponent !== undefined && typeof getComponent !== 'function') {
          throw new Error(
            `Got an invalid value for 'getComponent' prop for the screen '${name}'. It must be a function returning a React Component.`
          );
        }

        if (typeof component === 'function') {
          if (component.name === 'component') {

View on GitHub (pinned to ab1319d6bb)

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

Example fix

// before
<Stack.Screen name="About"><About /></Stack.Screen>
// after
<Stack.Screen name="About" component={About} />

Defensive patterns

Strategy: type-guard

Validate before calling

function validateChildrenIsRenderFn(props) {
  if (props.children != null && typeof props.children !== 'function') {
    throw new Error('Screen children must be a function returning a React element');
  }
}

Type guard

function isRenderPropChildren(c) {
  return c == null || typeof c === 'function';
}

Try / catch

try { renderScreen(screenProps) } catch (e) { if (e.message.includes("invalid value for 'children' prop")) { convertToComponentProp(screenProps); } throw e; }

Prevention

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

When it happens

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

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

Related errors

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