Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16552

White line above BottomTabNavigator in react-native

$
0
0

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

enter image description here

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

Viewing all articles
Browse latest Browse all 16552

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>