react-native(HeaderBase): wrap title in flex-1 container to preserve centering with ReactNode children; import TextVariant from @metamask/design-system-shared per shared import rules

cursoragent · cursoragent · commit eb84e43ebf6c · 2026-04-22T21:27:43.000Z
diff --git a/packages/design-system-react-native/src/components/HeaderBase/HeaderBase.tsx b/packages/design-system-react-native/src/components/HeaderBase/HeaderBase.tsx
@@ -8,7 +8,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 // External dependencies.
 import { ButtonIcon, ButtonIconSize } from '../ButtonIcon';
 import { TextOrChildren } from '../temp-components/TextOrChildren';
-import { TextVariant } from '../Text';
+import { TextVariant } from '@metamask/design-system-shared';
 
 import type { HeaderBaseProps } from './HeaderBase.types';
 
@@ -146,18 +146,20 @@ export const HeaderBase: React.FC<HeaderBaseProps> = ({
       })}
 
       {/* Title */}
-      <TextOrChildren
-        textProps={{
-          variant: TextVariant.HeadingSm,
-          ...textProps,
-          style: [
-            tw.style('text-center flex-1 items-center'),
-            textProps?.style,
-          ],
-        }}
-      >
-        {children}
-      </TextOrChildren>
+      <View style={tw.style('flex-1 items-center')}>
+        <TextOrChildren
+          textProps={{
+            variant: TextVariant.HeadingSm,
+            ...textProps,
+            style: [
+              tw.style('text-center flex-1 items-center'),
+              textProps?.style,
+            ],
+          }}
+        >
+          {children}
+        </TextOrChildren>
+      </View>
 
       {/* End accessory */}
       {renderAccessoryWrapper({
