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

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>