React native strange border behavior in bottom tab navigator

Question

Here is a very weird issue happening with react navigation. I have a react native app on Android device, and I'm using react navigation v4. The problem is, there is a blank space between the top border and the content of the bottom tab navigator. What is more weird, this blank space disappears when I add a left border. Let me explain by step by step. I've created a simple scenario with simple views and basic colors to better visualize the problem:

1. The footer has 5 equal views and a red border top. Without any extra style at all, there is already a blank space between the border and content, which is not expected naturally:

   The code is as simple as possible:

    export const BottomTabNavigator = createBottomTabNavigator(
    routes, {
        tabBarComponent: () => <View style={{
            height: 50,
            flexDirection: 'row',
            borderTopWidth: 10,
            borderTopColor: 'red'
        }}>
            <View style={{ flex: 1, backgroundColor: 'white', borderWidth: 1, borderColor: 'cyan'}}></View>
            // Other views here like above
        </View>
    }
   )
   

   However, this code already produces a blank space, as you can see in the image below, look close to the footer and its border:

   

2. What is more interesting, this blank space disappears when I add a left border, and then the views are just sticking to the borders, which is what I want. The only addition is the following style to the container view:

    borderLeftWidth: 10,
    borderLeftColor: 'green',
   

   Then, this produces a proper outcome. The footer now looks fine. However, I don't want a left border at the footer of course.

   

3. What is even more interesting, when I change only the color of the left border, the thickness of top border changes, and the left border gets thinner, and views get detached from both borders again. This really surprises me as I don't understand how changing just a color can change the layout. So the only change I make is the color, from green to red:

   borderLeftColor: 'red',
   

   Then what happens is below:

   

So I haven't been able to fix this blank space appearing out of nowhere. This problem does not occur when I use bordered views outside the bottom tab navigator. React navigation is definitely doing something there.

I assumed there are some styles that comes with react navigation by default. However I've tried so many combinations, like alignItems, justifyContent, etc, but the problem does not go away.

Another probability is that since react navigation v4 is already old (there's v6 out there), this could be an unfixed bug that will not be solved forever..

But anyway, have you ever seen this problem and been able to fix somehow? Any help would be appreciated.

My package versions:

"react": "17.0.2",
"react-native": "0.66.0",
"react-navigation": "4.2.1",