/** * 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. * * @generated SignedSource<<459ad1ac92ec7d2bd5a645dff882e93c>> * * This file was translated from Flow by scripts/js-api/build-types/index.js. * Original file: packages/react-native/Libraries/Components/View/ViewPropTypes.js */ import type { EdgeInsetsOrSizeProp } from "../../StyleSheet/EdgeInsetsPropType"; import type { ProcessedColorValue } from "../../StyleSheet/processColor"; import type { ViewStyleProp } from "../../StyleSheet/StyleSheet"; import type { BlurEvent, FocusEvent, GestureResponderEvent, KeyDownEvent, KeyUpEvent, LayoutChangeEvent, LayoutRectangle, MouseEvent, PointerEvent } from "../../Types/CoreEventTypes"; import type { AccessibilityActionEvent, AccessibilityProps } from "./ViewAccessibility"; import * as React from "react"; export type ViewLayout = LayoutRectangle; export type ViewLayoutEvent = LayoutChangeEvent; 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) => unknown) | undefined; /** * 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#onaccessibilitytap */ onAccessibilityTap?: (() => unknown) | undefined; /** * 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#onlayout */ onLayout?: ((event: LayoutChangeEvent) => unknown) | undefined; /** * When `accessible` is `true`, the system will invoke this function when the * user performs the magic tap gesture. * * See https://reactnative.dev/docs/view#onmagictap */ onMagicTap?: (() => unknown) | undefined; /** * When `accessible` is `true`, the system will invoke this function when the * user performs the escape gesture. * * See https://reactnative.dev/docs/view#onaccessibilityescape */ onAccessibilityEscape?: (() => unknown) | undefined; }>; type MouseEventProps = Readonly<{ onMouseEnter?: ((event: MouseEvent) => void) | undefined; onMouseLeave?: ((event: MouseEvent) => void) | undefined; }>; type PointerEventProps = Readonly<{ onClick?: ((event: PointerEvent) => void) | undefined; onClickCapture?: ((event: PointerEvent) => void) | undefined; onPointerEnter?: ((event: PointerEvent) => void) | undefined; onPointerEnterCapture?: ((event: PointerEvent) => void) | undefined; onPointerLeave?: ((event: PointerEvent) => void) | undefined; onPointerLeaveCapture?: ((event: PointerEvent) => void) | undefined; onPointerMove?: ((event: PointerEvent) => void) | undefined; onPointerMoveCapture?: ((event: PointerEvent) => void) | undefined; onPointerCancel?: ((e: PointerEvent) => void) | undefined; onPointerCancelCapture?: ((e: PointerEvent) => void) | undefined; onPointerDown?: ((e: PointerEvent) => void) | undefined; onPointerDownCapture?: ((e: PointerEvent) => void) | undefined; onPointerUp?: ((e: PointerEvent) => void) | undefined; onPointerUpCapture?: ((e: PointerEvent) => void) | undefined; onPointerOver?: ((e: PointerEvent) => void) | undefined; onPointerOverCapture?: ((e: PointerEvent) => void) | undefined; onPointerOut?: ((e: PointerEvent) => void) | undefined; onPointerOutCapture?: ((e: PointerEvent) => void) | undefined; onGotPointerCapture?: ((e: PointerEvent) => void) | undefined; onGotPointerCaptureCapture?: ((e: PointerEvent) => void) | undefined; onLostPointerCapture?: ((e: PointerEvent) => void) | undefined; onLostPointerCaptureCapture?: ((e: PointerEvent) => void) | undefined; }>; type FocusEventProps = Readonly<{ /** * Callback that is called when the view is blurred. * * Note: This will only be called if the view is focusable. */ onBlur?: ((event: BlurEvent) => void) | undefined; onBlurCapture?: ((event: BlurEvent) => void) | undefined; /** * Callback that is called when the view is focused. * * Note: This will only be called if the view is focusable. */ onFocus?: ((event: FocusEvent) => void) | undefined; onFocusCapture?: ((event: FocusEvent) => void) | undefined; }>; type KeyEventProps = Readonly<{ onKeyDown?: ((event: KeyDownEvent) => void) | undefined; onKeyDownCapture?: ((event: KeyDownEvent) => void) | undefined; onKeyUp?: ((event: KeyUpEvent) => void) | undefined; onKeyUpCapture?: ((event: KeyUpEvent) => void) | undefined; }>; type TouchEventProps = Readonly<{ onTouchCancel?: ((e: GestureResponderEvent) => void) | undefined; onTouchCancelCapture?: ((e: GestureResponderEvent) => void) | undefined; onTouchEnd?: ((e: GestureResponderEvent) => void) | undefined; onTouchEndCapture?: ((e: GestureResponderEvent) => void) | undefined; onTouchMove?: ((e: GestureResponderEvent) => void) | undefined; onTouchMoveCapture?: ((e: GestureResponderEvent) => void) | undefined; onTouchStart?: ((e: GestureResponderEvent) => void) | undefined; onTouchStartCapture?: ((e: GestureResponderEvent) => void) | undefined; }>; /** * 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. */ export type GestureResponderHandlers = 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#onmoveshouldsetresponder */ onMoveShouldSetResponder?: ((e: GestureResponderEvent) => boolean) | undefined; /** * 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#onMoveShouldsetrespondercapture */ onMoveShouldSetResponderCapture?: ((e: GestureResponderEvent) => boolean) | undefined; /** * 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. * * Return true from this callback to prevent any other native components from * becoming responder until this responder terminates (Android-only). * * See https://reactnative.dev/docs/view#onrespondergrant */ onResponderGrant?: ((e: GestureResponderEvent) => void | boolean) | undefined; /** * 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#onrespondermove */ onResponderMove?: ((e: GestureResponderEvent) => void) | undefined; /** * 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#onresponderreject */ onResponderReject?: ((e: GestureResponderEvent) => void) | undefined; /** * 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#onresponderrelease */ onResponderRelease?: ((e: GestureResponderEvent) => void) | undefined; onResponderStart?: ((e: GestureResponderEvent) => void) | undefined; onResponderEnd?: ((e: GestureResponderEvent) => void) | undefined; /** * 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#onresponderterminate */ onResponderTerminate?: ((e: GestureResponderEvent) => void) | undefined; /** * 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#onresponderterminationrequest */ onResponderTerminationRequest?: ((e: GestureResponderEvent) => boolean) | undefined; /** * 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#onstartshouldsetresponder */ onStartShouldSetResponder?: ((e: GestureResponderEvent) => boolean) | undefined; /** * 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#onstartshouldsetrespondercapture */ onStartShouldSetResponderCapture?: ((e: GestureResponderEvent) => boolean) | undefined; }>; type AndroidDrawableThemeAttr = Readonly<{ type: "ThemeAttrAndroid"; attribute: string; }>; type AndroidDrawableRipple = Readonly<{ type: "RippleAndroid"; color?: ProcessedColorValue | undefined; borderless?: boolean | undefined; rippleRadius?: number | undefined; alpha?: number | undefined; }>; type AndroidDrawable = AndroidDrawableThemeAttr | AndroidDrawableRipple; export type ViewPropsAndroid = Readonly<{ nativeBackgroundAndroid?: AndroidDrawable | undefined; nativeForegroundAndroid?: AndroidDrawable | undefined; /** * Whether this `View` should render itself (and all of its children) into a * single hardware texture on the GPU. * * On Android, this is useful for animations and interactions that only * modify opacity, rotation, translation and/or scale: in those cases, the * view does not have to be redrawn and display lists do not need to be * re-executed. The texture can be re-used and re-composited with different * parameters. The downside is that this can use up limited video memory, so * this prop should be set back to `false` at the end of the interaction/ * animation. * * @default `false` * * @platform android */ renderToHardwareTextureAndroid?: boolean | undefined; /** * Whether to force the Android TV focus engine to move focus to this view. * * @platform android * @deprecated Use `focusable` instead */ hasTVPreferredFocus?: boolean | undefined; /** * Designates the next view to receive focus when the user navigates down. * The value is the `nativeID` of the target view. * * @platform android */ nextFocusDown?: number | undefined; /** * Designates the next view to receive focus when the user navigates * forward. The value is the `nativeID` of the target view. * * @platform android */ nextFocusForward?: number | undefined; /** * Designates the next view to receive focus when the user navigates left. * The value is the `nativeID` of the target view. * * @platform android */ nextFocusLeft?: number | undefined; /** * Designates the next view to receive focus when the user navigates right. * The value is the `nativeID` of the target view. * * @platform android */ nextFocusRight?: number | undefined; /** * Designates the next view to receive focus when the user navigates up. * The value is the `nativeID` of the target view. * * @platform android */ nextFocusUp?: number | undefined; /** * Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. * * @platform android */ focusable?: boolean | undefined; /** * Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. * See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex * for more details. * * Supports the following values: * - 0 (View is focusable) * - -1 (View is not focusable) * * @platform android */ tabIndex?: 0 | -1 | undefined; /** * 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: GestureResponderEvent) => unknown) | undefined; }>; export type TVViewPropsIOS = Readonly<{ /** * *(Apple TV only)* When set to true, this view will be focusable * and navigable using the Apple TV remote. * * @platform ios */ isTVSelectable?: boolean | undefined; /** * *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. * * @platform ios * @deprecated Use `focusable` instead */ hasTVPreferredFocus?: boolean | undefined; /** * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 2.0. * * @platform ios */ tvParallaxShiftDistanceX?: number | undefined; /** * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 2.0. * * @platform ios */ tvParallaxShiftDistanceY?: number | undefined; /** * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 0.05. * * @platform ios */ tvParallaxTiltAngle?: number | undefined; /** * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 1.0. * * @platform ios */ tvParallaxMagnification?: number | undefined; }>; export type ViewPropsIOS = Readonly<{ /** * Whether this `View` should be rendered as a bitmap before compositing. * * On iOS, this is useful for animations and interactions that do not * modify this component's dimensions nor its children; for example, when * translating the position of a static view, rasterization allows the * renderer to skip re-rendering the view frame and re-use the cached * bitmap. * * Rasterization incurs an offscreen drawing pass and the bitmap consumes * memory. Test and measure when using this property. * * @default `false` * * @platform ios */ shouldRasterizeIOS?: boolean | undefined; }>; type ViewBaseProps = Readonly<{ children?: React.ReactNode | undefined; style?: ViewStyleProp | undefined; /** * 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. * * @default `true` */ collapsable?: boolean | undefined; /** * Setting to false prevents direct children of the view from being removed * from the native view hierarchy, similar to the effect of setting * `collapsable={false}` on each child. * * @default `true` */ collapsableChildren?: boolean | undefined; /** * Used to locate this view from native classes. Has precedence over `nativeID` prop. * * > This disables the 'layout-only view removal' optimization for this view! * * See https://reactnative.dev/docs/view#id */ id?: string | undefined; /** * 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#testid */ testID?: string | undefined; /** * 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#nativeid */ nativeID?: string | undefined; /** * Whether this `View` needs to be rendered offscreen and composited with an * alpha in order to preserve 100% correct colors and blending behavior. * The default (`false`) falls back to drawing the component and its children * with reduced alpha applied to the paint used to draw each element * instead of rendering the full component offscreen and compositing it back * with an alpha value. This default may be noticeable and undesired in the * case where the `View` you are setting an opacity on has multiple * overlapping elements (e.g. multiple overlapping `View`s, or text and a * background). * * Rendering offscreen to preserve correct alpha behavior is extremely * expensive and hard to debug for non-native developers, which is why it is * not turned on by default. * * @default `false` */ needsOffscreenAlphaCompositing?: boolean | undefined; /** * 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#hitslop */ hitSlop?: EdgeInsetsOrSizeProp | undefined; /** * Controls whether the `View` can be the target of touch events. * * - `'auto'`: The view can be the target of touch events. * - `'none'`: The view is never the target of touch events. * - `'box-none'`: The view is never the target of touch events but its * subviews can be. * - `'box-only'`: The view can be the target of touch events but its * subviews cannot be. */ pointerEvents?: ("auto" | "box-none" | "box-only" | "none") | undefined; /** * 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#removeclippedsubviews */ removeClippedSubviews?: boolean | undefined; /** * Defines the order in which descendant elements receive accessibility focus. * The elements in the array represent nativeID values for the respective * descendant elements. */ experimental_accessibilityOrder?: Array | undefined; }>; export interface ViewProps extends Readonly & Omit & Omit & Omit & Omit & Omit & Omit & Omit & Omit & Omit & Omit> {}