diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js
index a557cd648..979bec3ed 100644
--- a/Libraries/Image/Image.android.js
+++ b/Libraries/Image/Image.android.js
@@ -18,16 +18,15 @@ const React = require('React');
const ReactNative = require('ReactNative');
const StyleSheet = require('StyleSheet');
const StyleSheetPropType = require('StyleSheetPropType');
+const ImageViewNativeComponent = require('ImageViewNativeComponent');
const TextAncestor = require('TextAncestor');
const flattenStyle = require('flattenStyle');
const merge = require('merge');
-const requireNativeComponent = require('requireNativeComponent');
const resolveAssetSource = require('resolveAssetSource');
const {ImageLoader} = NativeModules;
-const RKImage = requireNativeComponent('RCTImageView');
const TextInlineImageNativeComponent = require('TextInlineImageNativeComponent');
import type {ImageProps as ImagePropsType} from 'ImageProps';
@@ -182,7 +181,7 @@ declare class ImageComponentType extends ReactNative.NativeComponent<
*/
let Image = (
props: ImagePropsType,
- forwardedRef: ?React.Ref<'RCTTextInlineImage' | 'RKImage'>,
+ forwardedRef: ?React.Ref<'RCTTextInlineImage' | 'ImageViewNativeComponent'>,
) => {
let source = resolveAssetSource(props.source);
const defaultSource = resolveAssetSource(props.defaultSource);
@@ -252,7 +251,7 @@ let Image = (
hasTextAncestor ? (
) : (
-
+
)
}
diff --git a/Libraries/Image/ImageViewNativeComponent.js b/Libraries/Image/ImageViewNativeComponent.js
new file mode 100644
index 000000000..eb7e30506
--- /dev/null
+++ b/Libraries/Image/ImageViewNativeComponent.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const AndroidConfig = require('ImageViewNativeComponentAndroidConfig');
+const Platform = require('Platform');
+
+const verifyComponentAttributeEquivalence = require('verifyComponentAttributeEquivalence');
+const requireNativeComponent = require('requireNativeComponent');
+const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+
+let ImageViewNativeComponent;
+if (Platform.OS === 'android') {
+ if (__DEV__) {
+ verifyComponentAttributeEquivalence('RCTImageView', AndroidConfig);
+ }
+
+ ImageViewNativeComponent = ReactNativeViewConfigRegistry.register(
+ 'RCTImageView',
+ () => AndroidConfig,
+ );
+} else {
+ ImageViewNativeComponent = requireNativeComponent('RCTImageView');
+}
+
+module.exports = ImageViewNativeComponent;
diff --git a/Libraries/Image/ImageViewNativeComponentAndroidConfig.js b/Libraries/Image/ImageViewNativeComponentAndroidConfig.js
new file mode 100644
index 000000000..b50042740
--- /dev/null
+++ b/Libraries/Image/ImageViewNativeComponentAndroidConfig.js
@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
+
+const processColor = require('processColor');
+
+const colorHandler = {diff: null, process: processColor};
+
+const viewConfig = {
+ directEventTypes: {
+ topError: {registrationName: 'onError'},
+ topLoad: {registrationName: 'onLoad'},
+ topLoadEnd: {registrationName: 'onLoadEnd'},
+ topLoadStart: {registrationName: 'onLoadStart'},
+ },
+ NativeProps: {
+ accessibilityComponentType: 'String',
+ accessibilityHint: 'String',
+ accessibilityLabel: 'String',
+ accessibilityLiveRegion: 'String',
+ accessibilityRole: 'String',
+ accessibilityStates: 'Array',
+ alignContent: 'String',
+ alignItems: 'String',
+ alignSelf: 'String',
+ aspectRatio: 'number',
+ backgroundColor: 'Color',
+ blurRadius: 'number',
+ borderBottomLeftRadius: 'number',
+ borderBottomRightRadius: 'number',
+ borderBottomWidth: 'number',
+ borderColor: 'Color',
+ borderEndWidth: 'number',
+ borderLeftWidth: 'number',
+ borderRadius: 'number',
+ borderRightWidth: 'number',
+ borderStartWidth: 'number',
+ borderTopLeftRadius: 'number',
+ borderTopRightRadius: 'number',
+ borderTopWidth: 'number',
+ borderWidth: 'number',
+ bottom: 'Dynamic',
+ defaultSrc: 'String',
+ display: 'String',
+ elevation: 'number',
+ end: 'Dynamic',
+ fadeDuration: 'number',
+ flex: 'number',
+ flexBasis: 'Dynamic',
+ flexDirection: 'String',
+ flexGrow: 'number',
+ flexShrink: 'number',
+ flexWrap: 'String',
+ headers: 'Map',
+ height: 'Dynamic',
+ importantForAccessibility: 'String',
+ justifyContent: 'String',
+ left: 'Dynamic',
+ loadingIndicatorSrc: 'String',
+ margin: 'Dynamic',
+ marginBottom: 'Dynamic',
+ marginEnd: 'Dynamic',
+ marginHorizontal: 'Dynamic',
+ marginLeft: 'Dynamic',
+ marginRight: 'Dynamic',
+ marginStart: 'Dynamic',
+ marginTop: 'Dynamic',
+ marginVertical: 'Dynamic',
+ maxHeight: 'Dynamic',
+ maxWidth: 'Dynamic',
+ minHeight: 'Dynamic',
+ minWidth: 'Dynamic',
+ nativeID: 'String',
+ onLayout: 'boolean',
+ opacity: 'number',
+ overflow: 'String',
+ overlayColor: 'number',
+ padding: 'Dynamic',
+ paddingBottom: 'Dynamic',
+ paddingEnd: 'Dynamic',
+ paddingHorizontal: 'Dynamic',
+ paddingLeft: 'Dynamic',
+ paddingRight: 'Dynamic',
+ paddingStart: 'Dynamic',
+ paddingTop: 'Dynamic',
+ paddingVertical: 'Dynamic',
+ position: 'String',
+ progressiveRenderingEnabled: 'boolean',
+ renderToHardwareTextureAndroid: 'boolean',
+ resizeMethod: 'String',
+ resizeMode: 'String',
+ right: 'Dynamic',
+ rotation: 'number',
+ scaleX: 'number',
+ scaleY: 'number',
+ shouldNotifyLoadEvents: 'boolean',
+ src: 'Array',
+ start: 'Dynamic',
+ testID: 'String',
+ tintColor: 'Color',
+ top: 'Dynamic',
+ transform: 'Array',
+ translateX: 'number',
+ translateY: 'number',
+ width: 'Dynamic',
+ zIndex: 'number',
+ },
+ uiViewClassName: 'RCTImageView',
+ validAttributes: {
+ accessibilityComponentType: true,
+ accessibilityHint: true,
+ accessibilityLabel: true,
+ accessibilityLiveRegion: true,
+ accessibilityRole: true,
+ accessibilityStates: true,
+ alignContent: true,
+ alignItems: true,
+ alignSelf: true,
+ aspectRatio: true,
+ backgroundColor: colorHandler,
+ blurRadius: true,
+ borderBottomLeftRadius: true,
+ borderBottomRightRadius: true,
+ borderBottomWidth: true,
+ borderColor: colorHandler,
+ borderEndWidth: true,
+ borderLeftWidth: true,
+ borderRadius: true,
+ borderRightWidth: true,
+ borderStartWidth: true,
+ borderTopLeftRadius: true,
+ borderTopRightRadius: true,
+ borderTopWidth: true,
+ borderWidth: true,
+ bottom: true,
+ defaultSrc: true,
+ display: true,
+ elevation: true,
+ end: true,
+ fadeDuration: true,
+ flex: true,
+ flexBasis: true,
+ flexDirection: true,
+ flexGrow: true,
+ flexShrink: true,
+ flexWrap: true,
+ headers: true,
+ height: true,
+ importantForAccessibility: true,
+ justifyContent: true,
+ left: true,
+ loadingIndicatorSrc: true,
+ margin: true,
+ marginBottom: true,
+ marginEnd: true,
+ marginHorizontal: true,
+ marginLeft: true,
+ marginRight: true,
+ marginStart: true,
+ marginTop: true,
+ marginVertical: true,
+ maxHeight: true,
+ maxWidth: true,
+ minHeight: true,
+ minWidth: true,
+ nativeID: true,
+ onLayout: true,
+ opacity: true,
+ overflow: true,
+ overlayColor: true,
+ padding: true,
+ paddingBottom: true,
+ paddingEnd: true,
+ paddingHorizontal: true,
+ paddingLeft: true,
+ paddingRight: true,
+ paddingStart: true,
+ paddingTop: true,
+ paddingVertical: true,
+ position: true,
+ progressiveRenderingEnabled: true,
+ renderToHardwareTextureAndroid: true,
+ resizeMethod: true,
+ resizeMode: true,
+ right: true,
+ rotation: true,
+ scaleX: true,
+ scaleY: true,
+ shouldNotifyLoadEvents: true,
+ src: true,
+ start: true,
+ testID: true,
+ tintColor: colorHandler,
+ top: true,
+ transform: true,
+ translateX: true,
+ translateY: true,
+ width: true,
+ zIndex: true,
+ style: ReactNativeStyleAttributes,
+ },
+};
+
+module.exports = viewConfig;