Skip to content

Commit d41b9cc

Browse files
committed
Replace deprecated ImageBackground examples
1 parent 6742915 commit d41b9cc

2 files changed

Lines changed: 12 additions & 9 deletions

File tree

‎docs/animations.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@ import {
314314
Text,
315315
StyleSheet,
316316
View,
317-
ImageBackground,
317+
Image,
318318
Animated,
319319
useWindowDimensions,
320320
useAnimatedValue,
@@ -356,13 +356,17 @@ const App = () => {
356356
<View
357357
style={{width: windowWidth, height: 250}}
358358
key={imageIndex}>
359-
<ImageBackground source={{uri: image}} style={styles.card}>
359+
<View style={styles.card}>
360+
<Image
361+
source={{uri: image}}
362+
style={StyleSheet.absoluteFillObject}
363+
/>
360364
<View style={styles.textContainer}>
361365
<Text style={styles.infoText}>
362366
{'Image - ' + imageIndex}
363367
</Text>
364368
</View>
365-
</ImageBackground>
369+
</View>
366370
</View>
367371
);
368372
})}

‎docs/images.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -250,19 +250,18 @@ On the user side, this lets you annotate the object with useful attributes such
250250

251251
## Background Image via Nesting
252252

253-
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.
254-
255-
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.
253+
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.
256254

257255
```tsx
258256
return (
259-
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
257+
<View style={{width: '100%', height: '100%'}}>
258+
<Image source={...} style={StyleSheet.absoluteFillObject} />
260259
<Text>Inside</Text>
261-
</ImageBackground>
260+
</View>
262261
);
263262
```
264263

265-
Note that you must specify some width and height style attributes.
264+
Note that you must specify some width and height style attributes on the containing `View`.
266265

267266
## iOS Border Radius Styles
268267

0 commit comments

Comments
 (0)