react-navigation: Full screen background with nested navigators - react-native

Question

First of all, for anyone looking for a solution to show a full-screen background image with nested navigators, the code below will give a great headstart. I couldn't find any better resources and it took me a while to get this together.
Now onto the problem. The issue is that there seems to be no better way to show a consistent full-screen image background when using nested navigators which would be the most common use case for many apps. Ideally, you configure the background image for the RootStack and that would be it.
The problem with the code below is that the MenuStack will not show the background image even if wrapped inside a MenuStackWrapper and when trying to render the image in the Menu component itself, the image resizes differently and thus seems like it's moving.
const MenuStack = createStackNavigator(
{
Menu,
Log,
},
{
headerMode: 'none'
}
);
const MainStack = createBottomTabNavigator(
{
Now,
Today,
Menu: MenuStack
},
{
initialRouteName: 'Now',
tabBarOptions: {
style: {
backgroundColor: 'transparent'
}
}
}
);
class MainStackWrapper extends Component {
static router = MainStack.router;
render() {
return (
<ImageBackground source={require('./res/images/bgr.png')} style={{ width: '100%', height: '100%' }} imageStyle={styles.backgroundImage}>
<MainStack navigation={this.props.navigation} />
</ImageBackground>
);
}
}
const AppStack = createStackNavigator(
{
Main: MainStackWrapper,
Modal: ModalScreen
},
{
mode: 'modal',
headerMode: 'none',
cardStyle: {
backgroundColor: 'transparent'
}
}
);
const AuthStack = createSwitchNavigator({
SignIn,
SignUp,
ForgotPass
});
const RootStack = createSwitchNavigator(
{
AuthLoading,
Auth: AuthStack,
App: AppStack
},
{
initialRouteName: 'AuthLoading'
}
);
type Props = {};
export default class App<Props> extends Component {
render() {
return (
<ImageBackground source={require('./res/images/bgr.png')} style={{ width: '100%', height: '100%' }} imageStyle={styles.backgroundImage}>
<StatusBar barStyle="light-content" backgroundColor="transparent" translucent={true} />
<RootStack />
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
backgroundImage: {
resizeMode: 'cover',
width: null,
height: null,
backgroundColor: 'transparent',
flex: 1,
flexDirection: 'column'
}
});