React native, Border bottom left radius not displaying on tab item

Question

How can I set the border radius on the bottom left and top left?

      tabBar: {
        marginBottom: 10,
        backgroundColor: colors.GREYTWO,
        flexDirection: 'row',
        justifyContent: 'center',
      },
      tabItem: {
        alignItems: 'center',
        flex: 1,
        borderColor: 'green',
        borderBottomLeftRadius: 5,
        borderBottomRightRadius: 0,
        borderTopLeftRadius: 5,
        borderTopRightRadius: 0,
      },
      tabButton: {
        fontFamily: fonts.MEDIUM,
        fontWeight: fonts.FONT_WEIGHT_MEDIUM,
        fontSize: fonts.FONT_SIZE_LARGE,
        width: '100%',
        textAlign: 'center',
        padding: 15,
        color: colors.LIGHTBLACK,
      },
      tabButtonActive: {
        backgroundColor: colors.GREEN,
        color: colors.WHITE,
        justifyContent: 'center',
      },

  const renderTabBar = ({ navigationState }: Props) => (
    <View style={styles.tabBar}>
      {navigationState.routes.map((route, i) => {
        const active = navigationState.index === i;

        return (
          <TouchableOpacity style={styles.tabItem} onPress={() => setIndex(i)}>
            <Animated.Text
              style={[
                styles.tabButton,
                active ? styles.tabButtonActive : null,
              ]}>
              {route.title}
            </Animated.Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );