How can I create a curved "notch" in a custom React Native tab bar using SVG to wrap a central floating button?

Question

I'm building a React Native app and using @react-navigation/bottom-tabs with a custom tabBar component. The tab bar has five tabs, and the central one is a special "camera" button that is larger and floats slightly above the bar. In the following image, you can see my idea:

The tab bar has a backgroundColor of rgba(247, 247, 247, 0.9) and a borderTopWidth of 0.5 with borderColor: Colors.GrayBlue.

I want to customize the gray top border line of the tab bar so that:

It starts as a straight horizontal line from the left edge.
Then it forms a smooth, downward-facing semicircle (a “notch”) to wrap around the central floating camera button.
After the notch, it continues as a straight line to the right edge.

The result should be a seamless curve in the border line that visually integrates with the floating button above it. You can see an example of that in the image above.

Below you can see part of my current custom tab bar component (MyTabBar.tsx):

// ... imports and other components
const MyTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => {
  // ... logic
  return (
    <Layout style={styles.container}>
      {state.routes.map((route, index) => {
        const isFocused = currentActiveIndex === index;
        const isCameraButton = index === 2;
        return (
          <TouchableOpacity
            key={route.key}
            onPress={() => onPress(index)}
            style={isCameraButton ? styles.btnCameraContainer : styles.btnContainer}
            accessibilityRole="button"
          >
            <View
               style={[
               styles.borderButton,
               isFocused && styles.borderActive,
               !isCameraButton && styles.borderButtonWithText
              ]}
            >
              <Icon
                name={iconName(index)}
                size={30}
                color={isFocused ? Colors.BlueCrayola : Colors.GrayBlue}
              />
            </View>
            {!isCameraButton && (
              <Text style={[styles.labelText, isFocused && styles.labelTextActive]}>
                {accessibilityLabelText(index)}
              </Text>
            )}
          </TouchableOpacity>
        );
      })}
    </Layout>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'rgba(247, 247, 247, 0.9)',
    height: 85 + getBottomSpace(),
    borderTopWidth: 0.5, // This is the line I want to curve
    borderColor: Colors.GrayBlue,
    paddingHorizontal: 10,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  btnContainer: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    height: 85 + getBottomSpace(),
    paddingTop: 10,
    paddingBottom: getBottomSpace() + 5,
  },
  // ... other styles
});

which outputs the following:

How can I customize the tab bar’s top border to include a curved notch (probably with SVG or some workaround) to visually wrap around the central floating button?

Should I replace the border entirely with an SVG shape, or is there a more efficient way using react-native-svg or custom backgrounds?

@cmcodes Thanks for improving the format. Just one thing: when adding code fences, please also reduce the indentation, because code fences remove the necessity of indentation. — Gert Arnold
– Gert Arnold, Commented Jul 16 at 15:21

cmcodes · Accepted Answer · 2025-07-16 13:03:17Z

0

Have you tried using tabBarStyle?

https://reactnavigation.org/docs/bottom-tab-navigator/#tabbarstyle

answered Jul 16 at 13:03

cmcodes

1,9001 gold badge22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kamal Aug 5 at 5:35

Hi cmcodes thanks for your suggestion! Could you please clarify what you mean by using tabBarStyle? Are you suggesting to style the border with tabBarStyle directly, or is there a way to create the curved notch using that? Also, do you have any example or snippet showing how to achieve the curved top border using tabBarStyle? Thanks a lot!

cmcodes Aug 5 at 7:30

Yes. Style the border by passing styles to tabBarStyle. Something like this: <Tab.Navigator screenOptions={{ tabBarStyle: { position: 'absolute' } }}>

Collectives™ on Stack Overflow

How can I create a curved "notch" in a custom React Native tab bar using SVG to wrap a central floating button?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related