Skip to content

Replace deprecated ImageBackground examples #5250

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

Open
Abbondanzo wants to merge 1 commit into from
Open

Replace deprecated ImageBackground examples #5250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 7 additions & 3 deletions docs/animations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ import {
Text,
StyleSheet,
View,
ImageBackground,
Image,
Animated,
useWindowDimensions,
useAnimatedValue,
Expand Down Expand Up @@ -356,13 +356,17 @@ const App = () => {
<View
style={{width: windowWidth, height: 250}}
key={imageIndex}>
<ImageBackground source={{uri: image}} style={styles.card}>
<View style={styles.card}>
<Image
source={{uri: image}}
style={StyleSheet.absoluteFill}
/>
<View style={styles.textContainer}>
<Text style={styles.infoText}>
{'Image - ' + imageIndex}
</Text>
</View>
</ImageBackground>
</View>
</View>
);
})}
Expand Down
11 changes: 5 additions & 6 deletions docs/images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,19 +250,18 @@ 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, 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 basic. Refer to `<ImageBackground>`'s [documentation](imagebackground.md) for more insight, and create your own custom component when needed.
To layer content over an image, render an absolutely positioned [`Image`](image.md) inside a [`View`](view.md), followed by the content that should appear on top.

```tsx
return (
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<View style={{width: '100%', height: '100%'}}>
<Image source={...} style={StyleSheet.absoluteFill} />
<Text>Inside</Text>
</ImageBackground>
</View>
);
```

Note that you must specify some width and height style attributes.
Note that you must specify some width and height style attributes on the containing `View`.

## iOS Border Radius Styles

Expand Down
Loading