ImageBackground ResizeMode

Question

I recently updated React-native and entered 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 a warning:

index.ios.bundle: 50435 Using <Picture> with children is deprecated and will be a mistake in the near future. Revise the layout or use <ImageBackground> instead.

The problem is that I am using the ImageBackground component, instead it gives me a warning that you cannot use the ResizeMode style with it.

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

And a warning:

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

How should you use ImageBackgrounds? There seems to be no documentation on this on the Internet.

Answer 1

ImageBackground accepts two attribute styles - style and imageStyle - which (obviously) apply to the internal representation and image, respectively. It is also worth noting that the height and width values ​​from the container style are automatically applied to the image style. See more details.

Answer 2

Move 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 problem; I ended up abandoning <ImageBackground> and returning to using <Image> , but removed the elements inside it. Then I wrapped it all in a new <View> and positioned <Image> absolutely in styles. Here, where my code ended, if used:

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' },