ImageBackground is not taking full height of View in react native

Question

I am using ImageBackground in my react native app, but it not covering full height of the View

You can see that there is red space which is not covered by my image.

Below is my code:

<View
  style={styles.subDomainItem}>
  <ImageBackground
    resizeMode={'cover'}
    source={ImageConfig.script_default_cloud}
    style={{
      width: '100%',
      height: (dimensions.width - 20) / 2,
      backgroundColor: 'red',
      flex: 1,
      justifyContent: 'center',
    }}></ImageBackground>
</View>

subDomainItem: {
    maxWidth: '94%',
    width: '94%',
    marginHorizontal: '3%',
    marginVertical: 10,
    overflow: 'hidden',
    borderRadius: 10,
    flex: 1,
    elevation: 8,
  },

I want my image to cover all the red spaces at top and bottom, but I don't know what I am doing wrong.

Yes but you wrote `height: (dimensions.width - 20) / 2,`... Have you tried `height: 100%`? — Giovanni Esposito, Aug 04 '21 at 06:55
@GiovanniEsposito giving `height:'100%'`, is making the `View` disappear — pratteek shaurya, Aug 04 '21 at 07:04

Rahman Haroon · Answer 1 · 2021-08-04T09:18:15.750

You don't want to give a height and width for ImageBackground if you want to cover all space of parent View you just need give flex: 1 or height and width to 100% for ImageBackground.

import {
  View,
  Text,
  ImageBackground,
  Dimensions,
  StyleSheet,
} from 'react-native';

const WIDTH = Dimensions.get('screen').width;
const HEIGHT = Dimensions.get('screen').height;

const MainPage = () => {
   return (
     <View style={styles.subDomainItem}>
        <ImageBackground
            resizeMode="contain"
            source={ImageConfig.script_default_cloud}
            style={styles.bgImageStyle}
        >
            <Text>Sample</Text>
      </ImageBackground>
   </View>
);
};

const styles = StyleSheet.create({
  subDomainItem: {
      width: WIDTH,
      height: HEIGHT,
      alignItems: 'center',
  },
  bgImageStyle: {
    justifyContent: 'center',
    resizeMode: 'contain',
    width: WIDTH,
    height: HEIGHT,
  }
})

I have tried both the options, but it's not working – pratteek shaurya Aug 04 '21 at 07:07 — pratteek shaurya, Aug 04 '21 at 07:07
I have updated the answer please check it – Rahman Haroon Aug 04 '21 at 09:18 — Rahman Haroon, Aug 04 '21 at 09:18

Engr.Aftab Ufaq · Answer 2 · 2021-08-04T07:22:17.090

0

Try this. is wroking fine

import React from 'react'
import { View, ImageBackground,Text, Dimensions } from 'react-native'

const Backimage =  () => {
    return(
        <ImageBackground 
            style={{width:Dimensions.get("screen").width, height:Dimensions.get("screen").height}}
            source={require("./src/assets/water.png")} resizeMethod="resize">
            
        </ImageBackground>
    )
}

export default Backimage

edited Aug 04 '21 at 07:22

answered Aug 04 '21 at 07:02

Engr.Aftab Ufaq

3,356
3
21
47

1

yes I have tried this, but it's not working – pratteek shaurya Aug 04 '21 at 07:06
try to put `ImageBackground` inside ``, because I don't want the image on whole screen, it should be inside the given `View`. – pratteek shaurya Aug 04 '21 at 07:36
I have tested this solution. it is working fine. – Engr.Aftab Ufaq Aug 04 '21 at 07:38
no, its not covering all the area, add `backgroundColor: 'red'`, then you can see that there is still that red area – pratteek shaurya Aug 04 '21 at 07:53

score 0 · Answer 3 · answered Aug 04 '21 at 08:56

I think you should give your subDomainItem view an explicit height when styling it. You gave it a width of 94% but you haven‘t specified a height.

ImageBackground should then work properly by giving it a height of 100% if the parent component (subDomainItem in this case) has an explicit height.

ImageBackground is not taking full height of View in react native

3 Answers3