ios – React Native Expo background not overlaying iPhone notch

I’m utilizing React Native with Expo, and I’m at the moment testing out gradients and making an attempt to set the background colour. I got here throughout this bug the place the notch of the machine I’m utilizing (iPhone 13) shouldn’t be being coated.

That is what the display screen appears like. I need it in order that the white elements are additionally coloured in.

Right here is my code:

const AppHome = () => {
  return (
    <View type={{ flex: 1, backgroundColor: "#9C51B6" }}>
      <LinearGradient
        colours={["#9C51B6", "#5946B2"]}
        type={{
          flex: 1,
          justifyContent: "middle",
          alignItems: "middle",
        }}
      >
        <Textual content type={{ colour: "white" }}>My App's Content material</Textual content>
      </LinearGradient>
    </View>
  );
};

// index.tsx
import { PaperProvider } from "react-native-paper";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import AppHome from "@/screens/AppHome/AppHome";
import React, { useEffect, useState } from "react";
import { QueryClient, QueryClientProvider } from "react-query";
import { LogBox } from "react-native";
import { MealContextProvider } from "@/hooks/useMealContext";
import FoodNutritionEditManual from "@/screens/FoodNutritionEditManual/FoodNutritionEditManual";
import {
  getAuth,
  onAuthStateChanged,
  Consumer,
} from "firebase/auth";
import { FIREBASE_APP } from "@/FirebaseConfig";

const MealTrackingStack = createNativeStackNavigator();
const AuthenticationStack = createNativeStackNavigator();
const queryClient = new QueryClient();
LogBox.ignoreAllLogs();

const Residence = () => {
  const auth = getAuth(FIREBASE_APP);
  const [user, setUser] = useState<Consumer | null>(null);

  useEffect(() => {
    onAuthStateChanged(auth, (consumer) => {
      setUser(consumer);
    });
  }, []);
  console.log(consumer);

  return (
    <MealContextProvider>
      <QueryClientProvider shopper={queryClient}>
        <NavigationContainer unbiased={true}>
          <PaperProvider>
            {consumer ? (
              <MealTrackingStack.Navigator initialRouteName="Meal Residence">
                // Screens
              </MealTrackingStack.Navigator>
            ) : (
              <AuthenticationStack.Navigator
                screenOptions={{ headerShown: false }}
              >
                <AuthenticationStack.Display screen
                  title="Residence Display screen"
                  part={AppHome}
                />
              </AuthenticationStack.Navigator>
            )}
          </PaperProvider>
        </NavigationContainer>
      </QueryClientProvider>
    </MealContextProvider>
  );
};

export default Residence;

I’ve tried this resolution from github and eradicating the SafeAreaView, which is the present state of my code but it surely hasn’t fastened something, so I’m not sure what may very well be inflicting it. If there are any doable work-arounds to this, let me know!