React native background image warning: Invalid props.style key `resizeMode` supplied to `View`

Question

Gathering guidance from this post about how to create a background image in RN I learned that I need to have an Image containing other elements:

 <Image style=... source=...>
     <Text>Hello</Text>
 </Image>

However, I think that when an Image has inner elements RN converts it to a view. I came to this conclusion because I am getting this warning:

This is peculiar as the resizeMode was supplied to an Image and not to a View. The style of the containing image as described in the warning:

{
      width: null,
      height: null,
      overflow: "hidden",
      flex: 1,
      flexDirection: "column",
      justifyContent: "space-between",
      alignItems: "stretch",
      resizeMode: "cover"
}

Should I ignore this warning or is there a proper way to create these kind of structures:

ah , so here is the solution: http://stackoverflow.com/a/37576063/1206613 — Ivan Chernykh, Jul 05 '16 at 07:55

score 0 · Answer 1 · answered Jul 06 '16 at 20:39

When there's a mismatch between the raw image dimensions and the frame, resizeMode prop determines how to resize the image.

For your use-case contain should be added as a value for this prop and the prop should be added on top of the image, not as part of styles.

contain will

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

<Image style=... source=... resizeMode="contain">
    <Text>Hello</Text>
 </Image>

React native background image warning: Invalid props.style key `resizeMode` supplied to `View`

1 Answers1