This commit is contained in:
Yamozha
2021-04-02 02:24:13 +03:00
parent c23950b545
commit 7256d79e2c
31493 changed files with 3036630 additions and 0 deletions

View File

@ -0,0 +1,87 @@
/**
* 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.
*
* @format strict-local
* @flow
*/
'use strict';
const DeprecatedImageStylePropTypes = require('../../DeprecatedPropTypes/DeprecatedImageStylePropTypes');
const DeprecatedTextStylePropTypes = require('../../DeprecatedPropTypes/DeprecatedTextStylePropTypes');
const DeprecatedViewStylePropTypes = require('../../DeprecatedPropTypes/DeprecatedViewStylePropTypes');
const processColor = require('../../StyleSheet/processColor');
const processTransform = require('../../StyleSheet/processTransform');
const sizesDiffer = require('../../Utilities/differ/sizesDiffer');
type ReturnBoolType = <V>(V) => true;
type BoolifiedDeprecatedViewStylePropTypes = $ObjMap<
typeof DeprecatedViewStylePropTypes,
ReturnBoolType,
>;
type BoolifiedDeprecatedTextStylePropTypes = $ObjMapi<
typeof DeprecatedTextStylePropTypes,
ReturnBoolType,
>;
type BoolifiedDeprecatedImageStylePropTypes = $ObjMapi<
typeof DeprecatedImageStylePropTypes,
ReturnBoolType,
>;
type StyleAttributesType = {
...BoolifiedDeprecatedViewStylePropTypes,
...BoolifiedDeprecatedTextStylePropTypes,
...BoolifiedDeprecatedImageStylePropTypes,
transform: $ReadOnly<{|process: typeof processTransform|}> | true,
shadowOffset: $ReadOnly<{|diff: typeof sizesDiffer|}> | true,
backgroundColor: typeof colorAttributes | true,
borderBottomColor: typeof colorAttributes | true,
borderColor: typeof colorAttributes | true,
borderLeftColor: typeof colorAttributes | true,
borderRightColor: typeof colorAttributes | true,
borderTopColor: typeof colorAttributes | true,
borderStartColor: typeof colorAttributes | true,
borderEndColor: typeof colorAttributes | true,
color: typeof colorAttributes | true,
shadowColor: typeof colorAttributes | true,
textDecorationColor: typeof colorAttributes | true,
tintColor: typeof colorAttributes | true,
textShadowColor: typeof colorAttributes | true,
overlayColor: typeof colorAttributes | true,
...
};
const ReactNativeStyleAttributes: StyleAttributesType = {};
for (const attributeName of Object.keys({
...DeprecatedViewStylePropTypes,
...DeprecatedTextStylePropTypes,
...DeprecatedImageStylePropTypes,
})) {
ReactNativeStyleAttributes[attributeName] = true;
}
ReactNativeStyleAttributes.transform = {process: processTransform};
ReactNativeStyleAttributes.shadowOffset = {diff: sizesDiffer};
const colorAttributes = {process: processColor};
ReactNativeStyleAttributes.backgroundColor = colorAttributes;
ReactNativeStyleAttributes.borderBottomColor = colorAttributes;
ReactNativeStyleAttributes.borderColor = colorAttributes;
ReactNativeStyleAttributes.borderLeftColor = colorAttributes;
ReactNativeStyleAttributes.borderRightColor = colorAttributes;
ReactNativeStyleAttributes.borderTopColor = colorAttributes;
ReactNativeStyleAttributes.borderStartColor = colorAttributes;
ReactNativeStyleAttributes.borderEndColor = colorAttributes;
ReactNativeStyleAttributes.color = colorAttributes;
ReactNativeStyleAttributes.shadowColor = colorAttributes;
ReactNativeStyleAttributes.textDecorationColor = colorAttributes;
ReactNativeStyleAttributes.tintColor = colorAttributes;
ReactNativeStyleAttributes.textShadowColor = colorAttributes;
ReactNativeStyleAttributes.overlayColor = colorAttributes;
module.exports = ReactNativeStyleAttributes;

View File

@ -0,0 +1,56 @@
/**
* 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
*/
'use strict';
const ReactNativeStyleAttributes = require('./ReactNativeStyleAttributes');
const UIView = {
pointerEvents: true,
accessible: true,
accessibilityActions: true,
accessibilityLabel: true,
accessibilityLiveRegion: true,
accessibilityRole: true,
accessibilityState: true,
accessibilityValue: true,
accessibilityHint: true,
importantForAccessibility: true,
nativeID: true,
testID: true,
renderToHardwareTextureAndroid: true,
shouldRasterizeIOS: true,
onLayout: true,
onAccessibilityAction: true,
onAccessibilityTap: true,
onMagicTap: true,
onAccessibilityEscape: true,
collapsable: true,
needsOffscreenAlphaCompositing: true,
style: ReactNativeStyleAttributes,
};
const RCTView = {
...UIView,
// This is a special performance property exposed by RCTView and useful for
// scrolling content when there are many subviews, most of which are offscreen.
// For this property to be effective, it must be applied to a view that contains
// many subviews that extend outside its bound. The subviews must also have
// overflow: hidden, as should the containing view (or one of its superviews).
removeClippedSubviews: true,
};
const ReactNativeViewAttributes = {
UIView: UIView,
RCTView: RCTView,
};
module.exports = ReactNativeViewAttributes;

View File

@ -0,0 +1,347 @@
/**
* 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
* @format
*/
'use strict';
import ReactNativeViewViewConfigAndroid from './ReactNativeViewViewConfigAndroid';
import {Platform} from 'react-native';
const ReactNativeViewConfig = {
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,
topAccessibilityAction: {
registrationName: 'onAccessibilityAction',
},
topAccessibilityEscape: {
registrationName: 'onAccessibilityEscape',
},
topAccessibilityTap: {
registrationName: 'onAccessibilityTap',
},
topLayout: {
registrationName: 'onLayout',
},
topMagicTap: {
registrationName: 'onMagicTap',
},
// 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,
accessibilityActions: true,
accessibilityElementsHidden: true,
accessibilityHint: true,
accessibilityIgnoresInvertColors: true,
accessibilityLabel: true,
accessibilityLiveRegion: true,
accessibilityRole: true,
accessibilityStates: true, // TODO: Can be removed after next release
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'): any)},
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,
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')},
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,
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'
? {diff: require('../../Utilities/differ/matricesDiffer')}
: {process: require('../../StyleSheet/processTransform')}): any),
transformMatrix: true,
translateX: true,
translateY: true,
width: true,
writingDirection: true,
zIndex: true,
},
testID: true,
top: true,
transform: ((Platform.OS === 'ios'
? {diff: require('../../Utilities/differ/matricesDiffer')}
: {process: require('../../StyleSheet/processTransform')}): any),
translateX: true,
translateY: true,
width: true,
zIndex: true,
},
};
module.exports = ReactNativeViewConfig;

View File

@ -0,0 +1,74 @@
/**
* 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
*/
'use strict';
const ReactNativeViewViewConfigAndroid = {
uiViewClassName: 'RCTView',
bubblingEventTypes: {
topSelect: {
phasedRegistrationNames: {
bubbled: 'onSelect',
captured: 'onSelectCapture',
},
},
},
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',
},
},
validAttributes: {
hasTVPreferredFocus: true,
focusable: true,
nativeBackgroundAndroid: true,
nativeForegroundAndroid: true,
nextFocusDown: true,
nextFocusForward: true,
nextFocusLeft: true,
nextFocusRight: true,
nextFocusUp: true,
},
};
module.exports = ReactNativeViewViewConfigAndroid;

View File

@ -0,0 +1,41 @@
/**
* 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.
*
* @format
* @flow strict-local
*/
'use strict';
import type {ViewProps} from './ViewPropTypes';
const React = require('react');
import ViewNativeComponent from './ViewNativeComponent';
const TextAncestor = require('../../Text/TextAncestor');
export type Props = ViewProps;
/**
* The most fundamental component for building a UI, View is a container that
* supports layout with flexbox, style, some touch handling, and accessibility
* controls.
*
* @see https://reactnative.dev/docs/view.html
*/
const View: React.AbstractComponent<
ViewProps,
React.ElementRef<typeof ViewNativeComponent>,
> = React.forwardRef((props: ViewProps, forwardedRef) => {
return (
<TextAncestor.Provider value={false}>
<ViewNativeComponent {...props} ref={forwardedRef} />
</TextAncestor.Provider>
);
});
View.displayName = 'View';
module.exports = View;

View File

@ -0,0 +1,86 @@
/**
* 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.
*
* @format
* @flow strict-local
*/
'use strict';
import type {SyntheticEvent} from '../../Types/CoreEventTypes';
// This must be kept in sync with the AccessibilityRolesMask in RCTViewManager.m
export type AccessibilityRole =
| 'none'
| 'button'
| 'link'
| 'search'
| 'image'
| 'keyboardkey'
| 'text'
| 'adjustable'
| 'imagebutton'
| 'header'
| 'summary'
| 'alert'
| 'checkbox'
| 'combobox'
| 'menu'
| 'menubar'
| 'menuitem'
| 'progressbar'
| 'radio'
| 'radiogroup'
| 'scrollbar'
| 'spinbutton'
| 'switch'
| 'tab'
| 'tablist'
| 'timer'
| 'toolbar';
// the info associated with an accessibility action
export type AccessibilityActionInfo = $ReadOnly<{
name: string,
label?: string,
...
}>;
// The info included in the event sent to onAccessibilityAction
export type AccessibilityActionEvent = SyntheticEvent<
$ReadOnly<{actionName: string, ...}>,
>;
export type AccessibilityState = {
disabled?: boolean,
selected?: boolean,
checked?: ?boolean | 'mixed',
busy?: boolean,
expanded?: boolean,
...
};
export type AccessibilityValue = $ReadOnly<{|
/**
* The minimum value of this component's range. (should be an integer)
*/
min?: number,
/**
* The maximum value of this component's range. (should be an integer)
*/
max?: number,
/**
* The current value of this component's range. (should be an integer)
*/
now?: number,
/**
* A textual description of this component's value. (will override minimum, current, and maximum if set)
*/
text?: string,
|}>;

View File

@ -0,0 +1,90 @@
/**
* 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.
*
* @format
* @flow
*/
'use strict';
const Platform = require('../../Utilities/Platform');
const ReactNativeViewViewConfigAndroid = require('./ReactNativeViewViewConfigAndroid');
const registerGeneratedViewConfig = require('../../Utilities/registerGeneratedViewConfig');
const requireNativeComponent = require('../../ReactNative/requireNativeComponent');
import * as React from 'react';
import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
import type {ViewProps} from './ViewPropTypes';
import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
export type ViewNativeComponentType = HostComponent<ViewProps>;
let NativeViewComponent;
let viewConfig:
| {...}
| {|
bubblingEventTypes?: $ReadOnly<{
[eventName: string]: $ReadOnly<{|
phasedRegistrationNames: $ReadOnly<{|
bubbled: string,
captured: string,
|}>,
|}>,
...,
}>,
directEventTypes?: $ReadOnly<{
[eventName: string]: $ReadOnly<{|registrationName: string|}>,
...,
}>,
uiViewClassName: string,
validAttributes?: {
[propName: string]:
| true
| $ReadOnly<{|
diff?: <T>(arg1: any, arg2: any) => boolean,
process?: (arg1: any) => any,
|}>,
...,
},
|};
if (__DEV__ || global.RN$Bridgeless) {
// On Android, View extends the base component with additional view-only props
// On iOS, the base component is View
if (Platform.OS === 'android') {
viewConfig = ReactNativeViewViewConfigAndroid;
registerGeneratedViewConfig('RCTView', ReactNativeViewViewConfigAndroid);
} else {
viewConfig = {};
registerGeneratedViewConfig('RCTView', {uiViewClassName: 'RCTView'});
}
NativeViewComponent = 'RCTView';
} else {
NativeViewComponent = requireNativeComponent('RCTView');
}
export const __INTERNAL_VIEW_CONFIG = viewConfig;
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 ((NativeViewComponent: any): ViewNativeComponentType);

View File

@ -0,0 +1,496 @@
/**
* 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.
*
* @format
* @flow strict-local
*/
'use strict';
import type {
BlurEvent,
FocusEvent,
MouseEvent,
PressEvent,
Layout,
LayoutEvent,
} from '../../Types/CoreEventTypes';
import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
import type {Node} from 'react';
import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
import type {
AccessibilityRole,
AccessibilityState,
AccessibilityValue,
AccessibilityActionEvent,
AccessibilityActionInfo,
} from './ViewAccessibility';
export type ViewLayout = Layout;
export type ViewLayoutEvent = LayoutEvent;
type BubblingEventProps = $ReadOnly<{|
onBlur?: ?(event: BlurEvent) => mixed,
onFocus?: ?(event: FocusEvent) => mixed,
|}>;
type DirectEventProps = $ReadOnly<{|
/**
* When `accessible` is true, the system will try to invoke this function
* when the user performs an accessibility custom action.
*
*/
onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
/**
* When `accessible` is true, the system will try to invoke this function
* when the user performs accessibility tap gesture.
*
* See https://reactnative.dev/docs/view.html#onaccessibilitytap
*/
onAccessibilityTap?: ?() => mixed,
/**
* Invoked on mount and layout changes with:
*
* `{nativeEvent: { layout: {x, y, width, height}}}`
*
* This event is fired immediately once the layout has been calculated, but
* the new layout may not yet be reflected on the screen at the time the
* event is received, especially if a layout animation is in progress.
*
* See https://reactnative.dev/docs/view.html#onlayout
*/
onLayout?: ?(event: LayoutEvent) => mixed,
/**
* When `accessible` is `true`, the system will invoke this function when the
* user performs the magic tap gesture.
*
* See https://reactnative.dev/docs/view.html#onmagictap
*/
onMagicTap?: ?() => mixed,
/**
* When `accessible` is `true`, the system will invoke this function when the
* user performs the escape gesture.
*
* See https://reactnative.dev/docs/view.html#onaccessibilityescape
*/
onAccessibilityEscape?: ?() => mixed,
|}>;
type MouseEventProps = $ReadOnly<{|
onMouseEnter?: (event: MouseEvent) => void,
onMouseLeave?: (event: MouseEvent) => void,
|}>;
type TouchEventProps = $ReadOnly<{|
onTouchCancel?: ?(e: PressEvent) => void,
onTouchCancelCapture?: ?(e: PressEvent) => void,
onTouchEnd?: ?(e: PressEvent) => void,
onTouchEndCapture?: ?(e: PressEvent) => void,
onTouchMove?: ?(e: PressEvent) => void,
onTouchMoveCapture?: ?(e: PressEvent) => void,
onTouchStart?: ?(e: PressEvent) => void,
onTouchStartCapture?: ?(e: PressEvent) => void,
|}>;
/**
* For most touch interactions, you'll simply want to wrap your component in
* `TouchableHighlight` or `TouchableOpacity`. Check out `Touchable.js`,
* `ScrollResponder.js` and `ResponderEventPlugin.js` for more discussion.
*/
type GestureResponderEventProps = $ReadOnly<{|
/**
* Does this view want to "claim" touch responsiveness? This is called for
* every touch move on the `View` when it is not the responder.
*
* `View.props.onMoveShouldSetResponder: (event) => [true | false]`, where
* `event` is a synthetic touch event as described above.
*
* See https://reactnative.dev/docs/view.html#onmoveshouldsetresponder
*/
onMoveShouldSetResponder?: ?(e: PressEvent) => boolean,
/**
* If a parent `View` wants to prevent a child `View` from becoming responder
* on a move, it should have this handler which returns `true`.
*
* `View.props.onMoveShouldSetResponderCapture: (event) => [true | false]`,
* where `event` is a synthetic touch event as described above.
*
* See https://reactnative.dev/docs/view.html#onMoveShouldsetrespondercapture
*/
onMoveShouldSetResponderCapture?: ?(e: PressEvent) => boolean,
/**
* The View is now responding for touch events. This is the time to highlight
* and show the user what is happening.
*
* `View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic
* touch event as described above.
*
* PanResponder includes a note `// TODO: t7467124 investigate if this can be removed` that
* should help fixing this return type.
*
* See https://reactnative.dev/docs/view.html#onrespondergrant
*/
onResponderGrant?: ?(e: PressEvent) => void | boolean,
/**
* The user is moving their finger.
*
* `View.props.onResponderMove: (event) => {}`, where `event` is a synthetic
* touch event as described above.
*
* See https://reactnative.dev/docs/view.html#onrespondermove
*/
onResponderMove?: ?(e: PressEvent) => void,
/**
* Another responder is already active and will not release it to that `View`
* asking to be the responder.
*
* `View.props.onResponderReject: (event) => {}`, where `event` is a
* synthetic touch event as described above.
*
* See https://reactnative.dev/docs/view.html#onresponderreject
*/
onResponderReject?: ?(e: PressEvent) => void,
/**
* Fired at the end of the touch.
*
* `View.props.onResponderRelease: (event) => {}`, where `event` is a
* synthetic touch event as described above.
*
* See https://reactnative.dev/docs/view.html#onresponderrelease
*/
onResponderRelease?: ?(e: PressEvent) => void,
onResponderStart?: ?(e: PressEvent) => void,
onResponderEnd?: ?(e: PressEvent) => void,
/**
* The responder has been taken from the `View`. Might be taken by other
* views after a call to `onResponderTerminationRequest`, or might be taken
* by the OS without asking (e.g., happens with control center/ notification
* center on iOS)
*
* `View.props.onResponderTerminate: (event) => {}`, where `event` is a
* synthetic touch event as described above.
*
* See https://reactnative.dev/docs/view.html#onresponderterminate
*/
onResponderTerminate?: ?(e: PressEvent) => void,
/**
* Some other `View` wants to become responder and is asking this `View` to
* release its responder. Returning `true` allows its release.
*
* `View.props.onResponderTerminationRequest: (event) => {}`, where `event`
* is a synthetic touch event as described above.
*
* See https://reactnative.dev/docs/view.html#onresponderterminationrequest
*/
onResponderTerminationRequest?: ?(e: PressEvent) => boolean,
/**
* Does this view want to become responder on the start of a touch?
*
* `View.props.onStartShouldSetResponder: (event) => [true | false]`, where
* `event` is a synthetic touch event as described above.
*
* See https://reactnative.dev/docs/view.html#onstartshouldsetresponder
*/
onStartShouldSetResponder?: ?(e: PressEvent) => boolean,
/**
* If a parent `View` wants to prevent a child `View` from becoming responder
* on a touch start, it should have this handler which returns `true`.
*
* `View.props.onStartShouldSetResponderCapture: (event) => [true | false]`,
* where `event` is a synthetic touch event as described above.
*
* See https://reactnative.dev/docs/view.html#onstartshouldsetrespondercapture
*/
onStartShouldSetResponderCapture?: ?(e: PressEvent) => boolean,
|}>;
type AndroidDrawableThemeAttr = $ReadOnly<{|
type: 'ThemeAttrAndroid',
attribute: string,
|}>;
type AndroidDrawableRipple = $ReadOnly<{|
type: 'RippleAndroid',
color?: ?number,
borderless?: ?boolean,
rippleRadius?: ?number,
|}>;
type AndroidDrawable = AndroidDrawableThemeAttr | AndroidDrawableRipple;
type AndroidViewProps = $ReadOnly<{|
nativeBackgroundAndroid?: ?AndroidDrawable,
nativeForegroundAndroid?: ?AndroidDrawable,
/**
* Whether this `View` should render itself (and all of its children) into a
* single hardware texture on the GPU.
*
* @platform android
*
* See https://reactnative.dev/docs/view.html#rendertohardwaretextureandroid
*/
renderToHardwareTextureAndroid?: ?boolean,
/**
* Views that are only used to layout their children or otherwise don't draw
* anything may be automatically removed from the native hierarchy as an
* optimization. Set this property to `false` to disable this optimization and
* ensure that this `View` exists in the native view hierarchy.
*
* @platform android
*
* See https://reactnative.dev/docs/view.html#collapsable
*/
collapsable?: ?boolean,
/**
* Whether this `View` needs to rendered offscreen and composited with an
* alpha in order to preserve 100% correct colors and blending behavior.
*
* @platform android
*
* See https://reactnative.dev/docs/view.html#needsoffscreenalphacompositing
*/
needsOffscreenAlphaCompositing?: ?boolean,
/**
* Indicates to accessibility services whether the user should be notified
* when this view changes. Works for Android API >= 19 only.
*
* @platform android
*
* See https://reactnative.dev/docs/view.html#accessibilityliveregion
*/
accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
/**
* Controls how view is important for accessibility which is if it
* fires accessibility events and if it is reported to accessibility services
* that query the screen. Works for Android only.
*
* @platform android
*
* See https://reactnative.dev/docs/view.html#importantforaccessibility
*/
importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
/**
* Whether to force the Android TV focus engine to move focus to this view.
*
* @platform android
*/
hasTVPreferredFocus?: ?boolean,
/**
* TV next focus down (see documentation for the View component).
*
* @platform android
*/
nextFocusDown?: ?number,
/**
* TV next focus forward (see documentation for the View component).
*
* @platform android
*/
nextFocusForward?: ?number,
/**
* TV next focus left (see documentation for the View component).
*
* @platform android
*/
nextFocusLeft?: ?number,
/**
* TV next focus right (see documentation for the View component).
*
* @platform android
*/
nextFocusRight?: ?number,
/**
* TV next focus up (see documentation for the View component).
*
* @platform android
*/
nextFocusUp?: ?number,
/**
* Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
*
* @platform android
*/
focusable?: boolean,
/**
* The action to perform when this `View` is clicked on by a non-touch click, eg. enter key on a hardware keyboard.
*
* @platform android
*/
onClick?: ?(event: PressEvent) => mixed,
|}>;
type IOSViewProps = $ReadOnly<{|
/**
* Prevents view from being inverted if set to true and color inversion is turned on.
*
* @platform ios
*/
accessibilityIgnoresInvertColors?: ?boolean,
/**
* A value indicating whether VoiceOver should ignore the elements
* within views that are siblings of the receiver.
* Default is `false`.
*
* @platform ios
*
* See https://reactnative.dev/docs/view.html#accessibilityviewismodal
*/
accessibilityViewIsModal?: ?boolean,
/**
* A value indicating whether the accessibility elements contained within
* this accessibility element are hidden.
*
* @platform ios
*
* See https://reactnative.dev/docs/view.html#accessibilityElementsHidden
*/
accessibilityElementsHidden?: ?boolean,
/**
* Whether this `View` should be rendered as a bitmap before compositing.
*
* @platform ios
*
* See https://reactnative.dev/docs/view.html#shouldrasterizeios
*/
shouldRasterizeIOS?: ?boolean,
|}>;
export type ViewProps = $ReadOnly<{|
...BubblingEventProps,
...DirectEventProps,
...GestureResponderEventProps,
...MouseEventProps,
...TouchEventProps,
...AndroidViewProps,
...IOSViewProps,
children?: Node,
style?: ?ViewStyleProp,
/**
* When `true`, indicates that the view is an accessibility element.
* By default, all the touchable elements are accessible.
*
* See https://reactnative.dev/docs/view.html#accessible
*/
accessible?: ?boolean,
/**
* Overrides the text that's read by the screen reader when the user interacts
* with the element. By default, the label is constructed by traversing all
* the children and accumulating all the `Text` nodes separated by space.
*
* See https://reactnative.dev/docs/view.html#accessibilitylabel
*/
accessibilityLabel?: ?Stringish,
/**
* An accessibility hint helps users understand what will happen when they perform
* an action on the accessibility element when that result is not obvious from the
* accessibility label.
*
*
* See https://reactnative.dev/docs/view.html#accessibilityHint
*/
accessibilityHint?: ?Stringish,
/**
* Indicates to accessibility services to treat UI component like a specific role.
*/
accessibilityRole?: ?AccessibilityRole,
/**
* Indicates to accessibility services that UI Component is in a specific State.
*/
accessibilityState?: ?AccessibilityState,
accessibilityValue?: ?AccessibilityValue,
/**
* Provides an array of custom actions available for accessibility.
*
*/
accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
/**
* Used to locate this view in end-to-end tests.
*
* > This disables the 'layout-only view removal' optimization for this view!
*
* See https://reactnative.dev/docs/view.html#testid
*/
testID?: ?string,
/**
* Used to locate this view from native classes.
*
* > This disables the 'layout-only view removal' optimization for this view!
*
* See https://reactnative.dev/docs/view.html#nativeid
*/
nativeID?: ?string,
/**
* This defines how far a touch event can start away from the view.
* Typical interface guidelines recommend touch targets that are at least
* 30 - 40 points/density-independent pixels.
*
* > The touch area never extends past the parent view bounds and the Z-index
* > of sibling views always takes precedence if a touch hits two overlapping
* > views.
*
* See https://reactnative.dev/docs/view.html#hitslop
*/
hitSlop?: ?EdgeInsetsProp,
/**
* Controls whether the `View` can be the target of touch events.
*
* See https://reactnative.dev/docs/view.html#pointerevents
*/
pointerEvents?: ?('auto' | 'box-none' | 'box-only' | 'none'),
/**
* This is a special performance property exposed by `RCTView` and is useful
* for scrolling content when there are many subviews, most of which are
* offscreen. For this property to be effective, it must be applied to a
* view that contains many subviews that extend outside its bound. The
* subviews must also have `overflow: hidden`, as should the containing view
* (or one of its superviews).
*
* See https://reactnative.dev/docs/view.html#removeclippedsubviews
*/
removeClippedSubviews?: ?boolean,
|}>;