REACT NATIVE padding issue white spaces on top and bottom of the IOS screen (notch area) even if the SafeAreaView is not given

I am new to ReactNative development and I couldn’t figure out the white spaces that occur on top and bottom of the screen even without the SafeAreaView component. I am testing this on ExpoGo app on my mobile.

import React from "react";
import { Text, View, StyleSheet } from "react-native";
import Footer from "../components/Footer";
import LittleLemonHeader from "../components/LittleLemon";
import WelcomeScreen from "../components/WelcomeScreen";
import MenuItems from "../components/MenuItems";

export default function Index() {
  return (
    //<View style={{ flex: 1, backgroundColor: "#495E57" }}>
    <View style={styles.container}>
      <LittleLemonHeader />
      <MenuItems />
      <Footer />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#495E57",
    padding: 0, // Ensure no padding in the container
    margin: 0,
  },
});