From c6c1f39a53da1a84c35c935e1ce946d8febdaab7 Mon Sep 17 00:00:00 2001
From: Peter Abbondanzo <abbo@meta.com>
Date: Fri, 25 Sep 2026 11:58:26 -0400
Subject: [PATCH] Replace deprecated ImageBackground examples

---
 docs/animations.md                                | 10 +++++++---
 docs/images.md                                    | 11 +++++------
 website/versioned_docs/version-0.87/animations.md | 10 +++++++---
 website/versioned_docs/version-0.87/images.md     | 11 +++++------
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/docs/animations.md b/docs/animations.md
index 7619c6713d4..3c7ae0cbbb8 100644
--- a/docs/animations.md
+++ b/docs/animations.md
@@ -314,7 +314,7 @@ import {
   Text,
   StyleSheet,
   View,
-  ImageBackground,
+  Image,
   Animated,
   useWindowDimensions,
   useAnimatedValue,
@@ -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>
               );
             })}
diff --git a/docs/images.md b/docs/images.md
index 0445967067d..f6b16f8010f 100644
--- a/docs/images.md
+++ b/docs/images.md
@@ -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
 
diff --git a/website/versioned_docs/version-0.87/animations.md b/website/versioned_docs/version-0.87/animations.md
index 7619c6713d4..3c7ae0cbbb8 100644
--- a/website/versioned_docs/version-0.87/animations.md
+++ b/website/versioned_docs/version-0.87/animations.md
@@ -314,7 +314,7 @@ import {
   Text,
   StyleSheet,
   View,
-  ImageBackground,
+  Image,
   Animated,
   useWindowDimensions,
   useAnimatedValue,
@@ -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>
               );
             })}
diff --git a/website/versioned_docs/version-0.87/images.md b/website/versioned_docs/version-0.87/images.md
index 0445967067d..f6b16f8010f 100644
--- a/website/versioned_docs/version-0.87/images.md
+++ b/website/versioned_docs/version-0.87/images.md
@@ -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