Introduce PlatformBaseViewConfig and fix SVC for RCTView
Summary: ## Impact Fix the Static ViewConfig for <View/>. This diff fixes the base ViewConfig for all HostComponents on both platforms. Consequently, it simplifies SVC reconciliation efforts, by nearly eliminating the first of these classes of SVC errors: 1. Unexpected properties in SVC 2. Missing properties in SVC 3. Not matching properites in SVC ## What is the base ViewConfig on each iOS/Android? **On iOS:** - All props come from ViewManagers - All HostComponent ViewManagers extend <View/> ViewManager https://pxl.cl/1SxdF Therefore, the base ViewConfig for all components should be <View/>'s static ViewConfig. **On Android:** The component model is a bit more complicated: https://pxl.cl/1Vmp5 Takeaways: - Props come from Shadow Nodes **and** ViewManagers - Nearly all HostComponent ViewManagers extend BaseViewManager. But, that's not <View/>'s ViewManager. - <View/>'s ViewManager is [ReactViewManager](https://fburl.com/code/0zalv8zk), which is a descendent of BaseViewManager, and declares its own ReactProps. So, on Android, it's not safe for the base ViewConfig to be <View>'s ViewConfig: 1. No components actualy incorportate <View/>'s props 2. Some components don't even incorporate BaseViewManager's props. So, what should the base ViewConfig be on Android? - Nearly all components extend BaseViewManager. BaseViewManager must have a shadow node [that extends LayoutShadowNode](https://www.internalfb.com/code/fbsource/[47d68ebc06e64d97da9d069f1ab662b392f0df8a]/xplat/js/react-native-github/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java?lines=40). Therefore, we'll make the base ViewConfig on Android be generated by BaseViewManager + LayoutShadowNode. ## Changes In this diff, I removed ReactNativeViewViewConfig, and introduced a new view config called PlatformBaseViewConfig. This ViewConfig partial will capture all the props available on all HostComponents on **both** platforms. This may not necessarily be the props made available on <View/>. The only components that don't extend the base platform props are: RCTTextInlineImage. What we do with these components is TBD. Changelog: [Internal] Reviewed By: p-sun, yungsters Differential Revision: D33135055 fbshipit-source-id: 7299f60ae45ed499ce47c0d0a6309a047bff90bb
This commit is contained in:
Родитель
9b55f1ed7e
Коммит
c19c38303a
|
@ -1,374 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*
|
|
||||||
* @flow
|
|
||||||
* @format
|
|
||||||
*/
|
|
||||||
|
|
||||||
import type {ViewConfig} from '../../Renderer/shims/ReactNativeTypes';
|
|
||||||
import ReactNativeViewViewConfigAndroid from './ReactNativeViewViewConfigAndroid';
|
|
||||||
import ReactNativeViewViewConfigMacOS from './ReactNativeViewViewConfigMacOS'; // TODO(macOS GH#774)
|
|
||||||
import {Platform} from 'react-native';
|
|
||||||
|
|
||||||
const ReactNativeViewConfig: ViewConfig = {
|
|
||||||
uiViewClassName: 'RCTView',
|
|
||||||
baseModuleName: null,
|
|
||||||
Manager: 'ViewManager',
|
|
||||||
Commands: {},
|
|
||||||
Constants: {},
|
|
||||||
bubblingEventTypes: {
|
|
||||||
...ReactNativeViewViewConfigAndroid.bubblingEventTypes,
|
|
||||||
topBlur: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onBlur',
|
|
||||||
captured: 'onBlurCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topChange: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onChange',
|
|
||||||
captured: 'onChangeCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topEndEditing: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onEndEditing',
|
|
||||||
captured: 'onEndEditingCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topFocus: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onFocus',
|
|
||||||
captured: 'onFocusCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topKeyPress: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onKeyPress',
|
|
||||||
captured: 'onKeyPressCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topPress: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onPress',
|
|
||||||
captured: 'onPressCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topSubmitEditing: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onSubmitEditing',
|
|
||||||
captured: 'onSubmitEditingCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topTouchCancel: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onTouchCancel',
|
|
||||||
captured: 'onTouchCancelCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topTouchEnd: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onTouchEnd',
|
|
||||||
captured: 'onTouchEndCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topTouchMove: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onTouchMove',
|
|
||||||
captured: 'onTouchMoveCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topTouchStart: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onTouchStart',
|
|
||||||
captured: 'onTouchStartCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
directEventTypes: {
|
|
||||||
...ReactNativeViewViewConfigAndroid.directEventTypes,
|
|
||||||
...ReactNativeViewViewConfigMacOS.directEventTypes, // TODO(macOS GH#774)
|
|
||||||
topAccessibilityAction: {
|
|
||||||
registrationName: 'onAccessibilityAction',
|
|
||||||
},
|
|
||||||
topAccessibilityEscape: {
|
|
||||||
registrationName: 'onAccessibilityEscape',
|
|
||||||
},
|
|
||||||
topAccessibilityTap: {
|
|
||||||
registrationName: 'onAccessibilityTap',
|
|
||||||
},
|
|
||||||
topLayout: {
|
|
||||||
registrationName: 'onLayout',
|
|
||||||
},
|
|
||||||
topMagicTap: {
|
|
||||||
registrationName: 'onMagicTap',
|
|
||||||
},
|
|
||||||
topKeyUp: {
|
|
||||||
registrationName: 'onKeyUp',
|
|
||||||
},
|
|
||||||
topKeyDown: {
|
|
||||||
registrationName: 'onKeyDown',
|
|
||||||
},
|
|
||||||
topPointerEnter: {
|
|
||||||
registrationName: 'pointerenter',
|
|
||||||
},
|
|
||||||
topPointerLeave: {
|
|
||||||
registrationName: 'pointerleave',
|
|
||||||
},
|
|
||||||
topPointerMove: {
|
|
||||||
registrationName: 'pointermove',
|
|
||||||
},
|
|
||||||
// Events for react-native-gesture-handler (T45765076)
|
|
||||||
// Remove once this library can handle JS View Configs
|
|
||||||
onGestureHandlerEvent: {
|
|
||||||
registrationName: 'onGestureHandlerEvent',
|
|
||||||
},
|
|
||||||
onGestureHandlerStateChange: {
|
|
||||||
registrationName: 'onGestureHandlerStateChange',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
validAttributes: {
|
|
||||||
...ReactNativeViewViewConfigAndroid.validAttributes,
|
|
||||||
...ReactNativeViewViewConfigMacOS.validAttributes, // TODO(macOS GH#774)
|
|
||||||
accessibilityActions: true,
|
|
||||||
accessibilityElementsHidden: true,
|
|
||||||
accessibilityHint: true,
|
|
||||||
accessibilityIgnoresInvertColors: true,
|
|
||||||
accessibilityLabel: true,
|
|
||||||
accessibilityLiveRegion: true,
|
|
||||||
accessibilityRole: true,
|
|
||||||
accessibilityState: true,
|
|
||||||
accessibilityValue: true,
|
|
||||||
accessibilityViewIsModal: true,
|
|
||||||
accessible: true,
|
|
||||||
alignContent: true,
|
|
||||||
alignItems: true,
|
|
||||||
alignSelf: true,
|
|
||||||
aspectRatio: true,
|
|
||||||
backfaceVisibility: true,
|
|
||||||
backgroundColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderBottomColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderBottomEndRadius: true,
|
|
||||||
borderBottomLeftRadius: true,
|
|
||||||
borderBottomRightRadius: true,
|
|
||||||
borderBottomStartRadius: true,
|
|
||||||
borderBottomWidth: true,
|
|
||||||
borderColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderEndColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderEndWidth: true,
|
|
||||||
borderLeftColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderLeftWidth: true,
|
|
||||||
borderRadius: true,
|
|
||||||
borderRightColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderRightWidth: true,
|
|
||||||
borderStartColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderStartWidth: true,
|
|
||||||
borderStyle: true,
|
|
||||||
borderTopColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderTopEndRadius: true,
|
|
||||||
borderTopLeftRadius: true,
|
|
||||||
borderTopRightRadius: true,
|
|
||||||
borderTopStartRadius: true,
|
|
||||||
borderTopWidth: true,
|
|
||||||
borderWidth: true,
|
|
||||||
bottom: true,
|
|
||||||
clickable: true,
|
|
||||||
collapsable: true,
|
|
||||||
direction: true,
|
|
||||||
display: true,
|
|
||||||
elevation: true,
|
|
||||||
end: true,
|
|
||||||
flex: true,
|
|
||||||
flexBasis: true,
|
|
||||||
flexDirection: true,
|
|
||||||
flexGrow: true,
|
|
||||||
flexShrink: true,
|
|
||||||
flexWrap: true,
|
|
||||||
height: true,
|
|
||||||
hitSlop: {diff: require('../../Utilities/differ/insetsDiffer')},
|
|
||||||
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,
|
|
||||||
nativeID: true,
|
|
||||||
needsOffscreenAlphaCompositing: true,
|
|
||||||
onAccessibilityAction: true,
|
|
||||||
onAccessibilityEscape: true,
|
|
||||||
onAccessibilityTap: true,
|
|
||||||
pointerenter: true,
|
|
||||||
pointerleave: true,
|
|
||||||
pointermove: true,
|
|
||||||
onLayout: true,
|
|
||||||
onMagicTap: 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,
|
|
||||||
shadowColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
shadowOffset: {diff: require('../../Utilities/differ/sizesDiffer')},
|
|
||||||
shadowOpacity: true,
|
|
||||||
shadowRadius: true,
|
|
||||||
shouldRasterizeIOS: true,
|
|
||||||
start: true,
|
|
||||||
style: {
|
|
||||||
alignContent: true,
|
|
||||||
alignItems: true,
|
|
||||||
alignSelf: true,
|
|
||||||
aspectRatio: true,
|
|
||||||
backfaceVisibility: true,
|
|
||||||
backgroundColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderBottomColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderBottomEndRadius: true,
|
|
||||||
borderBottomLeftRadius: true,
|
|
||||||
borderBottomRightRadius: true,
|
|
||||||
borderBottomStartRadius: true,
|
|
||||||
borderBottomWidth: true,
|
|
||||||
borderColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderEndColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderEndWidth: true,
|
|
||||||
borderLeftColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderLeftWidth: true,
|
|
||||||
borderRadius: true,
|
|
||||||
borderRightColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderRightWidth: true,
|
|
||||||
borderStartColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderStartWidth: true,
|
|
||||||
borderStyle: true,
|
|
||||||
borderTopColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
borderTopEndRadius: true,
|
|
||||||
borderTopLeftRadius: true,
|
|
||||||
borderTopRightRadius: true,
|
|
||||||
borderTopStartRadius: true,
|
|
||||||
borderTopWidth: true,
|
|
||||||
borderWidth: true,
|
|
||||||
bottom: true,
|
|
||||||
color: {process: require('../../StyleSheet/processColor')},
|
|
||||||
cursor: true,
|
|
||||||
decomposedMatrix: true,
|
|
||||||
direction: true,
|
|
||||||
display: true,
|
|
||||||
elevation: true,
|
|
||||||
end: true,
|
|
||||||
flex: true,
|
|
||||||
flexBasis: true,
|
|
||||||
flexDirection: true,
|
|
||||||
flexGrow: true,
|
|
||||||
flexShrink: true,
|
|
||||||
flexWrap: true,
|
|
||||||
fontFamily: true,
|
|
||||||
fontSize: true,
|
|
||||||
fontStyle: true,
|
|
||||||
fontVariant: true,
|
|
||||||
fontWeight: true,
|
|
||||||
apple_fontSmoothing: true, // TODO(OSS Candidate ISS#2710739)
|
|
||||||
height: true,
|
|
||||||
includeFontPadding: true,
|
|
||||||
justifyContent: true,
|
|
||||||
left: true,
|
|
||||||
letterSpacing: true,
|
|
||||||
lineHeight: 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,
|
|
||||||
opacity: true,
|
|
||||||
overflow: true,
|
|
||||||
overlayColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
padding: true,
|
|
||||||
paddingBottom: true,
|
|
||||||
paddingEnd: true,
|
|
||||||
paddingHorizontal: true,
|
|
||||||
paddingLeft: true,
|
|
||||||
paddingRight: true,
|
|
||||||
paddingStart: true,
|
|
||||||
paddingTop: true,
|
|
||||||
paddingVertical: true,
|
|
||||||
position: true,
|
|
||||||
resizeMode: true,
|
|
||||||
right: true,
|
|
||||||
rotation: true,
|
|
||||||
scaleX: true,
|
|
||||||
scaleY: true,
|
|
||||||
shadowColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
shadowOffset: {diff: require('../../Utilities/differ/sizesDiffer')},
|
|
||||||
shadowOpacity: true,
|
|
||||||
shadowRadius: true,
|
|
||||||
start: true,
|
|
||||||
textAlign: true,
|
|
||||||
textAlignVertical: true,
|
|
||||||
textDecorationColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
textDecorationLine: true,
|
|
||||||
textDecorationStyle: true,
|
|
||||||
textShadowColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
textShadowOffset: true,
|
|
||||||
textShadowRadius: true,
|
|
||||||
textTransform: true,
|
|
||||||
tintColor: {process: require('../../StyleSheet/processColor')},
|
|
||||||
top: true,
|
|
||||||
transform:
|
|
||||||
Platform.OS === 'ios' || Platform.OS === 'macos' // TODO(macOS GH#774)
|
|
||||||
? {diff: require('../../Utilities/differ/matricesDiffer')}
|
|
||||||
: {process: require('../../StyleSheet/processTransform')},
|
|
||||||
transformMatrix: true,
|
|
||||||
translateX: true,
|
|
||||||
translateY: true,
|
|
||||||
width: true,
|
|
||||||
writingDirection: true,
|
|
||||||
zIndex: true,
|
|
||||||
},
|
|
||||||
testID: true,
|
|
||||||
top: true,
|
|
||||||
transform:
|
|
||||||
Platform.OS === 'ios' || Platform.OS === 'macos' // TODO(macOS GH#774)
|
|
||||||
? {diff: require('../../Utilities/differ/matricesDiffer')}
|
|
||||||
: {process: require('../../StyleSheet/processTransform')},
|
|
||||||
translateX: true,
|
|
||||||
translateY: true,
|
|
||||||
validKeysDown: true,
|
|
||||||
validKeysUp: true,
|
|
||||||
nextKeyViewTag: true, // TODO(macOS GH#768)
|
|
||||||
width: true,
|
|
||||||
zIndex: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = ReactNativeViewConfig;
|
|
|
@ -1,83 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*
|
|
||||||
* @flow strict-local
|
|
||||||
* @format
|
|
||||||
*/
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
const ReactNativeViewViewConfigAndroid = {
|
|
||||||
uiViewClassName: 'RCTView',
|
|
||||||
bubblingEventTypes: {
|
|
||||||
topSelect: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onSelect',
|
|
||||||
captured: 'onSelectCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topAssetDidLoad: {
|
|
||||||
phasedRegistrationNames: {
|
|
||||||
bubbled: 'onAssetDidLoad',
|
|
||||||
captured: 'onAssetDidLoadCapture',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
directEventTypes: {
|
|
||||||
topClick: {
|
|
||||||
registrationName: 'onClick',
|
|
||||||
},
|
|
||||||
topContentSizeChange: {
|
|
||||||
registrationName: 'onContentSizeChange',
|
|
||||||
},
|
|
||||||
topLoadingError: {
|
|
||||||
registrationName: 'onLoadingError',
|
|
||||||
},
|
|
||||||
topLoadingFinish: {
|
|
||||||
registrationName: 'onLoadingFinish',
|
|
||||||
},
|
|
||||||
topLoadingStart: {
|
|
||||||
registrationName: 'onLoadingStart',
|
|
||||||
},
|
|
||||||
topMessage: {
|
|
||||||
registrationName: 'onMessage',
|
|
||||||
},
|
|
||||||
topMomentumScrollBegin: {
|
|
||||||
registrationName: 'onMomentumScrollBegin',
|
|
||||||
},
|
|
||||||
topMomentumScrollEnd: {
|
|
||||||
registrationName: 'onMomentumScrollEnd',
|
|
||||||
},
|
|
||||||
topScroll: {
|
|
||||||
registrationName: 'onScroll',
|
|
||||||
},
|
|
||||||
topScrollBeginDrag: {
|
|
||||||
registrationName: 'onScrollBeginDrag',
|
|
||||||
},
|
|
||||||
topScrollEndDrag: {
|
|
||||||
registrationName: 'onScrollEndDrag',
|
|
||||||
},
|
|
||||||
topSelectionChange: {
|
|
||||||
registrationName: 'onSelectionChange',
|
|
||||||
},
|
|
||||||
onAssetDidLoad: {
|
|
||||||
registrationName: 'onAssetDidLoad',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
validAttributes: {
|
|
||||||
hasTVPreferredFocus: true,
|
|
||||||
focusable: true,
|
|
||||||
nativeBackgroundAndroid: true,
|
|
||||||
nativeForegroundAndroid: true,
|
|
||||||
nextFocusDown: true,
|
|
||||||
nextFocusForward: true,
|
|
||||||
nextFocusLeft: true,
|
|
||||||
nextFocusRight: true,
|
|
||||||
nextFocusUp: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = ReactNativeViewViewConfigAndroid;
|
|
|
@ -10,18 +10,75 @@
|
||||||
|
|
||||||
import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
|
import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
|
||||||
import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
|
import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
|
||||||
import Platform from '../../Utilities/Platform';
|
|
||||||
import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
|
import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
|
||||||
import ReactNativeViewViewConfigAndroid from './ReactNativeViewViewConfigAndroid';
|
|
||||||
import {type ViewProps as Props} from './ViewPropTypes';
|
import {type ViewProps as Props} from './ViewPropTypes';
|
||||||
|
import Platform from '../../Utilities/Platform';
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
|
||||||
|
const ViewPartialViewConfig =
|
||||||
|
Platform.OS === 'android'
|
||||||
|
? {
|
||||||
|
uiViewClassName: 'RCTView',
|
||||||
|
validAttributes: {
|
||||||
|
// ReactClippingViewManager @ReactProps
|
||||||
|
removeClippedSubviews: true,
|
||||||
|
|
||||||
|
// ReactViewManager @ReactProps
|
||||||
|
accessible: true,
|
||||||
|
hasTVPreferredFocus: true,
|
||||||
|
nextFocusDown: true,
|
||||||
|
nextFocusForward: true,
|
||||||
|
nextFocusLeft: true,
|
||||||
|
nextFocusRight: true,
|
||||||
|
nextFocusUp: true,
|
||||||
|
|
||||||
|
borderRadius: true,
|
||||||
|
borderTopLeftRadius: true,
|
||||||
|
borderTopRightRadius: true,
|
||||||
|
borderBottomRightRadius: true,
|
||||||
|
borderBottomLeftRadius: true,
|
||||||
|
borderTopStartRadius: true,
|
||||||
|
borderTopEndRadius: true,
|
||||||
|
borderBottomStartRadius: true,
|
||||||
|
borderBottomEndRadius: true,
|
||||||
|
|
||||||
|
borderStyle: true,
|
||||||
|
hitSlop: true,
|
||||||
|
pointerEvents: true,
|
||||||
|
nativeBackgroundAndroid: true,
|
||||||
|
nativeForegroundAndroid: true,
|
||||||
|
needsOffscreenAlphaCompositing: true,
|
||||||
|
|
||||||
|
borderWidth: true,
|
||||||
|
borderLeftWidth: true,
|
||||||
|
borderRightWidth: true,
|
||||||
|
borderTopWidth: true,
|
||||||
|
borderBottomWidth: true,
|
||||||
|
borderStartWidth: true,
|
||||||
|
borderEndWidth: true,
|
||||||
|
|
||||||
|
borderColor: {process: require('../../StyleSheet/processColor')},
|
||||||
|
borderLeftColor: {process: require('../../StyleSheet/processColor')},
|
||||||
|
borderRightColor: {process: require('../../StyleSheet/processColor')},
|
||||||
|
borderTopColor: {process: require('../../StyleSheet/processColor')},
|
||||||
|
borderBottomColor: {
|
||||||
|
process: require('../../StyleSheet/processColor'),
|
||||||
|
},
|
||||||
|
borderStartColor: {process: require('../../StyleSheet/processColor')},
|
||||||
|
borderEndColor: {process: require('../../StyleSheet/processColor')},
|
||||||
|
|
||||||
|
focusable: true,
|
||||||
|
overflow: true,
|
||||||
|
backfaceVisibility: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
uiViewClassName: 'RCTView',
|
||||||
|
};
|
||||||
|
|
||||||
const ViewNativeComponent: HostComponent<Props> =
|
const ViewNativeComponent: HostComponent<Props> =
|
||||||
NativeComponentRegistry.get<Props>('RCTView', () =>
|
NativeComponentRegistry.get<Props>('RCTView', () => ViewPartialViewConfig);
|
||||||
Platform.OS === 'android'
|
|
||||||
? ReactNativeViewViewConfigAndroid
|
|
||||||
: {uiViewClassName: 'RCTView'},
|
|
||||||
);
|
|
||||||
|
|
||||||
interface NativeCommands {
|
interface NativeCommands {
|
||||||
+hotspotUpdate: (
|
+hotspotUpdate: (
|
||||||
|
|
|
@ -58,12 +58,13 @@ if (__DEV__) {
|
||||||
isWebSocketOpen = true;
|
isWebSocketOpen = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
const viewConfig = require('../Components/View/ReactNativeViewViewConfig');
|
const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
|
||||||
|
|
||||||
reactDevTools.connectToDevTools({
|
reactDevTools.connectToDevTools({
|
||||||
isAppActive,
|
isAppActive,
|
||||||
resolveRNStyle: require('../StyleSheet/flattenStyle'),
|
resolveRNStyle: require('../StyleSheet/flattenStyle'),
|
||||||
nativeStyleEditorValidAttributes: Object.keys(
|
nativeStyleEditorValidAttributes: Object.keys(
|
||||||
viewConfig.validAttributes.style,
|
ReactNativeStyleAttributes,
|
||||||
),
|
),
|
||||||
websocket: ws,
|
websocket: ws,
|
||||||
});
|
});
|
||||||
|
|
|
@ -19,6 +19,7 @@ const React = require('react');
|
||||||
const ReactNative = require('../Renderer/shims/ReactNative');
|
const ReactNative = require('../Renderer/shims/ReactNative');
|
||||||
const StyleSheet = require('../StyleSheet/StyleSheet');
|
const StyleSheet = require('../StyleSheet/StyleSheet');
|
||||||
const View = require('../Components/View/View');
|
const View = require('../Components/View/View');
|
||||||
|
const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
|
||||||
|
|
||||||
const invariant = require('invariant');
|
const invariant = require('invariant');
|
||||||
|
|
||||||
|
@ -47,10 +48,7 @@ const renderers = findRenderers();
|
||||||
// Required for React DevTools to view/edit React Native styles in Flipper.
|
// Required for React DevTools to view/edit React Native styles in Flipper.
|
||||||
// Flipper doesn't inject these values when initializing DevTools.
|
// Flipper doesn't inject these values when initializing DevTools.
|
||||||
hook.resolveRNStyle = require('../StyleSheet/flattenStyle');
|
hook.resolveRNStyle = require('../StyleSheet/flattenStyle');
|
||||||
const viewConfig = require('../Components/View/ReactNativeViewViewConfig');
|
hook.nativeStyleEditorValidAttributes = Object.keys(ReactNativeStyleAttributes);
|
||||||
hook.nativeStyleEditorValidAttributes = Object.keys(
|
|
||||||
viewConfig.validAttributes.style,
|
|
||||||
);
|
|
||||||
|
|
||||||
function findRenderers(): $ReadOnlyArray<ReactRenderer> {
|
function findRenderers(): $ReadOnlyArray<ReactRenderer> {
|
||||||
const allRenderers = Array.from(hook.renderers.values());
|
const allRenderers = Array.from(hook.renderers.values());
|
||||||
|
|
|
@ -0,0 +1,452 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) Meta Platforms, Inc. and 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
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {Platform} from 'react-native';
|
||||||
|
import type {PartialViewConfig} from '../Renderer/shims/ReactNativeTypes';
|
||||||
|
import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
|
||||||
|
import {DynamicallyInjectedByGestureHandler} from './ViewConfigIgnore';
|
||||||
|
|
||||||
|
type PartialViewConfigWithoutName = $Rest<
|
||||||
|
PartialViewConfig,
|
||||||
|
{uiViewClassName: string},
|
||||||
|
>;
|
||||||
|
|
||||||
|
const PlatformBaseViewConfig: PartialViewConfigWithoutName =
|
||||||
|
Platform.OS === 'android'
|
||||||
|
? /**
|
||||||
|
* On Android, Props are derived from a ViewManager and its ShadowNode.
|
||||||
|
*
|
||||||
|
* Where did we find these base platform props from?
|
||||||
|
* - Nearly all component ViewManagers descend from BaseViewManager.
|
||||||
|
* - BaseViewManagers' ShadowNodes descend from LayoutShadowNode.
|
||||||
|
*
|
||||||
|
* So, these ViewConfigs are generated from LayoutShadowNode and BaseViewManager.
|
||||||
|
*/
|
||||||
|
{
|
||||||
|
directEventTypes: {
|
||||||
|
topAccessibilityAction: {
|
||||||
|
registrationName: 'onAccessibilityAction',
|
||||||
|
},
|
||||||
|
topPointerEnter: {
|
||||||
|
registrationName: 'pointerenter',
|
||||||
|
},
|
||||||
|
topPointerLeave: {
|
||||||
|
registrationName: 'pointerleave',
|
||||||
|
},
|
||||||
|
topPointerMove: {
|
||||||
|
registrationName: 'pointermove',
|
||||||
|
},
|
||||||
|
onGestureHandlerEvent: DynamicallyInjectedByGestureHandler({
|
||||||
|
registrationName: 'onGestureHandlerEvent',
|
||||||
|
}),
|
||||||
|
onGestureHandlerStateChange: DynamicallyInjectedByGestureHandler({
|
||||||
|
registrationName: 'onGestureHandlerStateChange',
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Direct events from UIManagerModuleConstants.java
|
||||||
|
topContentSizeChange: {
|
||||||
|
registrationName: 'onContentSizeChange',
|
||||||
|
},
|
||||||
|
topScrollBeginDrag: {
|
||||||
|
registrationName: 'onScrollBeginDrag',
|
||||||
|
},
|
||||||
|
topMessage: {
|
||||||
|
registrationName: 'onMessage',
|
||||||
|
},
|
||||||
|
topSelectionChange: {
|
||||||
|
registrationName: 'onSelectionChange',
|
||||||
|
},
|
||||||
|
topLoadingFinish: {
|
||||||
|
registrationName: 'onLoadingFinish',
|
||||||
|
},
|
||||||
|
topMomentumScrollEnd: {
|
||||||
|
registrationName: 'onMomentumScrollEnd',
|
||||||
|
},
|
||||||
|
topClick: {
|
||||||
|
registrationName: 'onClick',
|
||||||
|
},
|
||||||
|
topLoadingStart: {
|
||||||
|
registrationName: 'onLoadingStart',
|
||||||
|
},
|
||||||
|
topLoadingError: {
|
||||||
|
registrationName: 'onLoadingError',
|
||||||
|
},
|
||||||
|
topMomentumScrollBegin: {
|
||||||
|
registrationName: 'onMomentumScrollBegin',
|
||||||
|
},
|
||||||
|
topScrollEndDrag: {
|
||||||
|
registrationName: 'onScrollEndDrag',
|
||||||
|
},
|
||||||
|
topScroll: {
|
||||||
|
registrationName: 'onScroll',
|
||||||
|
},
|
||||||
|
topLayout: {
|
||||||
|
registrationName: 'onLayout',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
bubblingEventTypes: {
|
||||||
|
// Bubbling events from UIManagerModuleConstants.java
|
||||||
|
topChange: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
captured: 'onChangeCapture',
|
||||||
|
bubbled: 'onChange',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topSelect: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
captured: 'onSelectCapture',
|
||||||
|
bubbled: 'onSelect',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topTouchEnd: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
captured: 'onTouchEndCapture',
|
||||||
|
bubbled: 'onTouchEnd',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topTouchCancel: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
captured: 'onTouchCancelCapture',
|
||||||
|
bubbled: 'onTouchCancel',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topTouchStart: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
captured: 'onTouchStartCapture',
|
||||||
|
bubbled: 'onTouchStart',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topTouchMove: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
captured: 'onTouchMoveCapture',
|
||||||
|
bubbled: 'onTouchMove',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
validAttributes: {
|
||||||
|
// @ReactProps from BaseViewManager
|
||||||
|
backgroundColor: {process: require('../StyleSheet/processColor')},
|
||||||
|
transform: true,
|
||||||
|
opacity: true,
|
||||||
|
elevation: true,
|
||||||
|
shadowColor: {process: require('../StyleSheet/processColor')},
|
||||||
|
zIndex: true,
|
||||||
|
renderToHardwareTextureAndroid: true,
|
||||||
|
testID: true,
|
||||||
|
nativeID: true,
|
||||||
|
accessibilityLabelledBy: true,
|
||||||
|
accessibilityLabel: true,
|
||||||
|
accessibilityHint: true,
|
||||||
|
accessibilityRole: true,
|
||||||
|
accessibilityState: true,
|
||||||
|
accessibilityActions: true,
|
||||||
|
accessibilityValue: true,
|
||||||
|
importantForAccessibility: true,
|
||||||
|
rotation: true,
|
||||||
|
scaleX: true,
|
||||||
|
scaleY: true,
|
||||||
|
translateX: true,
|
||||||
|
translateY: true,
|
||||||
|
accessibilityLiveRegion: true,
|
||||||
|
|
||||||
|
// @ReactProps from LayoutShadowNode
|
||||||
|
width: true,
|
||||||
|
minWidth: true,
|
||||||
|
collapsable: true,
|
||||||
|
maxWidth: true,
|
||||||
|
height: true,
|
||||||
|
minHeight: true,
|
||||||
|
maxHeight: true,
|
||||||
|
flex: true,
|
||||||
|
flexGrow: true,
|
||||||
|
flexShrink: true,
|
||||||
|
flexBasis: true,
|
||||||
|
aspectRatio: true,
|
||||||
|
flexDirection: true,
|
||||||
|
flexWrap: true,
|
||||||
|
alignSelf: true,
|
||||||
|
alignItems: true,
|
||||||
|
alignContent: true,
|
||||||
|
justifyContent: true,
|
||||||
|
overflow: true,
|
||||||
|
display: true,
|
||||||
|
|
||||||
|
margin: true,
|
||||||
|
marginVertical: true,
|
||||||
|
marginHorizontal: true,
|
||||||
|
marginStart: true,
|
||||||
|
marginEnd: true,
|
||||||
|
marginTop: true,
|
||||||
|
marginBottom: true,
|
||||||
|
marginLeft: true,
|
||||||
|
marginRight: true,
|
||||||
|
|
||||||
|
padding: true,
|
||||||
|
paddingVertical: true,
|
||||||
|
paddingHorizontal: true,
|
||||||
|
paddingStart: true,
|
||||||
|
paddingEnd: true,
|
||||||
|
paddingTop: true,
|
||||||
|
paddingBottom: true,
|
||||||
|
paddingLeft: true,
|
||||||
|
paddingRight: true,
|
||||||
|
|
||||||
|
borderWidth: true,
|
||||||
|
borderStartWidth: true,
|
||||||
|
borderEndWidth: true,
|
||||||
|
borderTopWidth: true,
|
||||||
|
borderBottomWidth: true,
|
||||||
|
borderLeftWidth: true,
|
||||||
|
borderRightWidth: true,
|
||||||
|
|
||||||
|
start: true,
|
||||||
|
end: true,
|
||||||
|
left: true,
|
||||||
|
right: true,
|
||||||
|
top: true,
|
||||||
|
bottom: true,
|
||||||
|
|
||||||
|
position: true,
|
||||||
|
onLayout: true,
|
||||||
|
|
||||||
|
pointerenter: true,
|
||||||
|
pointerleave: true,
|
||||||
|
pointermove: true,
|
||||||
|
|
||||||
|
style: ReactNativeStyleAttributes,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: /**
|
||||||
|
* On iOS, ViewManagers define all of a component's props.
|
||||||
|
* All ViewManagers extend RCTViewManager, and RCTViewManager declares
|
||||||
|
* these props.
|
||||||
|
*/
|
||||||
|
{
|
||||||
|
bubblingEventTypes: {
|
||||||
|
// Generic Events
|
||||||
|
topPress: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
bubbled: 'onPress',
|
||||||
|
captured: 'onPressCapture',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topChange: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
bubbled: 'onChange',
|
||||||
|
captured: 'onChangeCapture',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topFocus: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
bubbled: 'onFocus',
|
||||||
|
captured: 'onFocusCapture',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topBlur: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
bubbled: 'onBlur',
|
||||||
|
captured: 'onBlurCapture',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topSubmitEditing: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
bubbled: 'onSubmitEditing',
|
||||||
|
captured: 'onSubmitEditingCapture',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topEndEditing: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
bubbled: 'onEndEditing',
|
||||||
|
captured: 'onEndEditingCapture',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topKeyPress: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
bubbled: 'onKeyPress',
|
||||||
|
captured: 'onKeyPressCapture',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Touch Events
|
||||||
|
topTouchStart: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
bubbled: 'onTouchStart',
|
||||||
|
captured: 'onTouchStartCapture',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topTouchMove: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
bubbled: 'onTouchMove',
|
||||||
|
captured: 'onTouchMoveCapture',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topTouchCancel: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
bubbled: 'onTouchCancel',
|
||||||
|
captured: 'onTouchCancelCapture',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
topTouchEnd: {
|
||||||
|
phasedRegistrationNames: {
|
||||||
|
bubbled: 'onTouchEnd',
|
||||||
|
captured: 'onTouchEndCapture',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
directEventTypes: {
|
||||||
|
topAccessibilityAction: {
|
||||||
|
registrationName: 'onAccessibilityAction',
|
||||||
|
},
|
||||||
|
topAccessibilityTap: {
|
||||||
|
registrationName: 'onAccessibilityTap',
|
||||||
|
},
|
||||||
|
topMagicTap: {
|
||||||
|
registrationName: 'onMagicTap',
|
||||||
|
},
|
||||||
|
topAccessibilityEscape: {
|
||||||
|
registrationName: 'onAccessibilityEscape',
|
||||||
|
},
|
||||||
|
topLayout: {
|
||||||
|
registrationName: 'onLayout',
|
||||||
|
},
|
||||||
|
onGestureHandlerEvent: DynamicallyInjectedByGestureHandler({
|
||||||
|
registrationName: 'onGestureHandlerEvent',
|
||||||
|
}),
|
||||||
|
onGestureHandlerStateChange: DynamicallyInjectedByGestureHandler({
|
||||||
|
registrationName: 'onGestureHandlerStateChange',
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
validAttributes: {
|
||||||
|
// View Props
|
||||||
|
accessible: true,
|
||||||
|
accessibilityActions: true,
|
||||||
|
accessibilityLabel: true,
|
||||||
|
accessibilityHint: true,
|
||||||
|
accessibilityValue: true,
|
||||||
|
accessibilityViewIsModal: true,
|
||||||
|
accessibilityElementsHidden: true,
|
||||||
|
accessibilityIgnoresInvertColors: true,
|
||||||
|
testID: true,
|
||||||
|
backgroundColor: {process: require('../StyleSheet/processColor')},
|
||||||
|
backfaceVisibility: true,
|
||||||
|
opacity: true,
|
||||||
|
shadowColor: {process: require('../StyleSheet/processColor')},
|
||||||
|
shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
|
||||||
|
shadowOpacity: true,
|
||||||
|
shadowRadius: true,
|
||||||
|
needsOffscreenAlphaCompositing: true,
|
||||||
|
overflow: true,
|
||||||
|
shouldRasterizeIOS: true,
|
||||||
|
transform: {diff: require('../Utilities/differ/matricesDiffer')},
|
||||||
|
accessibilityRole: true,
|
||||||
|
accessibilityState: true,
|
||||||
|
nativeID: true,
|
||||||
|
pointerEvents: true,
|
||||||
|
removeClippedSubviews: true,
|
||||||
|
borderRadius: true,
|
||||||
|
borderColor: {process: require('../StyleSheet/processColor')},
|
||||||
|
borderWidth: true,
|
||||||
|
borderStyle: true,
|
||||||
|
hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
|
||||||
|
collapsable: true,
|
||||||
|
|
||||||
|
borderTopWidth: true,
|
||||||
|
borderTopColor: {process: require('../StyleSheet/processColor')},
|
||||||
|
borderRightWidth: true,
|
||||||
|
borderRightColor: {process: require('../StyleSheet/processColor')},
|
||||||
|
borderBottomWidth: true,
|
||||||
|
borderBottomColor: {process: require('../StyleSheet/processColor')},
|
||||||
|
borderLeftWidth: true,
|
||||||
|
borderLeftColor: {process: require('../StyleSheet/processColor')},
|
||||||
|
borderStartWidth: true,
|
||||||
|
borderStartColor: {process: require('../StyleSheet/processColor')},
|
||||||
|
borderEndWidth: true,
|
||||||
|
borderEndColor: {process: require('../StyleSheet/processColor')},
|
||||||
|
|
||||||
|
borderTopLeftRadius: true,
|
||||||
|
borderTopRightRadius: true,
|
||||||
|
borderTopStartRadius: true,
|
||||||
|
borderTopEndRadius: true,
|
||||||
|
borderBottomLeftRadius: true,
|
||||||
|
borderBottomRightRadius: true,
|
||||||
|
borderBottomStartRadius: true,
|
||||||
|
borderBottomEndRadius: true,
|
||||||
|
display: true,
|
||||||
|
zIndex: true,
|
||||||
|
|
||||||
|
// ShadowView properties
|
||||||
|
top: true,
|
||||||
|
right: true,
|
||||||
|
start: true,
|
||||||
|
end: true,
|
||||||
|
bottom: true,
|
||||||
|
left: true,
|
||||||
|
|
||||||
|
width: true,
|
||||||
|
height: true,
|
||||||
|
|
||||||
|
minWidth: true,
|
||||||
|
maxWidth: true,
|
||||||
|
minHeight: true,
|
||||||
|
maxHeight: true,
|
||||||
|
|
||||||
|
// Also declared as ViewProps
|
||||||
|
// borderTopWidth: true,
|
||||||
|
// borderRightWidth: true,
|
||||||
|
// borderBottomWidth: true,
|
||||||
|
// borderLeftWidth: true,
|
||||||
|
// borderStartWidth: true,
|
||||||
|
// borderEndWidth: true,
|
||||||
|
// borderWidth: true,
|
||||||
|
|
||||||
|
marginTop: true,
|
||||||
|
marginRight: true,
|
||||||
|
marginBottom: true,
|
||||||
|
marginLeft: true,
|
||||||
|
marginStart: true,
|
||||||
|
marginEnd: true,
|
||||||
|
marginVertical: true,
|
||||||
|
marginHorizontal: true,
|
||||||
|
margin: true,
|
||||||
|
|
||||||
|
paddingTop: true,
|
||||||
|
paddingRight: true,
|
||||||
|
paddingBottom: true,
|
||||||
|
paddingLeft: true,
|
||||||
|
paddingStart: true,
|
||||||
|
paddingEnd: true,
|
||||||
|
paddingVertical: true,
|
||||||
|
paddingHorizontal: true,
|
||||||
|
padding: true,
|
||||||
|
|
||||||
|
flex: true,
|
||||||
|
flexGrow: true,
|
||||||
|
flexShrink: true,
|
||||||
|
flexBasis: true,
|
||||||
|
flexDirection: true,
|
||||||
|
flexWrap: true,
|
||||||
|
justifyContent: true,
|
||||||
|
alignItems: true,
|
||||||
|
alignSelf: true,
|
||||||
|
alignContent: true,
|
||||||
|
position: true,
|
||||||
|
aspectRatio: true,
|
||||||
|
|
||||||
|
// Also declared as ViewProps
|
||||||
|
// overflow: true,
|
||||||
|
// display: true,
|
||||||
|
|
||||||
|
direction: true,
|
||||||
|
|
||||||
|
style: ReactNativeStyleAttributes,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PlatformBaseViewConfig;
|
|
@ -13,6 +13,7 @@ import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes';
|
||||||
import getNativeComponentAttributes from '../ReactNative/getNativeComponentAttributes';
|
import getNativeComponentAttributes from '../ReactNative/getNativeComponentAttributes';
|
||||||
// $FlowFixMe[nonstrict-import]
|
// $FlowFixMe[nonstrict-import]
|
||||||
import {createViewConfig} from './ViewConfig';
|
import {createViewConfig} from './ViewConfig';
|
||||||
|
import {isIgnored} from './ViewConfigIgnore';
|
||||||
|
|
||||||
type Difference =
|
type Difference =
|
||||||
| {
|
| {
|
||||||
|
@ -183,7 +184,10 @@ function accumulateDifferences(
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const staticKey in staticObject) {
|
for (const staticKey in staticObject) {
|
||||||
if (!nativeObject.hasOwnProperty(staticKey)) {
|
if (
|
||||||
|
!nativeObject.hasOwnProperty(staticKey) &&
|
||||||
|
!isIgnored(staticObject[staticKey])
|
||||||
|
) {
|
||||||
differences.push({
|
differences.push({
|
||||||
path: [...path, staticKey],
|
path: [...path, staticKey],
|
||||||
type: 'unexpected',
|
type: 'unexpected',
|
||||||
|
|
|
@ -8,11 +8,11 @@
|
||||||
* @format
|
* @format
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import ReactNativeViewViewConfig from '../Components/View/ReactNativeViewViewConfig';
|
|
||||||
import type {
|
import type {
|
||||||
PartialViewConfig,
|
PartialViewConfig,
|
||||||
ViewConfig,
|
ViewConfig,
|
||||||
} from '../Renderer/shims/ReactNativeTypes';
|
} from '../Renderer/shims/ReactNativeTypes';
|
||||||
|
import PlatformBaseViewConfig from './PlatformBaseViewConfig';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a complete `ViewConfig` from a `PartialViewConfig`.
|
* Creates a complete `ViewConfig` from a `PartialViewConfig`.
|
||||||
|
@ -24,16 +24,16 @@ export function createViewConfig(
|
||||||
uiViewClassName: partialViewConfig.uiViewClassName,
|
uiViewClassName: partialViewConfig.uiViewClassName,
|
||||||
Commands: {},
|
Commands: {},
|
||||||
bubblingEventTypes: composeIndexers(
|
bubblingEventTypes: composeIndexers(
|
||||||
ReactNativeViewViewConfig.bubblingEventTypes,
|
PlatformBaseViewConfig.bubblingEventTypes,
|
||||||
partialViewConfig.bubblingEventTypes,
|
partialViewConfig.bubblingEventTypes,
|
||||||
),
|
),
|
||||||
directEventTypes: composeIndexers(
|
directEventTypes: composeIndexers(
|
||||||
ReactNativeViewViewConfig.directEventTypes,
|
PlatformBaseViewConfig.directEventTypes,
|
||||||
partialViewConfig.directEventTypes,
|
partialViewConfig.directEventTypes,
|
||||||
),
|
),
|
||||||
validAttributes: composeIndexers(
|
validAttributes: composeIndexers(
|
||||||
// $FlowFixMe[incompatible-call] `style` property confuses Flow.
|
// $FlowFixMe[incompatible-call] `style` property confuses Flow.
|
||||||
ReactNativeViewViewConfig.validAttributes,
|
PlatformBaseViewConfig.validAttributes,
|
||||||
// $FlowFixMe[incompatible-call] `style` property confuses Flow.
|
// $FlowFixMe[incompatible-call] `style` property confuses Flow.
|
||||||
partialViewConfig.validAttributes,
|
partialViewConfig.validAttributes,
|
||||||
),
|
),
|
||||||
|
|
|
@ -0,0 +1,27 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*
|
||||||
|
* @flow strict
|
||||||
|
* @format
|
||||||
|
*/
|
||||||
|
|
||||||
|
const ignoredViewConfigProps = new WeakSet<{...}>();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Decorates ViewConfig values that are dynamically injected by the library,
|
||||||
|
* react-native-gesture-handler. (T45765076)
|
||||||
|
*/
|
||||||
|
export function DynamicallyInjectedByGestureHandler<T: {...}>(object: T): T {
|
||||||
|
ignoredViewConfigProps.add(object);
|
||||||
|
return object;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isIgnored(value: mixed): boolean {
|
||||||
|
if (typeof value === 'object' && value != null) {
|
||||||
|
return ignoredViewConfigProps.has(value);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
|
@ -8,7 +8,7 @@
|
||||||
* @flow
|
* @flow
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import ReactNativeViewViewConfig from '../Components/View/ReactNativeViewViewConfig';
|
import PlatformBaseViewConfig from '../NativeComponent/PlatformBaseViewConfig';
|
||||||
import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes';
|
import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes';
|
||||||
|
|
||||||
const IGNORED_KEYS = ['transform', 'hitSlop'];
|
const IGNORED_KEYS = ['transform', 'hitSlop'];
|
||||||
|
@ -109,7 +109,7 @@ export function getConfigWithoutViewProps(
|
||||||
}
|
}
|
||||||
|
|
||||||
return Object.keys(viewConfig[propName])
|
return Object.keys(viewConfig[propName])
|
||||||
.filter(prop => !ReactNativeViewViewConfig[propName][prop])
|
.filter(prop => !PlatformBaseViewConfig[propName][prop])
|
||||||
.reduce((obj, prop) => {
|
.reduce((obj, prop) => {
|
||||||
obj[prop] = viewConfig[propName][prop];
|
obj[prop] = viewConfig[propName][prop];
|
||||||
return obj;
|
return obj;
|
||||||
|
|
Загрузка…
Ссылка в новой задаче