Move Android's Image ViewConfig to JS

Reviewed By: sahrens

Differential Revision: D9492683

fbshipit-source-id: 035aa00650ee4908452fe18384d953882bc2a8d8
This commit is contained in:
Eli White 2018-08-23 21:35:16 -07:00 committed by Facebook Github Bot
parent daec505144
commit a700044e2e
3 changed files with 249 additions and 4 deletions

View File

@ -18,16 +18,15 @@ const React = require('React');
const ReactNative = require('ReactNative'); const ReactNative = require('ReactNative');
const StyleSheet = require('StyleSheet'); const StyleSheet = require('StyleSheet');
const StyleSheetPropType = require('StyleSheetPropType'); const StyleSheetPropType = require('StyleSheetPropType');
const ImageViewNativeComponent = require('ImageViewNativeComponent');
const TextAncestor = require('TextAncestor'); const TextAncestor = require('TextAncestor');
const flattenStyle = require('flattenStyle'); const flattenStyle = require('flattenStyle');
const merge = require('merge'); const merge = require('merge');
const requireNativeComponent = require('requireNativeComponent');
const resolveAssetSource = require('resolveAssetSource'); const resolveAssetSource = require('resolveAssetSource');
const {ImageLoader} = NativeModules; const {ImageLoader} = NativeModules;
const RKImage = requireNativeComponent('RCTImageView');
const TextInlineImageNativeComponent = require('TextInlineImageNativeComponent'); const TextInlineImageNativeComponent = require('TextInlineImageNativeComponent');
import type {ImageProps as ImagePropsType} from 'ImageProps'; import type {ImageProps as ImagePropsType} from 'ImageProps';
@ -182,7 +181,7 @@ declare class ImageComponentType extends ReactNative.NativeComponent<
*/ */
let Image = ( let Image = (
props: ImagePropsType, props: ImagePropsType,
forwardedRef: ?React.Ref<'RCTTextInlineImage' | 'RKImage'>, forwardedRef: ?React.Ref<'RCTTextInlineImage' | 'ImageViewNativeComponent'>,
) => { ) => {
let source = resolveAssetSource(props.source); let source = resolveAssetSource(props.source);
const defaultSource = resolveAssetSource(props.defaultSource); const defaultSource = resolveAssetSource(props.defaultSource);
@ -252,7 +251,7 @@ let Image = (
hasTextAncestor ? ( hasTextAncestor ? (
<TextInlineImageNativeComponent {...nativeProps} /> <TextInlineImageNativeComponent {...nativeProps} />
) : ( ) : (
<RKImage {...nativeProps} /> <ImageViewNativeComponent {...nativeProps} />
) )
} }
</TextAncestor.Consumer> </TextAncestor.Consumer>

View File

@ -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;

View File

@ -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;