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

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!

You don't need to enclose Imagebackground inside View tag.Remove View tag above and below ImageBackground tag .Hope removing View tag helps. — shruti garg, Apr 20 '19 at 15:33
I didn't find any render method in App component.or if you haven't written proper code in your question please provide it correctly! otherwise, I have tried your example in expo it works fine. https://snack.expo.io/@paraskorat/aGVhbH — Paras Korat, Apr 20 '19 at 15:47
@ParasKorat the problem only happens when i try to put the ImageBackground before the RouterNavigator, if you try to put the router as a child it wont work. — Muho, Apr 20 '19 at 16:40
why have you used zIndex in Landing Page ?What is its purpose? — shruti garg, Apr 20 '19 at 16:49
@shrutigarg I was just trying to see if can make a difference, but it does not affect anything — Muho, Apr 20 '19 at 17:06

shruti garg · Answer 1 · 2019-11-03T14:15:09.010

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>
    );
  }
}

But it is displaying Landing page text on background image in App. — shruti garg, Apr 20 '19 at 18:10

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

1 Answers1