ImageBackground ResizeMode

Question

I recently updated React-native and it introduced a warning, with the following code:

 <Image
      source={require('../../assets/icons/heart.png')}
      style={{
        resizeMode: 'contain',
        height: 25,
        width: 25
      }}
    >
      <Text>foobar</Text>
    </Image>

And the warning:

index.ios.bundle:50435 Using <Image> with children is deprecated and will be an error in the near future. Please reconsider the layout or use <ImageBackground> instead.

Trouble is when I use ImageBackground component instead it gives me a warning that you can't use ResizeMode style with it.

 <ImageBackground
      source={require('../../assets/icons/heart.png')}
      style={{
        resizeMode: 'contain',
        height: 25,
        width: 25
      }}
    >
      <Text>foobar</Text>
    </ImageBackground>

And the warning:

Warning: Failed prop type: Invalid props.style key 'resizeMode' supplied to 'View'. Bad object: { ResizeMode: 'contain, height: 25, width: 25}

How are you supposed to use ImageBackgrounds? There doens't seem to be any documentation about it online.

Answer 1

ImageBackground accepts two style props – style and imageStyle – which are (obviously) applied to the internal View and Image respectively. It's also worth noting that height and width values from the container style are applied to the image style automatically. For details visit this.

Answer 2

Move the resizeMode: 'contain' outside the inline style.

example:

   <ImageBackground
          source={require('../../assets/icons/heart.png')}
          resizeMode= 'contain'
          style={{
            height: 25,
            width: 25
          }}
        >
        <Text>foobar</Text>
    </ImageBackground>

Answer 3

I had exactly this issue; I ended up giving up on <ImageBackground> and went back to using <Image> but removed the elements inside it. I then wrapped the whole thing in a new <View> tag and positioned the <Image> absolutely in the styles. Here's where my code ended up if it's of use:

JSX

render() {
    return (
      <View style={{ alignItems: 'center' }}>
        <Image
          source={require('../images/pages/myImage.jpg')}
          style={styles.backgroundImage}
        />

Style

const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');

const styles = StyleSheet.create({

  backgroundImage: {
   flex: 1,
   position: 'absolute',
   resizeMode: 'cover',
   width: viewportWidth,
   height: viewportHeight,
   backgroundColor: 'transparent',
   justifyContent: 'center',
   alignItems: 'center'
  },