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