Skip to content

Update Images.md with ImageBackground #15151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Update Images.md with ImageBackground #15151

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
987b3d6
Update Images.md with ImageBackground
Minishlink Jul 22, 2017
6998005
Take CR into account
Minishlink Jul 23, 2017
47655e3
Update Images.md
shergin Jul 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions docs/Images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,13 +186,15 @@ On the user side, this lets you annotate the object with useful attributes such

## Background Image via Nesting

A common feature request from developers familiar with the web is `background-image`. To handle this use case, simply create a normal `<Image>` component and add whatever children to it you would like to layer on top of it.
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](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed.

```javascript
return (
<Image source={...}>
<ImageBackground source={...}>
<Text>Inside</Text>
</Image>
</ImageBackground>
);
```

Expand Down