react-navigation/react-navigation · error

A navigator can only contain 'Screen', 'Group' or 'React.Fra

Error message

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'.

What it means

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.

Source

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

              : groupKeys,
            // FIXME
            // @ts-expect-error: add validation
            child.type !== Group
              ? groupOptions
              : groupOptions != null
                ? [...groupOptions, child.props.screenOptions]
                : [child.props.screenOptions],
            typeof child.props.screenLayout === 'function'
              ? child.props.screenLayout
              : groupLayout
          )
        );

        return acc;
      }
    }

    throw new Error(
      `A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found ${
        React.isValidElement(child)
          ? `'${
              typeof child.type === 'string' ? child.type : child.type?.name
            }'${
              child.props != null &&
              typeof child.props === 'object' &&
              'name' in child.props &&
              child.props?.name
                ? ` for the screen '${child.props.name}'`
                : ''
            }`
          : typeof child === 'object'
            ? JSON.stringify(child)
            : `'${String(child)}'`
      }). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.`
    );
  }, []);

View on GitHub (pinned to ab1319d6bb)

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>

Example fix

// before
<Stack.Navigator>
  <View style={{flex:1}}>
    <Stack.Screen name="Home" component={Home} />
  </View>
</Stack.Navigator>
// after
<Stack.Navigator>
  <Stack.Screen name="Home" component={Home} />
</Stack.Navigator>

Defensive patterns

Strategy: validation

Validate before calling

function assertNavigatorChildren(children) {
  React.Children.forEach(children, (child) => {
    if (child == null) return;
    if (!React.isValidElement(child)) throw new Error('non-element child in navigator');
    const t = child.type;
    const ok = t === Screen || t === Group || t === React.Fragment;
    if (!ok) throw new Error('invalid navigator child: ' + (typeof t === 'string' ? t : t?.name));
  });
}

Type guard

function isNavigatorChild(el) {
  const t = el?.type;
  return t === Screen || t === Group || t === React.Fragment;
}

Try / catch

try { configureNavigator(jsx) } catch (e) { if (e.message.includes("only contain 'Screen', 'Group'")) { devLogInvalidChild(jsx); } throw e; }

Prevention

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

When it happens

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

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

Related errors

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