diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js index b0a7d4f989c..0a6cfcd418e 100644 --- a/packages/react-native/Libraries/Components/Pressable/Pressable.js +++ b/packages/react-native/Libraries/Components/Pressable/Pressable.js @@ -9,17 +9,11 @@ */ import type { + GestureResponderEvent, LayoutChangeEvent, MouseEvent, - GestureResponderEvent, } from '../../Types/CoreEventTypes'; -import type { - AccessibilityActionEvent, - AccessibilityActionInfo, - AccessibilityRole, - AccessibilityState, - AccessibilityValue, -} from '../View/ViewAccessibility'; +import type {ViewProps} from '../View/ViewPropTypes'; import {PressabilityDebugView} from '../../Pressability/PressabilityDebug'; import usePressability from '../../Pressability/usePressability'; @@ -27,59 +21,18 @@ import {type RectOrSize} from '../../StyleSheet/Rect'; import useMergeRefs from '../../Utilities/useMergeRefs'; import View from '../View/View'; import useAndroidRippleForView, { - type RippleConfig, + type PressableAndroidRippleConfig, } from './useAndroidRippleForView'; import * as React from 'react'; import {useMemo, useRef, useState} from 'react'; type ViewStyleProp = $ElementType, 'style'>; -export type StateCallbackType = $ReadOnly<{ +export type PressableStateCallbackType = $ReadOnly<{ pressed: boolean, }>; -type Props = $ReadOnly<{ - /** - * Accessibility. - */ - accessibilityActions?: ?$ReadOnlyArray, - accessibilityElementsHidden?: ?boolean, - accessibilityHint?: ?Stringish, - accessibilityLanguage?: ?Stringish, - accessibilityIgnoresInvertColors?: ?boolean, - accessibilityLabel?: ?Stringish, - accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'), - accessibilityRole?: ?AccessibilityRole, - accessibilityState?: ?AccessibilityState, - accessibilityValue?: ?AccessibilityValue, - 'aria-valuemax'?: AccessibilityValue['max'], - 'aria-valuemin'?: AccessibilityValue['min'], - 'aria-valuenow'?: AccessibilityValue['now'], - 'aria-valuetext'?: AccessibilityValue['text'], - accessibilityViewIsModal?: ?boolean, - 'aria-modal'?: ?boolean, - accessible?: ?boolean, - - /** - * alias for accessibilityState - * - * see https://reactnative.dev/docs/accessibility#accessibilitystate - */ - 'aria-busy'?: ?boolean, - 'aria-checked'?: ?boolean | 'mixed', - 'aria-disabled'?: ?boolean, - 'aria-expanded'?: ?boolean, - 'aria-selected'?: ?boolean, - /** - * A value indicating whether the accessibility elements contained within - * this accessibility element are hidden. - */ - 'aria-hidden'?: ?boolean, - 'aria-live'?: ?('polite' | 'assertive' | 'off'), - focusable?: ?boolean, - importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), - onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, - +type PressableBaseProps = $ReadOnly<{ /** * Whether a press gesture can be interrupted by a parent gesture such as a * scroll event. Defaults to true. @@ -90,7 +43,7 @@ type Props = $ReadOnly<{ * Either children or a render prop that receives a boolean reflecting whether * the component is currently pressed. */ - children: React.Node | ((state: StateCallbackType) => React.Node), + children: React.Node | ((state: PressableStateCallbackType) => React.Node), /** * Duration to wait after hover in before calling `onHoverIn`. @@ -162,7 +115,9 @@ type Props = $ReadOnly<{ * Either view styles or a function that receives a boolean reflecting whether * the component is currently pressed and returns view styles. */ - style?: ViewStyleProp | ((state: StateCallbackType) => ViewStyleProp), + style?: + | ViewStyleProp + | ((state: PressableStateCallbackType) => ViewStyleProp), /** * Identifier used to find this view in tests. @@ -177,7 +132,7 @@ type Props = $ReadOnly<{ /** * Enables the Android ripple effect and configures its color. */ - android_ripple?: ?RippleConfig, + android_ripple?: ?PressableAndroidRippleConfig, /** * Used only for documentation or testing (e.g. snapshot testing). @@ -188,11 +143,11 @@ type Props = $ReadOnly<{ * Duration to wait after press down before calling `onPressIn`. */ unstable_pressDelay?: ?number, - /** - * Web to Native Accessibility props - * https://github.com/facebook/react-native/issues/34424 - */ - 'aria-label'?: ?string, +}>; + +export type PressableProps = $ReadOnly<{ + ...ViewProps, + ...PressableBaseProps, }>; type Instance = React.ElementRef; @@ -202,7 +157,7 @@ type Instance = React.ElementRef; * component is currently pressed or not. */ function Pressable( - props: Props, + props: PressableProps, forwardedRef: React.RefSetter, ): React.Node { const { @@ -364,6 +319,6 @@ const MemoedPressable = React.memo(React.forwardRef(Pressable)); MemoedPressable.displayName = 'Pressable'; export default (MemoedPressable: component( - ref: React.RefSetter>, - ...props: Props + ref?: React.RefSetter>, + ...props: PressableProps )); diff --git a/packages/react-native/Libraries/Components/Pressable/useAndroidRippleForView.js b/packages/react-native/Libraries/Components/Pressable/useAndroidRippleForView.js index b38d5ade608..a786da2db64 100644 --- a/packages/react-native/Libraries/Components/Pressable/useAndroidRippleForView.js +++ b/packages/react-native/Libraries/Components/Pressable/useAndroidRippleForView.js @@ -26,7 +26,7 @@ type NativeBackgroundProp = $ReadOnly<{ rippleRadius: ?number, }>; -export type RippleConfig = { +export type PressableAndroidRippleConfig = { color?: ColorValue, borderless?: boolean, radius?: number, @@ -38,7 +38,7 @@ export type RippleConfig = { * supported versions of Android. */ export default function useAndroidRippleForView( - rippleConfig: ?RippleConfig, + rippleConfig: ?PressableAndroidRippleConfig, viewRef: {current: null | React.ElementRef}, ): ?$ReadOnly<{ onPressIn: (event: GestureResponderEvent) => void, diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.js b/packages/react-native/Libraries/Components/View/ViewPropTypes.js index 33c8384876c..2c8b52fc43f 100644 --- a/packages/react-native/Libraries/Components/View/ViewPropTypes.js +++ b/packages/react-native/Libraries/Components/View/ViewPropTypes.js @@ -322,7 +322,7 @@ export type ViewPropsAndroid = $ReadOnly<{ * * @platform android */ - focusable?: boolean, + focusable?: ?boolean, /** * Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 40c5a16997d..597e90f992d 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -1641,39 +1641,12 @@ declare export default typeof LayoutConformanceNativeComponent; exports[`public API should not change unintentionally Libraries/Components/Pressable/Pressable.js 1`] = ` "type ViewStyleProp = $ElementType, \\"style\\">; -export type StateCallbackType = $ReadOnly<{ +export type PressableStateCallbackType = $ReadOnly<{ pressed: boolean, }>; -type Props = $ReadOnly<{ - accessibilityActions?: ?$ReadOnlyArray, - accessibilityElementsHidden?: ?boolean, - accessibilityHint?: ?Stringish, - accessibilityLanguage?: ?Stringish, - accessibilityIgnoresInvertColors?: ?boolean, - accessibilityLabel?: ?Stringish, - accessibilityLiveRegion?: ?(\\"none\\" | \\"polite\\" | \\"assertive\\"), - accessibilityRole?: ?AccessibilityRole, - accessibilityState?: ?AccessibilityState, - accessibilityValue?: ?AccessibilityValue, - \\"aria-valuemax\\"?: AccessibilityValue[\\"max\\"], - \\"aria-valuemin\\"?: AccessibilityValue[\\"min\\"], - \\"aria-valuenow\\"?: AccessibilityValue[\\"now\\"], - \\"aria-valuetext\\"?: AccessibilityValue[\\"text\\"], - accessibilityViewIsModal?: ?boolean, - \\"aria-modal\\"?: ?boolean, - accessible?: ?boolean, - \\"aria-busy\\"?: ?boolean, - \\"aria-checked\\"?: ?boolean | \\"mixed\\", - \\"aria-disabled\\"?: ?boolean, - \\"aria-expanded\\"?: ?boolean, - \\"aria-selected\\"?: ?boolean, - \\"aria-hidden\\"?: ?boolean, - \\"aria-live\\"?: ?(\\"polite\\" | \\"assertive\\" | \\"off\\"), - focusable?: ?boolean, - importantForAccessibility?: ?(\\"auto\\" | \\"yes\\" | \\"no\\" | \\"no-hide-descendants\\"), - onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, +type PressableBaseProps = $ReadOnly<{ cancelable?: ?boolean, - children: React.Node | ((state: StateCallbackType) => React.Node), + children: React.Node | ((state: PressableStateCallbackType) => React.Node), delayHoverIn?: ?number, delayHoverOut?: ?number, delayLongPress?: ?number, @@ -1687,17 +1660,22 @@ type Props = $ReadOnly<{ onPress?: ?(event: GestureResponderEvent) => mixed, onPressIn?: ?(event: GestureResponderEvent) => mixed, onPressOut?: ?(event: GestureResponderEvent) => mixed, - style?: ViewStyleProp | ((state: StateCallbackType) => ViewStyleProp), + style?: + | ViewStyleProp + | ((state: PressableStateCallbackType) => ViewStyleProp), testID?: ?string, android_disableSound?: ?boolean, - android_ripple?: ?RippleConfig, + android_ripple?: ?PressableAndroidRippleConfig, testOnly_pressed?: ?boolean, unstable_pressDelay?: ?number, - \\"aria-label\\"?: ?string, +}>; +export type PressableProps = $ReadOnly<{ + ...ViewProps, + ...PressableBaseProps, }>; declare export default component( - ref: React.RefSetter>, - ...props: Props + ref?: React.RefSetter>, + ...props: PressableProps ); " `; @@ -1709,14 +1687,14 @@ exports[`public API should not change unintentionally Libraries/Components/Press borderless: boolean, rippleRadius: ?number, }>; -export type RippleConfig = { +export type PressableAndroidRippleConfig = { color?: ColorValue, borderless?: boolean, radius?: number, foreground?: boolean, }; declare export default function useAndroidRippleForView( - rippleConfig: ?RippleConfig, + rippleConfig: ?PressableAndroidRippleConfig, viewRef: { current: null | React.ElementRef } ): ?$ReadOnly<{ onPressIn: (event: GestureResponderEvent) => void, @@ -3939,7 +3917,7 @@ export type ViewPropsAndroid = $ReadOnly<{ nextFocusLeft?: ?number, nextFocusRight?: ?number, nextFocusUp?: ?number, - focusable?: boolean, + focusable?: ?boolean, tabIndex?: 0 | -1, onClick?: ?(event: GestureResponderEvent) => mixed, }>; diff --git a/scripts/build/build-types/buildTypes.js b/scripts/build/build-types/buildTypes.js index 9d571e4d9db..bb4b4af0b03 100644 --- a/scripts/build/build-types/buildTypes.js +++ b/scripts/build/build-types/buildTypes.js @@ -42,6 +42,7 @@ const ENTRY_POINTS = [ 'packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js', 'packages/react-native/Libraries/Components/Keyboard/Keyboard.js', 'packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js', + 'packages/react-native/Libraries/Components/Pressable/Pressable.js', 'packages/react-native/Libraries/Components/ToastAndroid/ToastAndroid.js', 'packages/react-native/Libraries/Components/ScrollView/ScrollView.js', 'packages/react-native/Libraries/Interaction/InteractionManager.js',