revert(appbar): drop Appbar from this PR

callstack#4934 proposes an `actions` prop API for Appbar and callstack#5075 implements it,
so the children refactor here is superseded. Appbar sources, tests and
snapshots go back to their state on main.

Author: adam-sajko

src/components/Appbar/Appbar.tsx

@@ -3,8 +3,12 @@ import { Animated, StyleSheet, View } from 'react-native';
 import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import AppbarContent from './AppbarContent';
-import { AppbarContext } from './AppbarContext';
-import { getAppbarBackgroundColor, modeAppbarHeight } from './utils';
+import {
+  getAppbarBackgroundColor,
+  modeAppbarHeight,
+  renderAppbarContent,
+  filterAppbarActions,
+} from './utils';
 import type { AppbarModes, AppbarChildProps } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { Elevation, ThemeProp } from '../../types';
@@ -171,60 +175,45 @@ const Appbar = ({
 
   const isDark = typeof dark === 'boolean' ? dark : false;
 
+  const isCenterAlignedMode = isMode('center-aligned');
+
+  let shouldCenterContent = false;
+  let shouldAddLeftSpacing = false;
+  let shouldAddRightSpacing = false;
+  if (isCenterAlignedMode) {
+    let hasAppbarContent = false;
+    let leftItemsCount = 0;
+    let rightItemsCount = 0;
+
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement<AppbarChildProps>(child)) {
+        const isLeading = child.props.isLeading === true;
+
+        if (child.type === AppbarContent) {
+          hasAppbarContent = true;
+        } else if (isLeading || !hasAppbarContent) {
+          leftItemsCount++;
+        } else {
+          rightItemsCount++;
+        }
+      }
+    });
+
+    shouldCenterContent =
+      hasAppbarContent && leftItemsCount < 2 && rightItemsCount < 3;
+    shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0;
+    shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0;
+  }
+
+  const spacingStyle = styles.v3Spacing;
+
   const insets = {
     paddingBottom: safeAreaInsets?.bottom,
     paddingTop: safeAreaInsets?.top,
     paddingLeft: safeAreaInsets?.left,
     paddingRight: safeAreaInsets?.right,
   };
 
-  const appbarContextValue = React.useMemo(
-    () => ({ isDark, mode }),
-    [isDark, mode]
-  );
-
-  let content: React.ReactNode = children;
-
-  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(
-      (child): child is React.ReactElement<AppbarChildProps> =>
-        React.isValidElement(child)
-    );
-    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>
-    );
-  }
-
   return (
     <Surface
       style={[
@@ -240,9 +229,77 @@ const Appbar = ({
       container
       {...rest}
     >
-      <AppbarContext.Provider value={appbarContextValue}>
-        {content}
-      </AppbarContext.Provider>
+      {shouldAddLeftSpacing ? <View style={spacingStyle} /> : null}
+      {(isMode('small') || isMode('center-aligned')) && (
+        <>
+          {/* Render only the back action at first place  */}
+          {renderAppbarContent({
+            children,
+            isDark,
+            theme,
+            renderOnly: ['Appbar.BackAction'],
+            shouldCenterContent: isCenterAlignedMode || shouldCenterContent,
+          })}
+          {/* Render the rest of the content except the back action */}
+          {renderAppbarContent({
+            // Filter appbar actions - first leading icons, then trailing icons
+            children: [
+              ...filterAppbarActions(children, true),
+              ...filterAppbarActions(children),
+            ],
+            isDark,
+            theme,
+            renderExcept: ['Appbar.BackAction'],
+            shouldCenterContent: isCenterAlignedMode || shouldCenterContent,
+          })}
+        </>
+      )}
+      {(isMode('medium') || isMode('large')) && (
+        <View
+          style={[
+            styles.columnContainer,
+            isMode('center-aligned') && styles.centerAlignedContainer,
+          ]}
+        >
+          {/* Appbar top row with controls */}
+          <View style={styles.controlsRow}>
+            {/* Left side of row container, can contain AppbarBackAction or AppbarAction if it's leading icon  */}
+            {renderAppbarContent({
+              children,
+              isDark,
+              renderOnly: ['Appbar.BackAction'],
+              mode,
+            })}
+            {renderAppbarContent({
+              children: filterAppbarActions(children, true),
+              isDark,
+              renderOnly: ['Appbar.Action'],
+              mode,
+            })}
+            {/* Right side of row container, can contain other AppbarAction if they are not leading icons */}
+            <View style={styles.rightActionControls}>
+              {renderAppbarContent({
+                children: filterAppbarActions(children),
+                isDark,
+                renderExcept: [
+                  'Appbar',
+                  'Appbar.BackAction',
+                  'Appbar.Content',
+                  'Appbar.Header',
+                ],
+                mode,
+              })}
+            </View>
+          </View>
+          {renderAppbarContent({
+            children,
+            isDark,
+            renderOnly: ['Appbar.Content'],
+            mode,
+          })}
+        </View>
+      )}
+      {shouldAddRightSpacing ? <View style={spacingStyle} /> : null}
     </Surface>
   );
 };
@@ -253,6 +310,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 4,
   },
+  v3Spacing: {
+    width: 52,
+  },
   controlsRow: {
     flex: 1,
     flexDirection: 'row',
@@ -269,6 +329,9 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingTop: 8,
   },
+  centerAlignedContainer: {
+    paddingTop: 0,
+  },
 });
 
 export default Appbar;

src/components/Appbar/AppbarAction.tsx

@@ -7,9 +7,7 @@ import type {
   ViewStyle,
 } from 'react-native';
 
-import { useAppbarContext } from './AppbarContext';
 import { useInternalTheme } from '../../core/theming';
-import { white } from '../../theme/colors';
 import type { ThemeProp } from '../../types';
 import type { IconSource } from '../Icon';
 import IconButton from '../IconButton/IconButton';
@@ -42,7 +40,7 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
   /**
    * @supported Available in v5.x with theme version 3
    *
-   * Whether it's the leading button. Sets the icon color, and in `medium` and `large` modes places the action on the leading side of the controls row. In `small` and `center-aligned` modes children render in the order they are written.
+   * Whether it's the leading button. Note: If `Appbar.BackAction` is present, it will be rendered before any `isLeading` icons.
    */
   isLeading?: boolean;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
@@ -89,15 +87,12 @@ const AppbarAction = ({
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { colors } = theme;
-  const { isDark = false } = useAppbarContext() ?? {};
 
   const actionIconColor = iconColor
     ? iconColor
-    : isDark
-      ? white
-      : isLeading
-        ? colors.onSurface
-        : colors.onSurfaceVariant;
+    : isLeading
+      ? colors.onSurface
+      : colors.onSurfaceVariant;
 
   return (
     <IconButton

src/components/Appbar/AppbarContent.tsx

@@ -8,10 +8,8 @@ import type {
   ViewProps,
 } from 'react-native';
 
-import { useAppbarContext } from './AppbarContext';
 import { modeTextVariant } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import { white } from '../../theme/colors';
 import type { $RemoveChildren, ThemeProp } from '../../types';
 import Text from '../Typography/Text';
 import type { TextRef } from '../Typography/Text';
@@ -95,27 +93,21 @@ const AppbarContent = ({
   titleStyle,
   title,
   titleMaxFontSizeMultiplier,
-  mode: modeOverride,
+  mode = 'small',
   theme: themeOverrides,
   testID = 'appbar-content',
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { colors, fonts } = theme;
-  const { isDark = false, mode: contextMode } = useAppbarContext() ?? {};
-  const mode = modeOverride ?? contextMode ?? 'small';
 
-  const titleTextColor = titleColor
-    ? titleColor
-    : isDark
-      ? white
-      : colors.onSurface;
+  const titleTextColor = titleColor ? titleColor : colors.onSurface;
 
   const modeContainerStyles = {
     small: styles.v3DefaultContainer,
     medium: styles.v3MediumContainer,
     large: styles.v3LargeContainer,
-    'center-aligned': styles.v3CenterAlignedContainer,
+    'center-aligned': styles.v3DefaultContainer,
   };
 
   const variant = modeTextVariant[mode];
@@ -180,24 +172,17 @@ const styles = StyleSheet.create({
   },
   v3DefaultContainer: {
     paddingHorizontal: 0,
-    marginLeft: 12,
-  },
-  v3CenterAlignedContainer: {
-    paddingHorizontal: 0,
-    alignItems: 'center',
   },
   v3MediumContainer: {
     paddingHorizontal: 0,
     justifyContent: 'flex-end',
     paddingBottom: 24,
-    marginLeft: 12,
   },
   v3LargeContainer: {
     paddingHorizontal: 0,
     paddingTop: 36,
     justifyContent: 'flex-end',
     paddingBottom: 28,
-    marginLeft: 12,
   },
 });