ImageBackground not working, when used in root of the app

Question

I want to apply a gradient background image in my react-native app, so instead of putting ImageBackground in every component I have put it in my app.js to wrap all the screens under it. But only background image is visible, no other content is visible over the back image. This is my app.js

render() {
        return (
      <View 
      style={{flex:1}}>
         <ImageBackground style={{ flex: 1,
        resizeMode: 'cover'}} source={APP_BACKGROUND_IMAGE}  >
         <View style={styles.container}>
         <AppNavigator />
         </View>
         </ImageBackground>
</View>
        );
    }
}

const styles = StyleSheet.create({
  container:{ 
  position:'absolute',
  top: 0,
  bottom: 0,
  left: 0,
  right: 0
},
});

This is AppNavigator

render() {
        return (
        <MainStackNavigator/>
        );
    }
}

This is MainStackNavigator:

import { createStackNavigator } from 'react-navigation';
import OnBoarding from '../screens/OnBoarding';
import LoginContainer from '../screens/Login/LoginContainer';
export const MainStackNavigator = createStackNavigator({
    OnBoardingScreen: {screen: OnBoarding},
    LoginScreen: {screen: LoginContainer}
}):

This is my first screen OnBoarding:

render() {
    return (
        <AppIntro customStyles={{
                dotStyle: {
                    width: 6,
                    height: 6,
                },

            }} showDoneButton={false} showSkipButton={false}

                onSlideChange={this.onSlideChangeHandle} >
                {this.getOnBoardingScreens()}
            </AppIntro>

        );
    }
}

Can someone tell what wrong I am doing ? I have tried couple of things but nothing worked. :( P.S: When I call <OnBoarding/> directly under ImageBackground in app.js it works!

score 0 · Answer 1 · answered Dec 03 '18 at 06:24

0

Use the Container with the style defined and having gradient background. It's a straight forward way to set background in root of your app. 1.Import the Image you want to set in background. import Background from '../images/background_image.png'; 2. Use inline style of your root element, and use the imported image as below. backgroundImage: `url(${Background}

answered Dec 03 '18 at 06:24

Kiran Maniya

8,453
9
58
81

what different I am doing? – avani kothari Dec 03 '18 at 06:34
Use stylesheet insteadof using ImageBackground Tag. Try Container with inline CSS style. – Kiran Maniya Dec 03 '18 at 06:43
I have tried with `Image` component and giving it styles but it doesn't work – avani kothari Dec 03 '18 at 06:46
I am using react-native and there is no such style property that I am aware of. Can you please provide a snack.io implementation if possible ? – avani kothari Dec 03 '18 at 06:54
Here is the simplest example by Kyle Banks. https://kylewbanks.com/blog/fullscreen-background-image-in-react-native go through it and create BackgoundImage Component Accordingly. – Kiran Maniya Dec 04 '18 at 05:19
this is a deprecated version we can't put children inside `` anymore. – avani kothari Dec 04 '18 at 07:00
try ImageBackround insted Image, with the abouve given example – Kiran Maniya Dec 04 '18 at 09:28

ImageBackground not working, when used in root of the app

1 Answers1