Change backgound color for Navigation

[MatLish00010]

Hello! I need to use a background image for my app and I tried using

<Background> <Slot /> </Background>
in root but it doesn't work because navigation has background color, how can i remove bgc for expo-router?

[kadikraman]

You can set backgroundColor: 'transparent' to remove the background color.

So e.g. in a Stack:

<Stack screenOptions={{ contentStyle: { backgroundColor: 'transparent'} }}>

Or if you're using ThemeProvider, it'll be something like:

<ThemeProvider value={{
  ...,
  colors: {
    ...,
     background: 'transparent',
  },
}}>

[bim-oulabi]

When using stack, its difficult to set a custom background component with transparent content style since the transition will look weird

<AuthGradient>
        <Stack
          screenOptions={{
            headerShown: false,
            // animation: 'slide_from_right',
            contentStyle: {
              backgroundColor: 'transparent',
            },
          }}>
          <Stack.Screen name='login' />
          <Stack.Screen name='signup' />
          <Stack.Screen name='forgot-password' />

     </Stack>
      </AuthGradient>

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2024-05-10.at.11.48.32.mp4

[SunZhiC]

You can set backgroundColor: 'transparent' to remove the background color.

So e.g. in a Stack:

<Stack screenOptions={{ contentStyle: { backgroundColor: 'transparent'} }}>

Or if you're using ThemeProvider, it'll be something like:

<ThemeProvider value={{
  ...,
  colors: {
    ...,
     background: 'transparent',
  },
}}>

Below code doesn't work for me, if I change it to 'green', it works well, but not works for 'transparent', I suppose there is a under layer control the backgroundColor, I am looking for a work around.

<Stack screenOptions={{ contentStyle: { backgroundColor: 'transparent'} }}>