fix: appbar header ignores border bottom radius (callstack#3767)

src/components/Appbar/AppbarHeader.tsx

@@ -19,6 +19,7 @@ import {
  DEFAULT_APPBAR_HEIGHT,
  getAppbarColor,
  modeAppbarHeight,
+ getAppbarBorders,
 } from './utils';
 
 export type Props = React.ComponentProps<typeof Appbar> & {
@@ -115,6 +116,7 @@ const AppbarHeader = ({
  mode = Platform.OS === 'ios' ? 'center-aligned' : 'small',
  elevated = false,
  theme: themeOverrides,
+ testID = 'appbar-header',
  ...rest
 }: Props) => {
  const theme = useInternalTheme(themeOverrides);
@@ -134,6 +136,8 @@ const AppbarHeader = ({
  zIndex?: number;
  };
 
+ const borderRadius = getAppbarBorders(restStyle);
+
  const backgroundColor = getAppbarColor(
  theme,
  elevation,
@@ -145,6 +149,7 @@ const AppbarHeader = ({
 
  return (
  <View
+ testID={`${testID}-root-layer`}
  style={[
  {
  backgroundColor,
@@ -153,10 +158,12 @@ const AppbarHeader = ({
  paddingTop: statusBarHeight ?? top,
  paddingHorizontal: Math.max(left, right),
  },
+ borderRadius,
  shadow(elevation) as ViewStyle,
  ]}
  >
  <Appbar
+ testID={testID}
  style={[{ height, backgroundColor }, styles.appbar, restStyle]}
  dark={dark}
  {...(isV3 && {

src/components/Appbar/utils.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Animated } from 'react-native';
 
 import overlay from '../../styles/overlay';
 import { black, white } from '../../styles/themes/v2/colors';
@@ -12,6 +12,14 @@ import AppbarContent from './AppbarContent';
 
 export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
 
+const borderStyleProperties = [
+ 'borderRadius',
+ 'borderTopLeftRadius',
+ 'borderTopRightRadius',
+ 'borderBottomRightRadius',
+ 'borderBottomLeftRadius',
+];
+
 export const getAppbarColor = (
  theme: InternalTheme,
  elevation: number,
@@ -39,6 +47,24 @@ export const getAppbarColor = (
  return colors.surface;
 };
 
+export const getAppbarBorders = (
+ style:
+ | Animated.Value
+ | Animated.AnimatedInterpolation<string | number>
+ | Animated.WithAnimatedObject<ViewStyle>
+) => {
+ const borders: Record<string, number> = {};
+
+ for (const property of borderStyleProperties) {
+ const value = style[property as keyof typeof style];
+ if (value) {
+ borders[property] = value;
+ }
+ }
+
+ return borders;
+};
+
 type RenderAppbarContentProps = {
  children: React.ReactNode;
  isDark: boolean;

src/components/__tests__/Appbar/Appbar.test.tsx

@@ -17,6 +17,7 @@ import AppbarHeader from '../../Appbar/AppbarHeader';
 import {
  getAppbarColor,
  modeTextVariant,
+ getAppbarBorders,
  renderAppbarContent as utilRenderAppbarContent,
 } from '../../Appbar/utils';
 import Menu from '../../Menu/Menu';
@@ -488,4 +489,30 @@ describe('animated value changes correctly', () => {
  transform: [{ scale: 1.5 }],
  });
  });
+
+ it('header bottom border radius applied correctly', () => {
+ const style = { borderBottomLeftRadius: 16, borderBottomRightRadius: 16 };
+
+ const { getByTestId } = render(
+ <mockSafeAreaContext.SafeAreaProvider>
+ <Appbar.Header style={style} testID="appbar-header">
+ {null}
+ </Appbar.Header>
+ </mockSafeAreaContext.SafeAreaProvider>
+ );
+ expect(getByTestId('appbar-header-root-layer')).toHaveStyle(style);
+ });
+
+ describe('getAppbarBorders', () => {
+ const style = { borderRadius: 10, height: 60, top: 13 };
+
+ it('should return only border radius styles', () => {
+ expect(getAppbarBorders(style)).toEqual({ borderRadius: 10 });
+ });
+
+ it('should return empty object if no borders are passed', () => {
+ const style = { height: 60, top: 13 };
+ expect(getAppbarBorders(style)).toEqual({});
+ });
+ });
 });