How to set borderRadius (rounded corners) in React Native Header Bar?

Question

I'm using Native Stack Navigator v6 and trying to add borderBottomRightRadius and borderBottomLeftRadius as shown below. It's working in Expo Web but not in iOS or Android, as shown in screenshot below.

I'd appreciate guidance on how to fix this, or if this is not the right approach, please suggest another way to achieve bottom rounded corners for the header bar.

      <HomeStack.Screen 
        name="HomeScreen" 
        component={HomeScreen} 
        options= {{
          headerTitle: "Home Screen",
          headerStyle: {
            backgroundColor: '#21ABA5',
            borderBottomRightRadius: 20,
            borderBottomLeftRadius: 20,
            overflow: 'hidden',
            background: 'transparent'
          },
          headerTitleStyle: {
            color: '#fff'
          },
          headerTintColor: 'white',
          headerTransparent: true
        }}
      />

Answer 1

Let me edit my answer. If you don't want for web at all, you can create your own header. If you want to apply to all screens, add it to Stack.Navigator's ScreenOptions.

import { getHeaderTitle } from "@react-navigation/elements";

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          header: ({ navigation, route, options, back }) => {
            const title = getHeaderTitle(options, route.name);

            return (
              <MyHeader
                title={title}
                leftButton={
                  back ? (
                    <MyBackButton onPress={navigation.goBack} />
                  ) : undefined
                }
                style={options.headerStyle}
              />
            );
          },
        }}
      />
    </Stack.Navigator>
  );
}