We are working on an app with Expo and Tamagui. Our goal is to put an image as a background for the whole application.

We don't know why Tamagui puts a layer on top of the background image. We managed to get the background on top of everything, but not as background. We've tried almost everything what we can find on the internet, maybe we do not see something or placed something at the wrong place, but it won't work.

The code where we view the background and our content at the same time is this code (app/_layout.tsx):

import '../tamagui-web.css'

import { useEffect } from 'react'
import { ImageBackground, StatusBar, useColorScheme } from 'react-native'
import StackNavigator from './navigation/StackNavigator';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
import { useFonts } from 'expo-font'
import { SplashScreen, Stack } from 'expo-router'
import { Provider } from './Provider'
import { useTheme, View } from 'tamagui'

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router'

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: '(tabs)',
}

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync()

export default function RootLayout() {
  const [interLoaded, interError] = useFonts({
    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
  })

  useEffect(() => {
    if (interLoaded || interError) {
      // Hide the splash screen after the fonts have loaded (or an error was returned) and the UI is ready.
      SplashScreen.hideAsync()
    }
  }, [interLoaded, interError])

  if (!interLoaded && !interError) {
    return null
  }

  return (
    <ImageBackground
      source={require('../assets/images/backdrop.png')} // Zorg ervoor dat het pad correct is
      style={{ flex: 1, zIndex: 0}}
    >
      <View style={{ flex: 0.5, zIndex: 1 }}>
        <Providers>
          <RootLayoutNav />
        </Providers>
      </View>
    </ImageBackground>
  )
}

const Providers = ({ children }: { children: React.ReactNode }) => {
  return <Provider>{children}</Provider>
}

function RootLayoutNav() {
  const colorScheme = useColorScheme()
  const theme = useTheme()
  return (
      <StackNavigator />
  )
}

Could somebody help me?

We've tried most of the documentations of Tamagui but didn't work out, worked with zIndexes. And as a debugging procedure we added background colors to specific elements to understand why and where the colors and effects are coming from. Even though we have adjust our tamagui.config.ts to background: 'transparent' but even that doesn't work.

Stacknavigator code:

import {createStackNavigator} from '@react-navigation/stack';

// Import your screens
import ActivateScreen from '../screens/activate_screen';
import StartShiftScreen from "../screens/startShift_screen";
import HomeScreen from "../screens/home_screen";
import IntakeOneScreen from "../screens/intake/intake1_screen";
import IntakeTwoScreen from "../screens/intake/intake2_screen";
import PatientListScreen from "../screens/patientList_screen";
import ChildDetailScreen from "../screens/child-detail/childDetail_screen";
import MapScreen from "../map/map_screen";
import AgreementPickChildScreen from "../screens/agreement/agreementPickChild_screen";
import MedcheckPickChildScreen from "../screens/medcheck/medcheckPickChild_screen";
import ShiftScreen from "../screens/shift/shift_screen";

// Define RootStackParamList directly here
type RootStackParamList = {
    ActivateScreen: undefined;
    StartShiftScreen: undefined;
    HomeScreen: undefined;
    PatientListScreen: undefined;
    IntakeOneScreen: undefined;
    IntakeTwoScreen: undefined;
    AgreementPickChildScreen: undefined;
    MedcheckPickChildScreen: undefined;
    ShiftScreen: undefined;
    ChildDetailScreen: { patient: any };
    MapScreen: undefined;
};


// Create a Stack Navigator
const Stack = createStackNavigator<RootStackParamList>();  // Type the navigator

export default function StackNavigator() {
    return (
        <Stack.Navigator initialRouteName="ActivateScreen">
            <Stack.Screen name="ActivateScreen" component={ActivateScreen}
                          options={{
                              headerShown: false, // Keep header hidden
                          }}/>
            <Stack.Screen name="StartShiftScreen" component={StartShiftScreen}
                          options={{
                              headerShown: false, // Keep header hidden
                          }}/>



            {/*Home screen plus all the links that are present in the home screen*/}
            <Stack.Screen name="HomeScreen" component={HomeScreen}
                          options={{
                              headerShown: false, // Keep header hidden
                          }}/>
            <Stack.Screen name="PatientListScreen" component={PatientListScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>
            <Stack.Screen name={"IntakeOneScreen"} component={IntakeOneScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>
            <Stack.Screen name={"IntakeTwoScreen"} component={IntakeTwoScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>
            <Stack.Screen name="AgreementPickChildScreen" component={AgreementPickChildScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>
            <Stack.Screen name="MedcheckPickChildScreen" component={MedcheckPickChildScreen}
                          options={{
                              headerShown: false, // Keep header hidden
                          }}/>
            <Stack.Screen name="ShiftScreen" component={ShiftScreen}
                          options={{
                              headerShown: false, // Keep header hidden
                          }}/>



            <Stack.Screen name="ChildDetailScreen" component={ChildDetailScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>
            <Stack.Screen name={'MapScreen'} component={MapScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>


        </Stack.Navigator>
    );
}

We are working on an app with Expo and Tamagui. Our goal is to put an image as a background for the whole application.

We don't know why Tamagui puts a layer on top of the background image. We managed to get the background on top of everything, but not as background. We've tried almost everything what we can find on the internet, maybe we do not see something or placed something at the wrong place, but it won't work.

The code where we view the background and our content at the same time is this code (app/_layout.tsx):

import '../tamagui-web.css'

import { useEffect } from 'react'
import { ImageBackground, StatusBar, useColorScheme } from 'react-native'
import StackNavigator from './navigation/StackNavigator';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
import { useFonts } from 'expo-font'
import { SplashScreen, Stack } from 'expo-router'
import { Provider } from './Provider'
import { useTheme, View } from 'tamagui'

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router'

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: '(tabs)',
}

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync()

export default function RootLayout() {
  const [interLoaded, interError] = useFonts({
    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
  })

  useEffect(() => {
    if (interLoaded || interError) {
      // Hide the splash screen after the fonts have loaded (or an error was returned) and the UI is ready.
      SplashScreen.hideAsync()
    }
  }, [interLoaded, interError])

  if (!interLoaded && !interError) {
    return null
  }

  return (
    <ImageBackground
      source={require('../assets/images/backdrop.png')} // Zorg ervoor dat het pad correct is
      style={{ flex: 1, zIndex: 0}}
    >
      <View style={{ flex: 0.5, zIndex: 1 }}>
        <Providers>
          <RootLayoutNav />
        </Providers>
      </View>
    </ImageBackground>
  )
}

const Providers = ({ children }: { children: React.ReactNode }) => {
  return <Provider>{children}</Provider>
}

function RootLayoutNav() {
  const colorScheme = useColorScheme()
  const theme = useTheme()
  return (
      <StackNavigator />
  )
}

Could somebody help me?

We've tried most of the documentations of Tamagui but didn't work out, worked with zIndexes. And as a debugging procedure we added background colors to specific elements to understand why and where the colors and effects are coming from. Even though we have adjust our tamagui.config.ts to background: 'transparent' but even that doesn't work.

Stacknavigator code:

import {createStackNavigator} from '@react-navigation/stack';

// Import your screens
import ActivateScreen from '../screens/activate_screen';
import StartShiftScreen from "../screens/startShift_screen";
import HomeScreen from "../screens/home_screen";
import IntakeOneScreen from "../screens/intake/intake1_screen";
import IntakeTwoScreen from "../screens/intake/intake2_screen";
import PatientListScreen from "../screens/patientList_screen";
import ChildDetailScreen from "../screens/child-detail/childDetail_screen";
import MapScreen from "../map/map_screen";
import AgreementPickChildScreen from "../screens/agreement/agreementPickChild_screen";
import MedcheckPickChildScreen from "../screens/medcheck/medcheckPickChild_screen";
import ShiftScreen from "../screens/shift/shift_screen";

// Define RootStackParamList directly here
type RootStackParamList = {
    ActivateScreen: undefined;
    StartShiftScreen: undefined;
    HomeScreen: undefined;
    PatientListScreen: undefined;
    IntakeOneScreen: undefined;
    IntakeTwoScreen: undefined;
    AgreementPickChildScreen: undefined;
    MedcheckPickChildScreen: undefined;
    ShiftScreen: undefined;
    ChildDetailScreen: { patient: any };
    MapScreen: undefined;
};


// Create a Stack Navigator
const Stack = createStackNavigator<RootStackParamList>();  // Type the navigator

export default function StackNavigator() {
    return (
        <Stack.Navigator initialRouteName="ActivateScreen">
            <Stack.Screen name="ActivateScreen" component={ActivateScreen}
                          options={{
                              headerShown: false, // Keep header hidden
                          }}/>
            <Stack.Screen name="StartShiftScreen" component={StartShiftScreen}
                          options={{
                              headerShown: false, // Keep header hidden
                          }}/>



            {/*Home screen plus all the links that are present in the home screen*/}
            <Stack.Screen name="HomeScreen" component={HomeScreen}
                          options={{
                              headerShown: false, // Keep header hidden
                          }}/>
            <Stack.Screen name="PatientListScreen" component={PatientListScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>
            <Stack.Screen name={"IntakeOneScreen"} component={IntakeOneScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>
            <Stack.Screen name={"IntakeTwoScreen"} component={IntakeTwoScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>
            <Stack.Screen name="AgreementPickChildScreen" component={AgreementPickChildScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>
            <Stack.Screen name="MedcheckPickChildScreen" component={MedcheckPickChildScreen}
                          options={{
                              headerShown: false, // Keep header hidden
                          }}/>
            <Stack.Screen name="ShiftScreen" component={ShiftScreen}
                          options={{
                              headerShown: false, // Keep header hidden
                          }}/>



            <Stack.Screen name="ChildDetailScreen" component={ChildDetailScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>
            <Stack.Screen name={'MapScreen'} component={MapScreen}
                            options={{
                                headerShown: false, // Keep header hidden
                            }}/>


        </Stack.Navigator>
    );
}

• react-native
• expo
• tamagui

• Please can you clarify what you're using for StackNavigator? Is is react-navigation? If so, you may need to set transparency options there – Rob Eyre Commented Jan 20 at 15:44
• @RobEyre I've edited the post with the stacknavigator code. – Menno Emmerik Commented Jan 20 at 15:49
• If you add contentStyle: { backgroundColor: 'transparent' } to your Stack.Screen options value, does that help? (I have this set at the Stack.Navigator level using screenOptions and found that it was the only reliable way of layering transparent navigator screens) – Rob Eyre Commented Jan 20 at 16:18
• @RobEyre unfortunately it didn’t work for us (we are working as a team). Could you share your code snippet? – Menno Emmerik Commented Jan 20 at 20:43

1 Answer 1

We solved the problem! Our StackNavigator was the problem. Inside our StackNavigator we had an element called <Stack.Screen>. We fixed it by adding this to our code:

<Stack.Screen
 name="ActivateScreen"
 component={ActivateScreen}
 options={{
 headerShown: false,
 cardStyle: { backgroundColor: 'transparent' },
   }}
 />

And especially cardStyle: { backgroundColor: 'transparent' } fixed it!