getting white space at top when using react-native navigation

I am using react navigation to navigate between different screens.

below is my code:

import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from "./screen/Home";

function Main({ navigation }) {
  return (
    <View style={styles.container}>
      <View style={{flex: 0}}>
        <Text>Welcome</Text>
      </View>
      <View style={{flex: 0}}>
        <TouchableOpacity style={styles.btn} onPress={() => navigation.navigate('Home')}>
          <Text>Goto Home</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const MainNavigator = createStackNavigator();

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <MainNavigator.Navigator >
          <MainNavigator.Screen name="Main" component={Main} />
          <MainNavigator.Screen name="Home" component={Home} />
        </MainNavigator.Navigator>
      </NavigationContainer>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1, backgroundColor: '#44210D', alignItems: 'center', justifyContent: 'center',
  },
  text: {
    color: "black", borderWidth: 2, borderColor: "green"
  },
  btn: {
    alignItems: "center", backgroundColor: "#DDDDDD", padding: 10,margin: 10
  },
});

You can see in the image that there is a white space at the top. I want to know how can I change the color of that space.