chore: Convert ImageBackground to function component

Author: retyui

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/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';