What I'm facing:

I have a StackNavigator in which I want to set a ImageBacgkround to all it's children screens. The problem is, I've already setted my StackNavigator cardStyle: { backgroundColor: 'transparent' }, following React Navigation Docs, and wrapped it inside a ImageBackground but still can't get it working.

What I've tried:

//My navigator component is more complex, but the concept looks something like this
//for both navigators
const Stack = createStackNavigator();

const MyStackNavigator = () => (
  <ImageBackground source=('../assets/my-background.png') resizeMode='cover' style={{flex: 1}}>
    //If I change BackgroundColor to 'red' or anything like that, it works fine
    //so I think the problem isn't related to styling properties 
    <Stack.Navigator screenOptions={{cardStyle: { BackgroundColor: 'transparent' } }}>
      <Stack.Screen name='Screen1' component={Component1}/>
      <Stack.Screen name='Screen2' component={Component2}/>
      <Stack.Screen name='Screen3' component={Component3}/>
    </Stack.Navigator>
  </ImageBackground>
);

export default App() => (
  <MyStackNavigator />
);

I've done the same thing in a DrawerNavigator inside my navigator component passing sceneContainerStyle: { backgroundColor: 'transparent' } }} and it actually works. It seems like my StackNavigator ain't rendering it's parent components correctly.

One of my StackNavigator's screens:

One of my DrawerNavigator's screens:

Both navigator's screens layout are wrapped in a transparent container View, so as you can see, the drawer screen is rendering background correctly but the stack screen isn't. Maybe I'm passing wrong props to my StackNavigator?