White line above BottomTabNavigator in react-native - ios

Question

I just started developing an app in react-native and added a bottom navigation. I then started styling the components and noticed a white line above the navigation, which i simply can't get rid of.
Picture of the Problem
Any idea on how to make that line have the same color as the background would be appreciated. It might be possible that the default background color behind the views is "shining through" since it's white and I have no idea how to change it. The app is only supposed to work on my own iPhone XR, so I'm not concerned about compatibility with android or other iPhone models
I'm a complete beginner regarding react-native, so bear with me here.
Here is my code so far:
Navigation
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
activeTintColor: Colors.tabIconSelected,
inactiveTintColor: Colors.tabIconDefault,
style: styles.container
}}>
<Tab.Screen
name="Payments"
component={PaymentScreen}
options={{
tabBarIcon: ({focused}) => <TabBarIcon focused={focused} name="logout"/>
}}/>
<Tab.Screen
name="Income"
component={IncomeScreen}
options={{
tabBarIcon: ({focused}) => <TabBarIcon focused={focused} name="login"/>
}}/>
</Tab.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.darkBackgroundColor,
}
});
Payment View
export default class PaymentScreen extends Component{
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>Payments!</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: Colors.backgroundColor,
},
text:{
color: Colors.textColor
}
});

Answer 1

Edit: the API has changed since I posted this answer. See the solution below if this one doesn't work for you
Figured it out myself after a bit of trial and error. The Tab.Navigator class of the NavigationContainer has a prop called tabBarOptions which takes a stylesheet as its style option. And of course the border of the component can be changed here as well.
Here's the catch though: setting borderWidth to 0 does not hide the white border above the navigation. Only setting borderTopWidth to 0 has the desired effect.
So the full solution looks like this:
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
activeTintColor: Colors.tabIconSelected,
inactiveTintColor: Colors.tabIconDefault,
style: styles.container
}}/>
</NavigationContainer>
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.darkBackgroundColor,
borderTopWidth: 0
}
});

Answer 2

You can remove it in tabBarStyle in screenOption props likes below
<Tab.Navigator
screenOptions={
tabBarStyle:{borderTopWidth:0}
}
/>

Answer 3

Using React Navigation 6.x
In my case, I had to put the tabBarStyle on every Tab.Screen so for example:
<Tab.Screen name="HomeTab" component={xx} options={({ route }) => ({
title: 'Home',
tabBarStyle: {borderTop: 0},
})} />
<Tab.Screen name="SecondTab" component={xx} options={({ route }) => ({
title: 'SecondTab',
tabBarStyle: {borderTop: 0},
})} />
<Tab.Screen name="ThirdTab" component={xx} options={({ route }) => ({
title: 'ThirdTab',
tabBarStyle: {borderTop: 0},
})} />

Answer 4

(unable to comment this answer as link is too much lengthy)
This line cannot be removed it seems. It'a coming by default when BottomTab is rendered to differentiate BottomTab and rest of the screen. Go through this example and try to apply multiple background colors for `BottomTab' then you will understand a bit clearly.

Answer 5

in Bottom Tabs Navigator v6,
you can use tabBarStyle prop to resolve this white line issue.
make sure to gave the borderTopWidth:0,
screenOptions={({route}) =>({
tabBarStyle: {
height: IS_IPHONE ? RFValue(47) : RFValue(42),
backgroundColor: AppTheme.colors.darkGrey,
borderTopWidth: 0,
},
}
)
}