My screen has a white gap at the bottom and top. Iphone 13
I am using expo and react-navigation.

I have tried SafeAreaView, SafeAreaProvider and etc. Any Ideas of what could be happening?
At this moment my login screen looks like the image on the left I would like it to look like the image on the right.

index.tsx

import * as React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginOrRegister from './screens/LoginOrRegister';
import Login from './screens/Login';
import 'react-native-screens';
import { SafeAreaProvider} from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';


function index() {
  const Stack = createNativeStackNavigator();
 
  return (
   <SafeAreaProvider style={{flex:1}}>
    <NavigationContainer independent={true}>
      <Stack.Navigator initialRouteName="LoginOrRegister">
            
        <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
        <Stack.Screen name="LoginOrRegister" component={LoginOrRegister} options={{ headerShown: false }}/>
      </Stack.Navigator>
          
    </NavigationContainer>
    </SafeAreaProvider>
  

  );
}
export default index;

// Login.tsx

import {
    useSafeAreaInsets,
  } from 'react-native-safe-area-context';

import { Text, View } from 'react-native';
  
  function Login() {
    const insets = useSafeAreaInsets();
  
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'space-between',
          alignItems: 'center',
          backgroundColor: 'green',
  
          // Paddings to handle safe area
          paddingTop: insets.top,
          paddingBottom: insets.bottom,
          paddingLeft: insets.left,
          paddingRight: insets.right,
        }}
      >
        <Text>This is top text.</Text>
        <Text>This is bottom text.</Text>
      </View>
    );
  }

  export default Login;