Handwritten view configs for Image

Summary:
Hand writing view configs for NativeImageViewComponent so that it'll work in bridgeless mode and won't fall back to the UIManager.

Changelog: [Internal]

Reviewed By: ejanzer

Differential Revision: D19217961

fbshipit-source-id: d5a123b35a75ba3e22c57b1dde18a47893681614

Libraries/Image/Image.android.js

@@ -13,7 +13,7 @@
 const DeprecatedImageStylePropTypes = require('../DeprecatedPropTypes/DeprecatedImageStylePropTypes');
 const DeprecatedStyleSheetPropType = require('../DeprecatedPropTypes/DeprecatedStyleSheetPropType');
 const DeprecatedViewPropTypes = require('../DeprecatedPropTypes/DeprecatedViewPropTypes');
-const ImageViewNativeComponent = require('./ImageViewNativeComponent');
+import ImageViewNativeComponent from './ImageViewNativeComponent';
 const PropTypes = require('prop-types');
 const React = require('react');
 const ReactNative = require('../Renderer/shims/ReactNative'); // eslint-disable-line no-unused-vars

Libraries/Image/Image.ios.js

@@ -23,7 +23,7 @@ import type {ImageProps as ImagePropsType} from './ImageProps';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import NativeImageLoaderIOS from './NativeImageLoaderIOS';
 
-const RCTImageView = require('./ImageViewNativeComponent');
+import ImageViewNativeComponent from './ImageViewNativeComponent';
 
 function getSize(
   uri: string,
@@ -124,7 +124,7 @@ let Image = (props: ImagePropsType, forwardedRef) => {
   }
 
   return (
-    <RCTImageView
+    <ImageViewNativeComponent
       {...props}
       ref={forwardedRef}
       style={style}
@@ -135,9 +135,10 @@ let Image = (props: ImagePropsType, forwardedRef) => {
   );
 };
 
-Image = React.forwardRef<ImagePropsType, React.ElementRef<typeof RCTImageView>>(
-  Image,
-);
+Image = React.forwardRef<
+  ImagePropsType,
+  React.ElementRef<typeof ImageViewNativeComponent>,
+>(Image);
 Image.displayName = 'Image';
 
 /**
@@ -205,6 +206,6 @@ const styles = StyleSheet.create({
 
 module.exports = ((Image: any): React.AbstractComponent<
   ImagePropsType,
-  React.ElementRef<typeof RCTImageView>,
+  React.ElementRef<typeof ImageViewNativeComponent>,
 > &
   ImageComponentStatics);

Libraries/Image/ImageViewNativeComponent.js

@@ -12,8 +12,6 @@
 
 const requireNativeComponent = require('../ReactNative/requireNativeComponent');
 
-import codegenNativeComponent from '../Utilities/codegenNativeComponent';
-
 import type {DangerouslyImpreciseStyle} from '../StyleSheet/StyleSheet';
 import type {ResolvedAssetSource} from './AssetSourceResolver';
 import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
@@ -22,6 +20,9 @@ import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {ColorValue} from '../StyleSheet/StyleSheetTypes';
 
+import ImageViewViewConfig from './ImageViewViewConfig';
+const ReactNativeViewConfigRegistry = require('../Renderer/shims/ReactNativeViewConfigRegistry');
+
 type NativeProps = $ReadOnly<{|
   ...ImageProps,
   ...ViewProps,
@@ -40,15 +41,15 @@ type NativeProps = $ReadOnly<{|
 |}>;
 
 let ImageViewNativeComponent;
-
 if (global.RN$Bridgeless) {
-  ImageViewNativeComponent = codegenNativeComponent<NativeProps>(
-    'RCTImageView',
-  );
+  ReactNativeViewConfigRegistry.register('RCTImageView', () => {
+    return ImageViewViewConfig;
+  });
+  ImageViewNativeComponent = 'RCTImageView';
 } else {
   ImageViewNativeComponent = requireNativeComponent<NativeProps>(
     'RCTImageView',
   );
 }
 
-module.exports = (ImageViewNativeComponent: HostComponent<NativeProps>);
+export default ((ImageViewNativeComponent: any): HostComponent<NativeProps>); // flowlint-line unclear-type:off

Libraries/Image/ImageViewViewConfig.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+import ReactNativeViewViewConfig from '../Components/View/ReactNativeViewViewConfig';
+import type {ReactNativeBaseComponentViewConfig} from '../Renderer/shims/ReactNativeTypes';
+
+const ImageViewViewConfig = {
+  uiViewClassName: 'RCTImageView',
+  bubblingEventTypes: {},
+  directEventTypes: {
+    topLoadStart: {
+      registrationName: 'onLoadStart',
+    },
+    topProgress: {
+      registrationName: 'onProgress',
+    },
+    topError: {
+      registrationName: 'onError',
+    },
+    topPartialLoad: {
+      registrationName: 'onPartialLoad',
+    },
+    topLoad: {
+      registrationName: 'onLoad',
+    },
+    topLoadEnd: {
+      registrationName: 'onLoadEnd',
+    },
+  },
+  validAttributes: {
+    ...ReactNativeViewViewConfig.validAttributes,
+    blurRadius: true,
+    capInsets: {diff: (require('../Utilities/differ/insetsDiffer'): any)}, // flowlint-line unclear-type:off
+    defaultSource: {
+      process: require('./resolveAssetSource'),
+    },
+    defaultSrc: true,
+    fadeDuration: true,
+    headers: true,
+    loadingIndicatorSrc: true,
+    onError: true,
+    onLoad: true,
+    onLoadEnd: true,
+    onLoadStart: true,
+    onPartialLoad: true,
+    onProgress: true,
+    overlayColor: {process: require('../StyleSheet/processColor')},
+    progressiveRenderingEnabled: true,
+    resizeMethod: true,
+    resizeMode: true,
+    shouldNotifyLoadEvents: true,
+    source: true,
+    src: true,
+    tintColor: {process: require('../StyleSheet/processColor')},
+  },
+};
+
+module.exports = (ImageViewViewConfig: ReactNativeBaseComponentViewConfig<>);