Edit

ImageBackground

A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

You might not want to use <ImageBackground> in some cases, since the implementation is very simple. Refer to <ImageBackground>'s source code for more insight, and create your own custom component when needed.

Note that you must specify some width and height style attributes.

Example

return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

Props

• Image props...
• style
• imageStyle
• imageRef

---

Reference

Props

style

Type	Required
view styles	No

imageStyle

Type	Required
image styles	No

imageRef

Allows to set a reference to the inner Image component

Type	Required
Ref	No