I'm on expo and going back and forth about this. I'm trying to clean the header part on top of my contents as well as the bottom part. When I ran the code without the navigation container, everything works fine as designed, but now I have to route new screens and bind to the buttons, I can't remove it. I tried everything from the main container stylesheet setting margin to 0 and padding to 0. I have and Globalstyle as well to shove all components to a clear clearn with proper margins.
If you take a look, there are dark bars on the top and the bottom part of the screen. I wanted to remove specifically that.
export default function App() {
const Stack = createStackNavigator();
return (
<NavigationContainer style={GlobalStyles.NotchAware}>
<Stack.Navigator initialRouteName="Home"
>
<Stack.Screen
name="Home"
component={Welcome}
options={{
headerShown:false,
}}
/>
</Stack.Navigator>
</NavigationContainer>
) ;
}
with this mere styling for the app.js
NotchAware: {
flex: 1,
paddingTop: Platform.OS === 'android' ? 25 : 0,
marginLeft: 5,
marginRight: 5,
marginBottom: 5,
},
These are some of the component code and styling.
export default function Welcome() {
const [active, setActive] = useState(0);
const nextAction = () => {
}
const skipAction = () => {
}
return (
<SafeAreaView style={styles.container}>
<StatusBar style="auto" />
<View style={styles.cardContainer}>
<WelcomeCard />
</View>
<View style={styles.cardTextContainer}>
<Text style={styles.cardText}>Let’s make learning more fun than ever.</Text>
</View>
<View style={styles.buttonContainer}>
<View>
<TouchableOpacity style={styles.skipButton} onPress={skipAction}>
<Text style={styles.buttonText}>Skip</Text>
</TouchableOpacity>
</View>
<View>
<Dots length={2} active={active} />
</View>
<View>
<TouchableOpacity style={styles.nextButton} onPress={nextAction}>
<Text style={styles.buttonText}>Next</Text>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 50,
marginBottom: 20,
backgroundColor: '#fff',
justifyContent: 'space-between',
},
buttonContainer : {
flexDirection: 'row',
justifyContent: 'space-evenly',
},
cardTextContainer : {
width: 221,
textAlign: 'center',
marginLeft: 'auto',
marginRight: 'auto',
},
cardContainer : {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
cardText: {
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: 18,
lineHeight: 21,
},
skipButton: {
borderRadius: 20,
backgroundColor: '#4F74F7',
width: 81,
height: 40,
alignItems: 'center',
justifyContent: 'center',
},
nextButton: {
borderRadius: 20,
backgroundColor: '#4F74F7',
width: 81,
height: 40,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: '700',
fontSize: 15,
lineHeight: 16,
color: '#fff'
}
});