title: How to remove navigation header padding and margin in react native?
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/A0eb7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A0eb7.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <pre><code>export default function App() {
  
  const Stack = createStackNavigator();
  
   return (
      &lt;NavigationContainer style={GlobalStyles.NotchAware}&gt;
        &lt;Stack.Navigator initialRouteName=&quot;Home&quot;
            &gt;
          &lt;Stack.Screen
            name=&quot;Home&quot;
            component={Welcome}
            options={{
              headerShown:false,
              }}
            /&gt;
        &lt;/Stack.Navigator&gt;
    &lt;/NavigationContainer&gt;
   )  ;
  }
  </code></pre>
  <p>with this mere styling for the app.js</p>
  <pre><code>NotchAware: {
      flex: 1,
      paddingTop: Platform.OS === 'android' ? 25 : 0,
      marginLeft: 5,
      marginRight: 5,
      marginBottom: 5,
  },
  </code></pre>
  <p>These are some of the component code and styling.</p>
  <pre><code> export default function Welcome() {
   const [active, setActive] = useState(0);
  
   const nextAction = () =&gt; {
   }
  
   const skipAction = () =&gt; {
   
   }
   return (
   &lt;SafeAreaView style={styles.container}&gt;
    &lt;StatusBar style=&quot;auto&quot; /&gt;
    &lt;View style={styles.cardContainer}&gt;
      &lt;WelcomeCard /&gt;
    &lt;/View&gt;
  
    &lt;View style={styles.cardTextContainer}&gt;
      &lt;Text style={styles.cardText}&gt;Let’s make learning more fun than ever.&lt;/Text&gt;
    &lt;/View&gt;
  
    &lt;View style={styles.buttonContainer}&gt;
          &lt;View&gt;
              &lt;TouchableOpacity style={styles.skipButton} onPress={skipAction}&gt;
                  &lt;Text style={styles.buttonText}&gt;Skip&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
          &lt;View&gt;
              &lt;Dots length={2} active={active} /&gt;
          &lt;/View&gt;
          &lt;View&gt;
              &lt;TouchableOpacity style={styles.nextButton} onPress={nextAction}&gt;
                  &lt;Text style={styles.buttonText}&gt;Next&lt;/Text&gt;
              &lt;/TouchableOpacity&gt; 
          &lt;/View&gt;
    &lt;/View&gt;
    &lt;/SafeAreaView&gt;
    );
    }
  
    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'
  }
  });
  </code></pre>