CODEWITHSUNDEEP
react-nativereact-native-navigationreact-navigation-v6border-radius
Rwzr Q
Rwzr Q

Reputation: 184

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

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.

react native header border radius expo web vs. mobile

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
        }}
      />

Upvotes: 0

Views: 4803

Answers (2)

Four
Four

Reputation: 1084

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>
  );
}

Upvotes: 3

Rwzr Q
Rwzr Q

Reputation: 184

After further research turns out this is impossible.

Native Stack Navigator depends on native platform options which apparently don't support borderRadius out-of-the-box. The only option that can be affected via the headerStyle is backgroundColor.

Other options include using the Stack Navigator instead of the Native Stack Navigator, or building an entirely custom header component. However, the latter loses most of built-in the advantages of the Native Stack Navigator. Thus, I'll be switching to the JS-based Stack Navigator which is far more customizable.

Upvotes: 0

Related Questions