How to remove navigation header padding and margin in react native? - reactjs

Question

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