Skip to content

Commit 2361189

Browse files
zoontekmeta-codesync[bot]
authored andcommitted
Deprecate ImageBackground (#57412)
Summary: Deprecates `ImageBackground` as part of the effort to keep core lean. It is a thin wrapper around a `View` and an `Image`, and can easily be replaced by composing a `View` with an absolutely positioned `Image` and layering children on top: ```tsx import type { ReactNode, Ref } from "react"; import { Image, StyleSheet, View, type ImageProps, type ViewProps, } from "react-native"; type ImageBackgroundProps = Omit<ImageProps, "style"> & { children?: ReactNode; ref?: Ref<View>; style?: ViewProps["style"]; }; export const ImageBackground = ({ children, importantForAccessibility, ref, style, ...props }: ImageBackgroundProps) => { const { height, width } = StyleSheet.flatten(style); return ( <View ref={ref} accessibilityIgnoresInvertColors={true} importantForAccessibility={importantForAccessibility} style={style} > <Image {...props} importantForAccessibility={importantForAccessibility} style={[StyleSheet.absoluteFill, { height, width }]} /> {children} </View> ); }; ``` ## Changelog: [GENERAL] [DEPRECATED] - Deprecate `ImageBackground`, use a `View` with an absolutely positioned `Image` instead Pull Request resolved: #57412 Test Plan: - `deprecated` shows a strikethrough on `ImageBackground` in editors. - Importing/rendering `ImageBackground` logs the deprecation warning once. Reviewed By: javache Differential Revision: D110484567 Pulled By: cortinico fbshipit-source-id: 0f70893a0680b9bb34e1442bfef41e9210c08d07
1 parent 803456d commit 2361189

3 files changed

Lines changed: 22 additions & 1 deletion

File tree

packages/react-native/Libraries/Image/ImageBackground.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,11 @@ export type {ImageBackgroundProps} from './ImageProps';
4747
* });
4848
* ```
4949
*
50+
* ImageBackground is deprecated and will be removed in a future release.
51+
* Use a `View` with an absolutely positioned `Image` instead.
52+
*
5053
* @see https://reactnative.dev/docs/imagebackground
54+
* @deprecated
5155
*/
5256
class ImageBackground extends React.Component<ImageBackgroundProps> {
5357
setNativeProps(props: {...}) {

packages/react-native/Libraries/Image/ImageProps.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,13 @@ export type ImageProps = Readonly<{
338338
style?: ?ImageStyleProp,
339339
}>;
340340

341-
/** @build-types emit-as-interface Uniwind compatibility */
341+
/**
342+
* ImageBackground is deprecated and will be removed in a future release.
343+
* Use a `View` with an absolutely positioned `Image` instead.
344+
* @see https://reactnative.dev/docs/imagebackground
345+
* @deprecated
346+
* @build-types emit-as-interface Uniwind compatibility
347+
*/
342348
export type ImageBackgroundProps = Readonly<{
343349
...ImageProps,
344350
children?: React.Node,

packages/react-native/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,18 @@ module.exports = {
6262
get Image() {
6363
return require('./Libraries/Image/Image').default;
6464
},
65+
/**
66+
* @deprecated ImageBackground is deprecated and will be removed in a future release.
67+
* Use a View with an absolutely positioned Image instead.
68+
* See https://reactnative.dev/docs/imagebackground
69+
*/
6570
get ImageBackground() {
71+
warnOnce(
72+
'image-background-deprecated',
73+
'ImageBackground is deprecated and will be removed in a future release. ' +
74+
'Use a View with an absolutely positioned Image instead. ' +
75+
'See https://reactnative.dev/docs/imagebackground',
76+
);
6677
return require('./Libraries/Image/ImageBackground').default;
6778
},
6879
get InputAccessoryView() {

0 commit comments

Comments
 (0)