ios – Cellular app in Expo growth construct has white house on the backside in some views

I’m making an attempt to enhance in React-native and I began constructing an app with Expo utilizing Typescript. Within the app typically I’ve a tab structure and I exploit some modals. The factor is, once I attempt my app in iOS, it has some empty white house on the backside which isn’t the case in some views. For instance right here that is from my principal tab bar

As you may see there’s a white house below the tab bar. Nevertheless that is from a calendar view

As you may see, the view makes use of the earlier white house. I’m utilizing Expo router and right here how I configured my tab structure and modal:

<Stack
  screenOptions={{
  headerShown: false,
  contentStyle: { backgroundColor: colours.background },
  animation: "slide_from_right"
  }}
>
  <Stack.Display
    identify="(tabs)"
    choices={{ headerShown: false, animation: "none" }}
  />
  <Stack.Display
    identify="(modals)/routine-details"
    choices={{
      presentation: "fullScreenModal",
      headerShown: false,
      title: "",
      headerShadowVisible: false,
      animation: "slide_from_right",
      headerBackTitle: t("frequent.again"),
      contentStyle: { backgroundColor: colours.background },
    }}
  />

That is the structure for (tabs) and the modal I confirmed beneath. Right here is the structure below the (tabs) listing

<Tabs
  screenOptions={{
    tabBarActiveTintColor: colours.secondary,
    tabBarInactiveTintColor: "grey",
    tabBarStyle: {
      backgroundColor: colours.surfaceVariant
    }
  }}
>
  <Tabs.Display
    identify="dwelling"
    choices={{
      title: t("dwelling.title"),
      headerShown: false,
      tabBarIcon: ({ shade, measurement }) => (
        <Icon identify="dwelling" measurement={measurement} shade={shade} />
      ),
    }}
  />
  <Tabs.Display
    identify="habits"
    choices={{
      title: t("habits.title"),
      headerShown: false,
      tabBarIcon: ({ shade, measurement }) => (
        <Icon identify="calendar-check" measurement={measurement} shade={shade} />
      ),
    }}
  />
  <Tabs.Display
    identify="social"
    choices={{
      title: t("social.title"),
      headerShown: false,
      tabBarIcon: ({ shade, measurement }) => (
        <Icon identify="account-group" measurement={measurement} shade={shade} />
      ),
    }}
  />
  <Tabs.Display
    identify="discover"
    choices={{
      title: t("discover.title"),
      headerShown: false,
      tabBarIcon: ({ shade, measurement }) => (
        <Icon identify="compass" measurement={measurement} shade={shade} />
      ),
    }}
  />
  <Tabs.Display
    identify="(profile)"
    choices={{
      title: t("profile.title"),
      headerShown: false,
      tabBarIcon: ({ shade, measurement }) => (
        <Icon identify="account" measurement={measurement} shade={shade} />
      ),
    }}
  />
</Tabs>

What’s the distinction? How can I make the overall tab bar use the house beneath?