chore: Convert ImageBackground to function component

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

@@ -8,7 +8,6 @@
  * @format
  */
 
-import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageBackgroundProps} from './ImageProps';
 
 import View from '../Components/View/View';
@@ -53,68 +52,58 @@ export type {ImageBackgroundProps} from './ImageProps';
  * @see https://reactnative.dev/docs/imagebackground
  * @deprecated
  */
-class ImageBackground extends React.Component<ImageBackgroundProps> {
-  setNativeProps(props: {...}) {
-    // Work-around flow
-    const viewRef = this._viewRef;
-    if (viewRef) {
-      viewRef.setNativeProps(props);
-    }
-  }
 
-  _viewRef: ?React.ElementRef<typeof View> = null;
-
-  _captureRef = (ref: null | HostInstance) => {
-    this._viewRef = ref;
-  };
-
-  render(): React.Node {
-    const {
-      children,
-      style,
-      imageStyle,
-      imageRef,
-      importantForAccessibility,
-      ...props
-    } = this.props;
-
-    // $FlowFixMe[underconstrained-implicit-instantiation]
-    const flattenedStyle = flattenStyle(style);
-    return (
-      <View
-        accessibilityIgnoresInvertColors={true}
+const ImageBackground: component(
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: ImageBackgroundProps
+) = ({
+  ref,
+  children,
+  style,
+  imageStyle,
+  imageRef,
+  importantForAccessibility,
+  ...props
+}: {
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ...ImageBackgroundProps,
+}): React.Node => {
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  const flattenedStyle = flattenStyle(style);
+  return (
+    <View
+      accessibilityIgnoresInvertColors={true}
+      importantForAccessibility={importantForAccessibility}
+      style={style}
+      ref={ref}>
+      {/* $FlowFixMe[incompatible-use] */}
+      <Image
+        {...props}
         importantForAccessibility={importantForAccessibility}
-        style={style}
-        ref={this._captureRef}>
-        {/* $FlowFixMe[incompatible-use] */}
-        <Image
-          {...props}
-          importantForAccessibility={importantForAccessibility}
-          style={[
-            StyleSheet.absoluteFill,
-            {
-              // Temporary Workaround:
-              // Current (imperfect yet) implementation of <Image> overwrites width and height styles
-              // (which is not quite correct), and these styles conflict with explicitly set styles
-              // of <ImageBackground> and with our internal layout model here.
-              // So, we have to proxy/reapply these styles explicitly for actual <Image> component.
-              // This workaround should be removed after implementing proper support of
-              // intrinsic content size of the <Image>.
-              // $FlowFixMe[prop-missing]
-              width: flattenedStyle?.width,
-              // $FlowFixMe[prop-missing]
-              height: flattenedStyle?.height,
-            },
-            imageStyle,
-          ]}
-          ref={imageRef}
-        />
-        {children}
-      </View>
-    );
-  }
-}
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            // Temporary Workaround:
+            // Current (imperfect yet) implementation of <Image> overwrites width and height styles
+            // (which is not quite correct), and these styles conflict with explicitly set styles
+            // of <ImageBackground> and with our internal layout model here.
+            // So, we have to proxy/reapply these styles explicitly for actual <Image> component.
+            // This workaround should be removed after implementing proper support of
+            // intrinsic content size of the <Image>.
+            // $FlowFixMe[prop-missing]
+            width: flattenedStyle?.width,
+            // $FlowFixMe[prop-missing]
+            height: flattenedStyle?.height,
+          },
+          imageStyle,
+        ]}
+        ref={imageRef}
+      />
+      {children}
+    </View>
+  );
+};
 
-export type ImageBackgroundInstance = ImageBackground;
+ImageBackground.displayName = 'ImageBackground';
 
 export default ImageBackground;

packages/react-native/ReactNativeApi.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<c43c7ab238b80e42e8e8f17f2ff5cb47>>
+ * @generated SignedSource<<d7b37ee14e26431e5006542162907f01>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -244,6 +244,12 @@ declare const I18nManager: {
   swapLeftAndRightInRTL: (flipStyles: boolean) => void
 }
 declare const Image: ImageType
+declare const ImageBackground: typeof ImageBackground_default
+declare const ImageBackground_default: (
+  props: ImageBackgroundProps & {
+    ref?: React.Ref<React.ComponentRef<typeof View>>
+  },
+) => React.ReactNode
 declare const InputAccessoryView: typeof InputAccessoryView_default
 declare const InputAccessoryView_default: React.ComponentType<InputAccessoryViewProps>
 declare const Keyboard: typeof Keyboard_default
@@ -2384,11 +2390,7 @@ declare interface ILogBox {
 }
 declare type Image = typeof Image
 declare type ImageAndroid = AbstractImageAndroid & ImageComponentStaticsAndroid
-declare class ImageBackground extends React.Component<ImageBackgroundProps> {
-  render(): React.ReactNode
-  setNativeProps(props: {}): void
-}
-declare type ImageBackgroundInstance = ImageBackground
+declare type ImageBackground = typeof ImageBackground
 declare interface ImageBackgroundProps extends Readonly<
   Omit<ImageProps, "children" | "style">
 > {
@@ -5780,8 +5782,7 @@ export {
   IOSKeyboardEvent, // e67bfe3a
   IgnorePattern, // ec6f6ece
   Image, // fba54a35
-  ImageBackground, // 1543bae2
-  ImageBackgroundInstance, // 610d9eed
+  ImageBackground, // ce615745
   ImageBackgroundProps, // ceb153c3
   ImageErrorEvent, // 978933f4
   ImageInstance, // 9a100753

packages/react-native/index.js.flow

@@ -61,7 +61,10 @@ export type {
   ImageURISource,
 } from './Libraries/Image/ImageSource';
 export {default as Image} from './Libraries/Image/Image';
-export type {ImageBackgroundInstance} from './Libraries/Image/ImageBackground';
+/**
+ * `ImageBackgroundInstance` deprecated please use ViewInstance instead.
+ */
+export type {ViewInstance as ImageBackgroundInstance} from './Libraries/Components/View/View';
 export {default as ImageBackground} from './Libraries/Image/ImageBackground';
 export type {ImageResizeMode} from './Libraries/Image/ImageResizeMode';