Basically i'm trying to have my background image in my main _layout.tsx so that it can show in all my pages without me having to explicitly import my background image in every single page.

So below is my app/_layout.tsx page. As you can see we have the BackgroundWrapper which is a component that simply imports and utilizes my main background image that i want available on each page.

import { Stack } from "expo-router";
import React from "react";
import { ImageBackground } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { AuthProvider } from "../context/AuthContext";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { MaintenanceProvider } from "../context/MaintenanceContext";
import GlobalMaintenanceHandler from "../components/Maintenance/GlobalMaintenanceHandler";
import { BackgroundWrapper } from "../components/BackgroundWrapper";

const queryClient = new QueryClient();

export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <MaintenanceProvider>
          <SafeAreaProvider>
            <BackgroundWrapper>
              <GlobalMaintenanceHandler />
              <Stack
                screenOptions={{
                  headerShown: false,
                }}
              >
                <Stack.Screen name="index" />
                <Stack.Screen name="splash" />
                <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
                <Stack.Screen
                  name="maintenance"
                  options={{ headerShown: false }}
                />
              </Stack>
            </BackgroundWrapper>
          </SafeAreaProvider>
        </MaintenanceProvider>
      </AuthProvider>
    </QueryClientProvider>
  );
}

So lets walk to a page for example my auth pages where i have my login and register screens.

I also have a (auth)/_layout.tsx which looks like this below

import { Stack } from "expo-router";
import React from "react";
import { FontProvider } from "@/components/Fonts";

export default function Auth() {
  return (
    <FontProvider>
      <Stack screenOptions={{ headerShown: false}}>
        <Stack.Screen name="login" />
        <Stack.Screen name="signup" />
        <Stack.Screen name="confirmationcode" />

      </Stack>
    </FontProvider>
  )
}

And for reference this is my BackgroundWrapper

import React, { ReactNode } from "react";
import { ImageBackground } from "react-native";

interface BackgroundWrapperProps {
  children: ReactNode;
}

export const BackgroundWrapper: React.FC<BackgroundWrapperProps> = ({ children }) => (
  <ImageBackground
    source={require("../assets/images/appbackground.png")}
    style={{ flex: 1 }}
  >
    {children}
  </ImageBackground>
);

While having all this, i cant seem to make my actual background image render. What i noticed is that the Stack for some reason overides my background image. If i use a Slot it works fine, but i dont really want to use a Slot for this reason, as i need my pages to stack on top of each other.

What i have tried although is to set contentStyle: { backgroundColor: "transparent" }, to my Stack like so in both of the _layout.tsx

<Stack screenOptions={{
       headerShown: false,
       contentStyle: { backgroundColor: "transparent" },}}>

But by doing so my background image actually shows, but of course it causes some glitches while going from one screen to another, basically when navigating between screens the content on my old page still shows in the background while going to the new page.