How to set background image with react native and react navigation?

Question

I'm using react native with react navigation v3, and I'm trying to set a background image to my entire app. But for some reason the image doesn't display.

If I'm wrapping my Home component the background image displays as expected, but if I'm wrapping the stack navigator, the background is white. I have searched online for solutions but it doesn't seem to work.

const AppNavigator = createAppContainer(
  createStackNavigator(
    {
      Home: {screen: Home},
      Vocabulary: {screen: Vocabulary},
      AddWord: {screen: AddWord},
    },
    {
      initialRouteName: 'Home',
      headerMode: 'none',
      cardStyle: {backgroundColor: 'transparent', shadowColor:'transparent'},
      transitionConfig: () => ({
        containerStyle: {
          backgroundColor: 'transparent',
        },
      }),
    },
 ),
);
const App = () => {
 return (
    <ImageBackground
      source={require('./src/drawable/background1.jpg')}
      style={{flex: 1}}
      resizeMode="cover">
      <Provider store={store()}>
        <AppNavigator />
      </Provider>
    </ImageBackground>
 );
};
export default App;

Right now I see the component, but the background is white.

Answer 1

Here's a solution for react-navigation v6.x

Setting cardStyle: {backgroundColor: 'transparent'} on the screenOptions property for the Stack Navigator, as proposed in @Bizkrem Muhammad's answer, didn't work for me.

But, with the help of this Github issue, I found a solution that sets a default background color to every screen for our NavigatorContainer:

import {
  DefaultTheme,
  NavigationContainer,
} from '@react-navigation/native';

const navTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'transparent',
  },
};

Then wrap your Navigator or NavigationContainer with <ImageBackground>, like so:

return (
    <ImageBackground source={{/* your desired uri */}}>
        <NavigationContainer theme={navTheme} >
            {/* ... */}
        </NavigationContainer>
    </ImageBackground>
)