diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js index ee6bd5c8441..309879cd5d7 100644 --- a/Libraries/Image/Image.android.js +++ b/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 diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js index 5cd788918f7..78a795cb1fd 100644 --- a/Libraries/Image/Image.ios.js +++ b/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 ( - { ); }; -Image = React.forwardRef>( - Image, -); +Image = React.forwardRef< + ImagePropsType, + React.ElementRef, +>(Image); Image.displayName = 'Image'; /** @@ -205,6 +206,6 @@ const styles = StyleSheet.create({ module.exports = ((Image: any): React.AbstractComponent< ImagePropsType, - React.ElementRef, + React.ElementRef, > & ImageComponentStatics); diff --git a/Libraries/Image/ImageViewNativeComponent.js b/Libraries/Image/ImageViewNativeComponent.js index a2f9bd58767..3d42a66a11c 100644 --- a/Libraries/Image/ImageViewNativeComponent.js +++ b/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( - 'RCTImageView', - ); + ReactNativeViewConfigRegistry.register('RCTImageView', () => { + return ImageViewViewConfig; + }); + ImageViewNativeComponent = 'RCTImageView'; } else { ImageViewNativeComponent = requireNativeComponent( 'RCTImageView', ); } -module.exports = (ImageViewNativeComponent: HostComponent); +export default ((ImageViewNativeComponent: any): HostComponent); // flowlint-line unclear-type:off diff --git a/Libraries/Image/ImageViewViewConfig.js b/Libraries/Image/ImageViewViewConfig.js new file mode 100644 index 00000000000..7c6c1beda4e --- /dev/null +++ b/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<>);