Files
react-native/Libraries/Components/View/ViewNativeComponent.js
T
Ramanpreet Nara cab16352c7 Introduce a PlatformBaseViewConfig for all HostComponents
Summary:
## iOS
On iOS:
- All props come from ViewManagers
- All HostComponent ViewManagers extend <View/> ViewManager

https://pxl.cl/1SxdF

Therefore, it's safe to have all HostComponent Static View Configs extend <View/> Static View Config.

## Android

On Android, the 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, it's not safe to have all Android HostComponent Static View Configs to extend <View/>'s Static View Config:
1. No components actualy incorportate <View/>'s props
2. Some components don't even incorporate BaseViewManager's props.

## 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: yungsters

Differential Revision: D32187832

fbshipit-source-id: 9a057abb3f58801615891c21e42ad4cfa5c69f21
2021-12-10 23:19:52 -08:00

102 lines
3.2 KiB
JavaScript

/**
* Copyright (c) Facebook, Inc. and its 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
*/
import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
import {type ViewProps as Props} from './ViewPropTypes';
import Platform from '../../Utilities/Platform';
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> =
NativeComponentRegistry.get<Props>('RCTView', () => ViewPartialViewConfig);
interface NativeCommands {
+hotspotUpdate: (
viewRef: React.ElementRef<HostComponent<mixed>>,
x: number,
y: number,
) => void;
+setPressed: (
viewRef: React.ElementRef<HostComponent<mixed>>,
pressed: boolean,
) => void;
}
export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
supportedCommands: ['hotspotUpdate', 'setPressed'],
});
export default ViewNativeComponent;
export type ViewNativeComponentType = HostComponent<Props>;