From a700044e2e6ff8922079b3c8b63dc5c8d6de9b69 Mon Sep 17 00:00:00 2001 From: Eli White Date: Thu, 23 Aug 2018 21:35:16 -0700 Subject: [PATCH] Move Android's Image ViewConfig to JS Reviewed By: sahrens Differential Revision: D9492683 fbshipit-source-id: 035aa00650ee4908452fe18384d953882bc2a8d8 --- Libraries/Image/Image.android.js | 7 +- Libraries/Image/ImageViewNativeComponent.js | 34 +++ .../ImageViewNativeComponentAndroidConfig.js | 212 ++++++++++++++++++ 3 files changed, 249 insertions(+), 4 deletions(-) create mode 100644 Libraries/Image/ImageViewNativeComponent.js create mode 100644 Libraries/Image/ImageViewNativeComponentAndroidConfig.js 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;