refactor: replace React.Children usage to more composition-friendly alternatives (#4989)

[matkoson]

Motivation

Several components inspect, classify, or mutate their children with React.Children + cloneElement. This makes composition hard: children must be direct, prop-mergeable elements of an expected type, so wrapping them (in a memo, a custom component, a helper) silently breaks the injected styling/spacing/behavior, and the injected props are not type-safe. The FAB Menu rewrite (#4963) addressed the same class of problem; this PR migrates the remaining offenders to typed props, context, and container-owned layout.

Approach

No child introspection. Each section component owns its own spacing/styling, cross-cutting state flows through context, and parents own layout (gap, padding, clipping) instead of cloning children. v6 alpha allows breaking changes without deprecation aliases, but user-visible output is preserved for documented usage; where a default that required child introspection is dropped, it is called out as a breaking change.

Changes

List.Accordion

• Removed the React.Children.map + cloneElement that injected paddingLeft and theme into expanded children.
• Added ListAccordionContext ({ leftIndent }). List.Item consumes it and indents its own container when it renders no left/right. Ripple/background stay full-width.
• Wrapped children now keep the indentation behavior. Output preserved for List.Item children (zero snapshot churn).

Dialog

• Removed the first-child cloneElement that injected marginTop: 24.
• The Dialog surface owns the top inset (paddingTop: 24); Dialog.Title and Dialog.Icon no longer add their own top offset. Dialog.Icon keeps a 16px bottom gap so icon-to-title spacing is preserved.

Dialog.Actions

• BREAKING CHANGE: no longer injects compact and uppercase into action buttons. Set them explicitly on each button. Inter-action spacing is now container gap.

Card

• Removed child counting, sibling displayName scanning, and the per-child cloneElement injection of index / total / siblings / borderRadiusStyles.
• The card clips inner content to its shape (overflow: hidden + combined border radius) instead of injecting corner styles into Card.Cover / Card.Title.
• BREAKING CHANGE: Card.Content now uses uniform vertical padding regardless of neighboring sections.

Card.Actions

• BREAKING CHANGE: no longer auto-assigns mode (previously outlined for the first action, contained for the rest) or compact. Set button props explicitly. Spacing is container gap.

ToggleButton.Row

• Removed the positional Children.count / Children.map / cloneElement that injected first/middle/last border radii into each button by index.
• Segmented styling now flows through ToggleButtonRowContext: the row clips a single rounded container and member ToggleButtons read the context flag to flatten their own corners, with hairline dividers between segments. Wrapped or conditionally-rendered ToggleButtons compose correctly.
• Visual output is unchanged from main — same corner.extraSmall container shape, same getToggleButtonColor selected fill, same outline divider. This is a pure composition refactor, not a restyle.
• Added an optional theme prop to ToggleButton.Row so it can resolve the theme itself instead of relying on injection.

Appbar

• Removed the React.Children.forEach count heuristic, the displayName-based child filtering, the action splitting, and the cloneElement injection of color / mode / theme into Appbar.Action / Appbar.BackAction / Appbar.Content.
• Added AppbarContext ({ isDark, mode }). Children read it and derive their own foreground color and title variant, instead of having props spliced in.
• small and center-aligned render their children directly in author order; the title's flex: 1 keeps trailing actions right-aligned and the center-aligned title centers itself. medium and large keep the two-row layout (controls row above a full-width title) by partitioning children for placement only — no props are injected.
• BREAKING CHANGE: Appbar children now render in the order they are written rather than being reordered to put the back action first. Place Appbar.BackAction before Appbar.Content and trailing Appbar.Actions after it, as shown in the docs. Children no longer receive injected color/mode/theme props; wrapping Appbar.Content/Appbar.Action in another element keeps working because the values come from context.

Out of scope (kept — idiomatic, not composition-hostile)

• Tooltip single-child trigger clone, Chip avatar-prop clone, TouchableRipple / TouchableRipple.native Children.only validation.

Breaking changes (summary)

BREAKING CHANGE: Appbar renders children in author order (no automatic back-action-first reordering) and no longer injects color/mode/theme — the shared values come from context; order Appbar.BackAction before Appbar.Content as in the docs.
BREAKING CHANGE: Card.Actions no longer injects mode/compact — pass mode="outlined"/mode="contained" (and compact if needed) explicitly.
BREAKING CHANGE: Dialog.Actions no longer injects compact/uppercase — set them explicitly.
BREAKING CHANGE: Card.Content uses uniform vertical padding regardless of neighbors.

Example migration (Card.Actions):

// before
<Card.Actions>
  <Button>Cancel</Button>
  <Button>Ok</Button>
</Card.Actions>

// after
<Card.Actions>
  <Button mode="outlined">Cancel</Button>
  <Button mode="contained">Ok</Button>
</Card.Actions>

Test plan

• yarn typecheck — pass
• yarn lint — pass
• Unit tests: scoped suites are green, with new characterization tests for List.Accordion (context indent), Dialog (surface top spacing, icon-to-title gap, no action-prop injection), Card (clip-to-shape, uniform Card.Content padding, no Card.Actions injection), ToggleButton.Row (segmented styling via context) and Appbar (context-provided values, author-order rendering). The full yarn test run has pre-existing RN Animated fake-timer baseline failures unrelated to this change — the identical set fails on main.
• Manual visual inspection, before (main) vs after, on iOS (iPhone 16 Pro) and Android (Pixel 9 Pro XL): Appbar (small / center-aligned / medium / large), List.Accordion, Dialog, Card, and ToggleButton.Row — no visual regressions. Screenshots below.

Visual verification

Manual before (main) vs after comparison on iOS (iPhone 16 Pro) and Android (Pixel 9 Pro XL) — no visual regressions.

Appbar — all four modes (Android)

Appbar — small + medium two-row (iOS)

Appbar — baseline vs after vs pixel diff (iOS, small): identical apart from the status-bar clock

List.Accordion · Dialog · ToggleButton.Row · Card — baseline (main) vs after (Android)

ToggleButton.Row + Card — base vs HEAD, zero pixel delta (Android)

Related: #4989
Reference: #4963

[Copilot]

Pull request overview

Refactors several UI components to avoid React.Children inspection and cloneElement, improving composition (wrapped children, custom components) by moving styling/spacing responsibility into contexts and container-owned layout.

Changes:

• Reworks ToggleButton.Row to use context-driven segmented styling (no positional cloning) and adds optional theming.
• Updates List.Accordion indentation behavior via context so wrapped List.Item children indent correctly without prop injection.
• Refactors Dialog, Dialog.Actions, and Card sections to remove child cloning, shifting spacing/shape behavior to containers and updating tests/examples accordingly.

Reviewed changes

Copilot reviewed 30 out of 30 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/components/ToggleButton/ToggleButtonRowContext.tsx	Adds context to signal segmented-row rendering to descendant toggle buttons.
src/components/ToggleButton/ToggleButtonRow.tsx	Replaces child cloning with container-owned segmented styling + context provider.
src/components/ToggleButton/ToggleButton.tsx	Consumes row context to adjust styling for segmented rows.
src/components/List/ListItem.tsx	Applies indentation based on accordion context when no left/right slots are provided.
src/components/List/ListAccordionContext.tsx	Adds context used to coordinate indentation behavior for accordion descendants.
src/components/List/ListAccordion.tsx	Removes child cloning and provides indentation behavior via context.
src/components/Dialog/DialogTitle.tsx	Removes title’s own top offset to defer inset ownership to Dialog container.
src/components/Dialog/DialogIcon.tsx	Removes icon top padding, preserves icon-to-title spacing, adds testID.
src/components/Dialog/DialogActions.tsx	Stops injecting props/styles into action buttons; uses container spacing.
src/components/Dialog/Dialog.tsx	Removes first-child margin injection and moves top inset to dialog surface padding.
src/components/Card/utils.tsx	Simplifies cover styling helper signature after removing index/total injection.
src/components/Card/CardTitle.tsx	Removes internal positional props previously injected by Card.
src/components/Card/CardCover.tsx	Removes internal positional props and updates cover style calculation callsite.
src/components/Card/CardContent.tsx	Makes vertical padding uniform (no neighbor/position-based heuristics).
src/components/Card/CardActions.tsx	Stops injecting props into buttons and switches to container spacing.
src/components/Card/Card.tsx	Removes child cloning/indexing, clips content to card shape via overflow + radius.
src/components/tests/ToggleButton.test.tsx	Adds characterization test for segmented-row context styling.
src/components/tests/ListAccordion.test.tsx	Adds tests covering accordion child indentation via context.
src/components/tests/Dialog.test.tsx	Updates tests for surface-owned top inset + no action prop injection.
src/components/tests/Card/Card.test.tsx	Adds tests for clipping, uniform content padding, and no prop injection.
src/components/tests/Card/snapshots/Card.test.tsx.snap	Updates snapshot for inner-container clipping/radius styling.
example/src/Examples/TeamDetails.tsx	Updates examples for Card.Actions breaking change (explicit button mode).
example/src/Examples/CardExample.tsx	Updates examples for Card.Actions breaking change (explicit button mode).

[Copilot]

Pull request overview

Copilot reviewed 30 out of 30 changed files in this pull request and generated 4 comments.

[Copilot]

Pull request overview

Copilot reviewed 30 out of 30 changed files in this pull request and generated 3 comments.

[MikitasK]

looks pretty solid, good job 👍
just a few points to address before merge:

[MikitasK]

maybe we should keep shouldAddLeftSpacing / shouldAddRightSpacing logic here & render 52px spacer on missing side? otherwise, I suppose, one-sided action would shift center-aligned title by 26px

Suggested change

	<AppbarContext.Provider value={appbarContextValue}>
	{content}
	</AppbarContext.Provider>
	{shouldAddLeftSpacing ? <View style={spacingStyle} /> : null}
	<AppbarContext.Provider value={appbarContextValue}>
	{content}
	</AppbarContext.Provider>
	{shouldAddRightSpacing ? <View style={spacingStyle} /> : null}

[MikitasK]

what do you think about replacing type-based partition with explicit leading / title / actions slots? Children.toArray can't see custom wrapper’s output, so <WrappedContent /> is still placed in trailing actions

so, we could add these props:

type Props = Omit<Partial<ViewProps>, 'style'> & {
  children?: React.ReactNode;
  leading?: React.ReactNode;
  title?: React.ReactNode;
  actions?: React.ReactNode;
  ...
};

const Appbar = ({
  children,
  leading,
  title,
  actions,
  ...
}: Props) => {

simplify this whole block:

Suggested change

	if (isMode('medium') || isMode('large')) {
	// Medium/large top app bars use a two-row layout: a controls row with the
	// leading and trailing actions above a full-width title row. React Native
	// flexbox has no `order`, so the title has to be separated from the actions
	// structurally. We partition the children by element identity and the
	// `isLeading` prop for layout only — nothing is injected into them; shared
	// values flow through `AppbarContext`.
	const items = React.Children.toArray(children).filter(
	React.isValidElement
	) as React.ReactElement<AppbarChildProps>[];
	const isAppbarContent = (child: React.ReactElement<AppbarChildProps>) => {
	const { type } = child;
	// React.memo(AppbarContent) wraps the component in an object whose
	// `.type` holds the original component — unwrap it so memoized
	// Content still lands in the title row.
	const innerType =
	typeof type === 'object' && type !== null && 'type' in type
	? (type as { type: unknown }).type
	: type;
	return innerType === AppbarContent;
	};
	const titleItems = items.filter(isAppbarContent);
	const actionItems = items.filter((child) => !isAppbarContent(child));
	const leadingActions = actionItems.filter((child) => child.props.isLeading);
	const trailingActions = actionItems.filter(
	(child) => !child.props.isLeading
	);
	content = (
	<View style={styles.columnContainer}>
	<View style={styles.controlsRow}>
	{leadingActions}
	<View style={styles.rightActionControls}>{trailingActions}</View>
	</View>
	{titleItems}
	</View>
	);
	}
	if (isMode('medium') || isMode('large')) {
	content = (
	<View style={styles.columnContainer}>
	<View style={styles.controlsRow}>
	{leading}
	<View style={styles.rightActionControls}>{actions}</View>
	</View>
	{title}
	</View>
	);
	}

and usage then might be smth like that:

<Appbar
  mode="medium"
  leading={<Appbar.BackAction onPress={goBack} />}
  title={<WrappedContent />}
  actions={<Appbar.Action icon="menu" onPress={openMenu} />}
/>

but that's a breaking API change for medium/large Appbars, so all existing usages & docs would need migration

[MikitasK]

wdyt about using child key here?

Suggested change

	<React.Fragment key={index}>
	<React.Fragment key={React.isValidElement(child) && child.key != null ? child.key : index}>

key={index} replaces child’s explicit reconciliation key, so reordering can remount stateful actions & lose their local state

[MikitasK]

same suggestion here

[JKobrynski]

About docs/6.x/docs/guides/migration.md - the PR changes no file under docs/. The four BREAKING CHANGE: lines in the PR body (Appbar author order and no injected color/mode/theme; Card.Actions no mode/compact; Dialog.Actions no compact/uppercase; Card.Content uniform padding) need an entry there; #5052 adds a section for changes far smaller than these. Two more belong in it: no longer reaches its children, and isLeading on Appbar.Action no longer affects order - its doc comment at AppbarAction.tsx:43-46 still promises otherwise.

[JKobrynski]

Appbar.BackAction lands on the right in mode="medium" and "large". AppbarBackAction doesn't accept isLeading — it sets it on the inner AppbarAction it renders (AppbarBackAction.tsx:69), so the element's own props.isLeading is undefined and it falls into trailingActions. By render, main puts the back button directly in the controls row; here both icons sit inside rightActionControls (justifyContent: 'flex-end'). AppbarExample.tsx:52-54 renders a BackAction by default, so the PR screenshots should show it.

Note that defaulting isLeading = true inside AppbarBackAction won't fix this: React 19 dropped defaultProps, so the authored element.props the partition reads stays undefined. Recognise AppbarBackAction by identity as AppbarContent already is, or move to explicit slots (below) — and please add a placement test.

[JKobrynski]

This now fails lint on main. The "avoid unnecessary type assertions" commit on main enabled @typescript-eslint/no-unsafe-type-assertion as an error; running current main's config over this file gives 194:19 Unsafe type assertion. (The pre-existing cast at :155 is fine — main added a disable comment for it.) A type predicate avoids the cast and the house rule both:

-const items = React.Children.toArray(children).filter(
-  React.isValidElement
-) as React.ReactElement<AppbarChildProps>[];
+const items = React.Children.toArray(children).filter(
+  (child): child is React.ReactElement<AppbarChildProps> =>
+    React.isValidElement(child)
+);

[adam-sajko]

Taking this over.

One question before I touch Appbar. @MikitasK suggested explicit leading / title / actions instead of partitioning children by type. That would also fix the Appbar.BackAction placement @JKobrynski found, but it is a new breaking change for medium and large, with a docs and usage migration on top of the four this PR already has.

The smaller fix is the one Julian already wrote: recognise AppbarBackAction by identity, same as AppbarContent, and keep the children API.

@satya164 do you want the identity fix in this PR, or slots?

Everything else I can take as is