Summary: Apparently different apps have different implementations of view managers that support different props. This is a problem that we will need to address. Unfortunately, this means we can't have a static config defined in JS. We will need to find another approach to this problem.

Reviewed By: sahrens

Differential Revision: D9500178

fbshipit-source-id: b591559164fcf29f5fd43e13a0f2da15011491c6
This commit is contained in:
Eli White 2018-08-24 14:01:57 -07:00 коммит произвёл Facebook Github Bot
Родитель 035597566f
Коммит d2c27f5bff
7 изменённых файлов: 5 добавлений и 718 удалений

Просмотреть файл

@ -10,29 +10,14 @@
'use strict';
const AndroidConfig = require('ViewNativeComponentAndroidConfig');
const Platform = require('Platform');
const ReactNative = require('ReactNative');
const verifyComponentAttributeEquivalence = require('verifyComponentAttributeEquivalence');
const requireNativeComponent = require('requireNativeComponent');
const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
import type {ViewProps} from 'ViewPropTypes';
type ViewNativeComponentType = Class<ReactNative.NativeComponent<ViewProps>>;
let NativeViewComponent;
if (Platform.OS === 'android') {
if (__DEV__) {
verifyComponentAttributeEquivalence('RCTView', AndroidConfig);
}
NativeViewComponent = ReactNativeViewConfigRegistry.register('RCTView', () =>
require('ViewNativeComponentAndroidConfig'),
);
} else {
NativeViewComponent = requireNativeComponent('RCTView');
}
const NativeViewComponent = requireNativeComponent('RCTView');
module.exports = ((NativeViewComponent: any): ViewNativeComponentType);

Просмотреть файл

@ -1,287 +0,0 @@
/**
* 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 ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
const processColor = require('processColor');
import type {ViewProps} from 'ViewPropTypes';
import type {____ViewStyle_Internal} from 'StyleSheetTypes';
import type {ReactNativeBaseComponentViewConfig} from 'ReactNativeTypes';
const colorHandler = {diff: null, process: processColor};
type Config = ReactNativeBaseComponentViewConfig<
$Keys<ViewProps> | $Keys<____ViewStyle_Internal>,
$Keys<____ViewStyle_Internal>,
>;
const ViewNativeComponentAndroidConfig: Config = {
bubblingEventTypes: {
topChange: {
phasedRegistrationNames: {
captured: 'onChangeCapture',
bubbled: 'onChange',
},
},
topTouchCancel: {
phasedRegistrationNames: {
captured: 'onTouchCancelCapture',
bubbled: 'onTouchCancel',
},
},
topTouchMove: {
phasedRegistrationNames: {
captured: 'onTouchMoveCapture',
bubbled: 'onTouchMove',
},
},
topTouchStart: {
phasedRegistrationNames: {
captured: 'onTouchStartCapture',
bubbled: 'onTouchStart',
},
},
topTouchEnd: {
phasedRegistrationNames: {
captured: 'onTouchEndCapture',
bubbled: 'onTouchEnd',
},
},
topSelect: {
phasedRegistrationNames: {
captured: 'onSelectCapture',
bubbled: 'onSelect',
},
},
},
Commands: {setPressed: 2, hotspotUpdate: 1},
directEventTypes: {
topLoadingError: {registrationName: 'onLoadingError'},
topLayout: {registrationName: 'onLayout'},
topScrollBeginDrag: {registrationName: 'onScrollBeginDrag'},
topContentSizeChange: {registrationName: 'onContentSizeChange'},
topMomentumScrollBegin: {registrationName: 'onMomentumScrollBegin'},
topScrollEndDrag: {registrationName: 'onScrollEndDrag'},
topMomentumScrollEnd: {registrationName: 'onMomentumScrollEnd'},
topLoadingStart: {registrationName: 'onLoadingStart'},
topSelectionChange: {registrationName: 'onSelectionChange'},
topLoadingFinish: {registrationName: 'onLoadingFinish'},
topMessage: {registrationName: 'onMessage'},
topScroll: {registrationName: 'onScroll'},
},
NativeProps: {
accessibilityComponentType: 'String',
accessibilityHint: 'String',
accessibilityLabel: 'String',
accessibilityLiveRegion: 'String',
accessibilityRole: 'String',
accessibilityStates: 'Array',
accessible: 'boolean',
alignContent: 'String',
alignItems: 'String',
alignSelf: 'String',
aspectRatio: 'number',
backgroundColor: 'Color',
borderBottomColor: 'Color',
borderBottomEndRadius: 'number',
borderBottomLeftRadius: 'number',
borderBottomRightRadius: 'number',
borderBottomStartRadius: 'number',
borderBottomWidth: 'number',
borderColor: 'Color',
borderEndColor: 'Color',
borderEndWidth: 'number',
borderLeftColor: 'Color',
borderLeftWidth: 'number',
borderRadius: 'number',
borderRightColor: 'Color',
borderRightWidth: 'number',
borderStartColor: 'Color',
borderStartWidth: 'number',
borderStyle: 'String',
borderTopColor: 'Color',
borderTopEndRadius: 'number',
borderTopLeftRadius: 'number',
borderTopRightRadius: 'number',
borderTopStartRadius: 'number',
borderTopWidth: 'number',
borderWidth: 'number',
bottom: 'Dynamic',
collapsable: 'boolean',
display: 'String',
elevation: 'number',
end: 'Dynamic',
flex: 'number',
flexBasis: 'Dynamic',
flexDirection: 'String',
flexGrow: 'number',
flexShrink: 'number',
flexWrap: 'String',
hasTVPreferredFocus: 'boolean',
height: 'Dynamic',
hitSlop: 'Map',
importantForAccessibility: 'String',
justifyContent: 'String',
left: 'Dynamic',
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',
nativeBackgroundAndroid: 'Map',
nativeForegroundAndroid: 'Map',
nativeID: 'String',
needsOffscreenAlphaCompositing: 'boolean',
onLayout: 'boolean',
opacity: 'number',
overflow: 'String',
padding: 'Dynamic',
paddingBottom: 'Dynamic',
paddingEnd: 'Dynamic',
paddingHorizontal: 'Dynamic',
paddingLeft: 'Dynamic',
paddingRight: 'Dynamic',
paddingStart: 'Dynamic',
paddingTop: 'Dynamic',
paddingVertical: 'Dynamic',
pointerEvents: 'String',
position: 'String',
removeClippedSubviews: 'boolean',
renderToHardwareTextureAndroid: 'boolean',
right: 'Dynamic',
rotation: 'number',
scaleX: 'number',
scaleY: 'number',
start: 'Dynamic',
testID: 'String',
top: 'Dynamic',
transform: 'Array',
translateX: 'number',
translateY: 'number',
width: 'Dynamic',
zIndex: 'number',
},
uiViewClassName: 'RCTView',
validAttributes: {
accessibilityComponentType: true,
accessibilityHint: true,
accessibilityLabel: true,
accessibilityLiveRegion: true,
accessibilityRole: true,
accessibilityStates: true,
accessible: true,
alignContent: true,
alignItems: true,
alignSelf: true,
aspectRatio: true,
backgroundColor: colorHandler,
borderBottomColor: colorHandler,
borderBottomEndRadius: true,
borderBottomLeftRadius: true,
borderBottomRightRadius: true,
borderBottomStartRadius: true,
borderBottomWidth: true,
borderColor: colorHandler,
borderEndColor: colorHandler,
borderEndWidth: true,
borderLeftColor: colorHandler,
borderLeftWidth: true,
borderRadius: true,
borderRightColor: colorHandler,
borderRightWidth: true,
borderStartColor: colorHandler,
borderStartWidth: true,
borderStyle: true,
borderTopColor: colorHandler,
borderTopEndRadius: true,
borderTopLeftRadius: true,
borderTopRightRadius: true,
borderTopStartRadius: true,
borderTopWidth: true,
borderWidth: true,
bottom: true,
collapsable: true,
display: true,
elevation: true,
end: true,
flex: true,
flexBasis: true,
flexDirection: true,
flexGrow: true,
flexShrink: true,
flexWrap: true,
hasTVPreferredFocus: true,
height: true,
hitSlop: true,
importantForAccessibility: true,
justifyContent: true,
left: 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,
nativeBackgroundAndroid: true,
nativeForegroundAndroid: true,
nativeID: true,
needsOffscreenAlphaCompositing: true,
onLayout: true,
opacity: true,
overflow: true,
padding: true,
paddingBottom: true,
paddingEnd: true,
paddingHorizontal: true,
paddingLeft: true,
paddingRight: true,
paddingStart: true,
paddingTop: true,
paddingVertical: true,
pointerEvents: true,
position: true,
removeClippedSubviews: true,
renderToHardwareTextureAndroid: true,
right: true,
rotation: true,
scaleX: true,
scaleY: true,
start: true,
testID: true,
top: true,
transform: true,
translateX: true,
translateY: true,
width: true,
zIndex: true,
style: ReactNativeStyleAttributes,
},
};
module.exports = ViewNativeComponentAndroidConfig;

Просмотреть файл

@ -10,25 +10,8 @@
'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');
}
const ImageViewNativeComponent = requireNativeComponent('RCTImageView');
module.exports = ImageViewNativeComponent;

Просмотреть файл

@ -1,212 +0,0 @@
/**
* 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;

Просмотреть файл

@ -10,137 +10,8 @@
'use strict';
const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
const requireNativeComponent = require('requireNativeComponent');
const verifyComponentAttributeEquivalence = require('verifyComponentAttributeEquivalence');
const viewConfig = {
NativeProps: {
alignContent: 'String',
alignItems: 'String',
alignSelf: 'String',
aspectRatio: 'number',
borderBottomWidth: 'number',
borderEndWidth: 'number',
borderLeftWidth: 'number',
borderRightWidth: 'number',
borderStartWidth: 'number',
borderTopWidth: 'number',
borderWidth: 'number',
bottom: 'Dynamic',
display: 'String',
end: 'Dynamic',
flex: 'number',
flexBasis: 'Dynamic',
flexDirection: 'String',
flexGrow: 'number',
flexShrink: 'number',
flexWrap: 'String',
headers: 'Map',
height: 'Dynamic',
justifyContent: 'String',
left: 'Dynamic',
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',
onLayout: 'boolean',
overflow: 'String',
padding: 'Dynamic',
paddingBottom: 'Dynamic',
paddingEnd: 'Dynamic',
paddingHorizontal: 'Dynamic',
paddingLeft: 'Dynamic',
paddingRight: 'Dynamic',
paddingStart: 'Dynamic',
paddingTop: 'Dynamic',
paddingVertical: 'Dynamic',
position: 'String',
right: 'Dynamic',
src: 'Array',
start: 'Dynamic',
tintColor: 'number',
top: 'Dynamic',
width: 'Dynamic',
},
uiViewClassName: 'RCTTextInlineImage',
validAttributes: {
alignContent: true,
alignItems: true,
alignSelf: true,
aspectRatio: true,
borderBottomWidth: true,
borderEndWidth: true,
borderLeftWidth: true,
borderRightWidth: true,
borderStartWidth: true,
borderTopWidth: true,
borderWidth: true,
bottom: true,
display: true,
end: true,
flex: true,
flexBasis: true,
flexDirection: true,
flexGrow: true,
flexShrink: true,
flexWrap: true,
headers: true,
height: true,
justifyContent: true,
left: 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,
onLayout: true,
overflow: true,
padding: true,
paddingBottom: true,
paddingEnd: true,
paddingHorizontal: true,
paddingLeft: true,
paddingRight: true,
paddingStart: true,
paddingTop: true,
paddingVertical: true,
position: true,
right: true,
src: true,
start: true,
tintColor: true,
top: true,
width: true,
style: ReactNativeStyleAttributes,
},
};
if (__DEV__) {
verifyComponentAttributeEquivalence('RCTTextInlineImage', viewConfig);
}
const TextInlineImage = ReactNativeViewConfigRegistry.register(
'RCTTextInlineImage',
() => viewConfig,
);
const TextInlineImage = requireNativeComponent('RCTTextInlineImage');
module.exports = TextInlineImage;

Просмотреть файл

@ -1,52 +0,0 @@
/**
* 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 deepDiffer = require('deepDiffer');
const getNativeComponentAttributes = require('getNativeComponentAttributes');
import type {ReactNativeBaseComponentViewConfig} from 'ReactNativeTypes';
/**
* The purpose of this function is to validate that the view config that
* native exposes for a given view manager is the same as the view config
* that is specified for that view manager in JS.
*
* In order to improve perf, we want to avoid calling into native to get
* the view config when each view manager is used. To do this, we are moving
* the configs to JS. In the future we will use these JS based view configs
* to codegen the view manager on native to ensure they stay in sync without
* this runtime check.
*
* If this function fails, that likely means a change was made to the native
* view manager without updating the JS config as well. Ideally you can make
* that direct change to the JS config. If you don't know what the differences
* are, the best approach I've found is to create a view that prints
* the return value of getNativeComponentAttributes, and then copying that
* text and pasting it back into JS:
* <Text selectable={true}>{JSON.stringify(getNativeComponentAttributes('RCTView'))}</Text>
*
* This is meant to be a stopgap until the time comes when we only have a
* single source of truth. I wonder if this message will still be here two
* years from now...
*/
function verifyComponentAttributeEquivalence(
componentName: string,
config: ReactNativeBaseComponentViewConfig<>,
) {
if (deepDiffer(getNativeComponentAttributes(componentName), config)) {
console.error(
`${componentName} config in JS does not match config specified by Native`,
);
}
}
module.exports = verifyComponentAttributeEquivalence;

Просмотреть файл

@ -90,8 +90,7 @@ jest
return ReactNative;
})
.mock('ensureComponentIsNative', () => () => true)
.mock('verifyComponentAttributeEquivalence', () => () => {});
.mock('ensureComponentIsNative', () => () => true);
const mockEmptyObject = {};
const mockNativeModules = {