fix: correct center-aligned mode in AppbarHeader

src/components/Appbar/Appbar.tsx

@@ -132,7 +132,7 @@ const Appbar = ({
   let shouldCenterContent = false;
   let shouldAddLeftSpacing = false;
   let shouldAddRightSpacing = false;
-  if (Platform.OS === 'ios') {
+  if (isV3 || Platform.OS === 'ios') {
     let hasAppbarContent = false;
     let leftItemsCount = 0;
     let rightItemsCount = 0;
@@ -150,10 +150,11 @@ const Appbar = ({
     });
 
     shouldCenterContent =
-      !isV3 && hasAppbarContent && leftItemsCount < 2 && rightItemsCount < 2;
-    shouldAddLeftSpacing = !isV3 && shouldCenterContent && leftItemsCount === 0;
-    shouldAddRightSpacing =
-      !isV3 && shouldCenterContent && rightItemsCount === 0;
+      hasAppbarContent &&
+      leftItemsCount < 2 &&
+      rightItemsCount < (isV3 ? 3 : 2);
+    shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0;
+    shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0;
   }
 
   const isMode = (modeToCompare: AppbarModes) => {
@@ -169,6 +170,8 @@ const Appbar = ({
     [children]
   );
 
+  const spacingStyle = isV3 ? styles.v3Spacing : styles.spacing;
+
   return (
     <Surface
       style={[
@@ -183,15 +186,16 @@ const Appbar = ({
       elevation={elevation as MD3Elevation}
       {...rest}
     >
-      {shouldAddLeftSpacing ? <View style={styles.spacing} /> : null}
-      {(!isV3 || isMode('small')) &&
+      {shouldAddLeftSpacing ? <View style={spacingStyle} /> : null}
+      {(!isV3 || isMode('small') || isMode('center-aligned')) &&
         renderAppbarContent({
           children,
           isDark,
           isV3,
-          shouldCenterContent,
+          shouldCenterContent:
+            (isV3 && !isMode('small')) ?? shouldCenterContent,
         })}
-      {(isMode('medium') || isMode('large') || isMode('center-aligned')) && (
+      {(isMode('medium') || isMode('large')) && (
         <View
           style={[
             styles.columnContainer,
@@ -236,13 +240,12 @@ const Appbar = ({
             children,
             isDark,
             isV3,
-            shouldCenterContent: isMode('center-aligned'),
             renderOnly: [AppbarContent],
             mode,
           })}
         </View>
       )}
-      {shouldAddRightSpacing ? <View style={styles.spacing} /> : null}
+      {shouldAddRightSpacing ? <View style={spacingStyle} /> : null}
     </Surface>
   );
 };
@@ -256,6 +259,9 @@ const styles = StyleSheet.create({
   spacing: {
     width: 48,
   },
+  v3Spacing: {
+    width: 52,
+  },
   controlsRow: {
     flex: 1,
     flexDirection: 'row',

src/components/Appbar/utils.ts

@@ -114,11 +114,10 @@ export const renderAppbarContent = ({
         if (child.type === AppbarContent) {
           props.mode = mode;
           props.style = [
-            isV3 ? i === 0 && styles.v3Spacing : i !== 0 && styles.v2Spacing,
-            shouldCenterContent &&
-              (isV3
-                ? styles.v3CenterAlignedContent
-                : styles.v2CenterAlignedContent),
+            isV3
+              ? i === 0 && !shouldCenterContent && styles.v3Spacing
+              : i !== 0 && styles.v2Spacing,
+            shouldCenterContent && styles.centerAlignedContent,
             child.props.style,
           ];
         }
@@ -128,18 +127,13 @@ export const renderAppbarContent = ({
 };
 
 const styles = StyleSheet.create({
+  centerAlignedContent: {
+    alignItems: 'center',
+  },
   v2Spacing: {
     marginLeft: 8,
   },
-  v2CenterAlignedContent: {
-    alignItems: 'center',
-  },
   v3Spacing: {
     marginLeft: 12,
   },
-  v3CenterAlignedContent: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
 });

src/components/__tests__/Appbar/Appbar.test.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
 import renderer from 'react-test-renderer';
 import Menu from '../../Menu/Menu';
 import Appbar from '../../Appbar';
@@ -106,22 +105,16 @@ describe('renderAppbarContent', () => {
         shouldCenterContent: true,
       });
 
-    const v3CenterAlignedStyle = {
-      ...StyleSheet.absoluteFillObject,
-      alignItems: 'center',
-      justifyContent: 'center',
-    };
-
-    const v2CenterAlignedContent = {
+    const centerAlignedContent = {
       alignItems: 'center',
     };
 
     expect(renderResult()[0].props.style).toEqual(
-      expect.arrayContaining([expect.objectContaining(v3CenterAlignedStyle)])
+      expect.arrayContaining([expect.objectContaining(centerAlignedContent)])
     );
 
     expect(renderResult(false)[0].props.style).toEqual(
-      expect.arrayContaining([expect.objectContaining(v2CenterAlignedContent)])
+      expect.arrayContaining([expect.objectContaining(centerAlignedContent)])
     );
   });