ImageBackground component as a container of react-navigation router hiding all child components - react-native

Question

I want to set a background image to all of the screens in my react native application,
I am using ImageBackground component on the top level of my components tree like that:
export default class App extends React.Component {
render(){
return(
<View style={{ flex: 1 }}>
<ImageBackground source={require('../assets/app-bg.png')} style={{width: '100%', height: '100%', flex: 1, zIndex: 0, resizeMode: 'cover' }}>
<Router />
</ImageBackground>
</View>)
}
}
and I have the child component which is the router from react-navigation
like that:
class LandingPage extends React.Component {
render(){
return(
<View style={{flex: 1, zIndex: 999}}>
<Text>here is landing page></Text>
</View>
)
}
}
const RouterNavigator = createAppContainer(createStackNavigator({
Landing: {
screen: Landing,
navigationOptions:{
header: null
}
}
}
export default class Router extends React.Component {
render() {
return <RouterNavigator style={{flex: 1}}/>
}
}
the problem is that the background image is being rendered but the child component LandingPage is being hidden even though it is being rendered too!

Answer 1

Just have a look at this example.Does this help you acheive what you were
trying to.
import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground } from 'react-native';
import { Constants } from 'expo';
import AssetExample from './components/AssetExample';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import { Card } from 'react-native-paper';
class LandingPage extends React.Component {
render() {
return (
<View>
<Text>here is landing page</Text>
</View>
);
}
}
const RouterNavigator = createAppContainer(
createStackNavigator(
{
LandingPage: {
screen: LandingPage,
navigationOptions: {
header: null,
},
},
},
{
mode: 'card',
transparentCard: true,
cardStyle: { backgroundColor: 'transparent' },
transitionConfig: () => ({
containerStyle: {
backgroundColor: 'transparent',
},
}),
initialRouteName: 'LandingPage',
}
)
);
export default class App extends React.Component {
render() {
return (
<ImageBackground
source={require('./bgimage.jpeg')}
style={{
flex: 1,
}}>
<RouterNavigator />
</ImageBackground>
);
}
}