From 755a7dbf5644d4f8ee08cba18bfa73a115c8d849 Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Mon, 23 Oct 2023 16:58:43 -0700 Subject: [PATCH] Move iOS/Android specific prop types appropriate types (#40978) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: I wanted to add a new iOS prop, but noticed this, got distracted, fixed it up, and here we are 😅 There are a few Android/iOS specific props that have been added to `ViewProps` instead of `ViewPropsAndroid` or `ViewPropsIOS`. Let's just move around some props to clean that up, in both Flow and TypeScript.Specifically: - Moved `needsOffscreenAlphaCompositing` to shared as it's implemented on both iOS and Android - Moved `accessibilityLiveRegion` / `aria-live` / `accesbilityLabelledBy` / `aria-labelledBy` to Android - While at it, I also updated the comment definition so that `accessibilityLabelledBy` and `aria-labelledBy` because it just maps to the same thing in native code. - Moved `accessibilityLanguage` to iOS only ## Changelog: [GENERAL] [FIXED] - Move iOS/Android specific prop types appropriate types Pull Request resolved: https://github.com/facebook/react-native/pull/40978 Test Plan: CI should pass Reviewed By: NickGerleman Differential Revision: D50372564 Pulled By: vincentriemer fbshipit-source-id: ba947c15ffdd4d84d3424b4274afdcbf130adad4 --- .../Components/View/ViewAccessibility.d.ts | 50 ++++++++----- .../Components/View/ViewPropTypes.d.ts | 32 ++++----- .../Components/View/ViewPropTypes.js | 72 +++++++++---------- 3 files changed, 85 insertions(+), 69 deletions(-) diff --git a/packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts b/packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts index acb833ef7fbe5e..90cca7b66a19ff 100644 --- a/packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts +++ b/packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts @@ -58,13 +58,6 @@ export interface AccessibilityProps 'aria-expanded'?: boolean | undefined; 'aria-selected'?: boolean | undefined; - /** - * Represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud. - * - * @platform android - */ - 'aria-labelledby'?: string | undefined; - /** * 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. */ @@ -99,7 +92,6 @@ export interface AccessibilityProps */ 'aria-hidden'?: boolean | undefined; - 'aria-live'?: ('polite' | 'assertive' | 'off') | undefined; 'aria-modal'?: boolean | undefined; /** @@ -227,13 +219,41 @@ export type AccessibilityRole = export interface AccessibilityPropsAndroid { /** - * Indicates to accessibility services whether the user should be notified when this view changes. - * Works for Android API >= 19 only. - * See http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion for references. + * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, + * the text is read aloud. The value should should match the nativeID of the related element. + * + * @platform android + */ + accessibilityLabelledBy?: string | string[] | undefined; + + /** + * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, + * the text is read aloud. The value should should match the nativeID of the related element. + * * @platform android */ + 'aria-labelledby'?: string | undefined; + + /** + * 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#accessibilityliveregion + */ accessibilityLiveRegion?: 'none' | 'polite' | 'assertive' | undefined; + /** + * 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#accessibilityliveregion + */ + 'aria-live'?: ('polite' | 'assertive' | 'off') | undefined; + /** * 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. @@ -244,6 +264,8 @@ export interface AccessibilityPropsAndroid { * 'yes' - The view is important for accessibility. * 'no' - The view is not important for accessibility. * 'no-hide-descendants' - The view is not important for accessibility, nor are any of its descendant views. + * + * @platform android */ importantForAccessibility?: | 'auto' @@ -251,12 +273,6 @@ export interface AccessibilityPropsAndroid { | 'no' | 'no-hide-descendants' | undefined; - - /** - * A reference to another element `nativeID` used to build complex forms. The value of `accessibilityLabelledBy` should match the `nativeID` of the related element. - * @platform android - */ - accessibilityLabelledBy?: string | string[] | undefined; } export interface AccessibilityPropsIOS { diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts b/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts index 8c67a32ec90fde..888f30731214fc 100644 --- a/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts +++ b/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts @@ -132,22 +132,6 @@ export interface ViewPropsAndroid { */ collapsable?: boolean | undefined; - /** - * Whether this view needs to 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 an 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 Views, 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. - * If you do need to enable this property for an animation, - * consider combining it with renderToHardwareTextureAndroid if the view contents are static (i.e. it doesn't need to be redrawn each frame). - * If that property is enabled, this View will be rendered off-screen once, - * saved in a hardware texture, and then composited onto the screen with an alpha each frame without having to switch rendering targets on the GPU. - */ - needsOffscreenAlphaCompositing?: boolean | undefined; - /** * Whether this view should render itself (and all of its children) into a single hardware texture on the GPU. * @@ -191,6 +175,22 @@ export interface ViewProps */ id?: string | undefined; + /** + * Whether this view needs to 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 an 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 Views, 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. + * If you do need to enable this property for an animation, + * consider combining it with renderToHardwareTextureAndroid if the view contents are static (i.e. it doesn't need to be redrawn each frame). + * If that property is enabled, this View will be rendered off-screen once, + * saved in a hardware texture, and then composited onto the screen with an alpha each frame without having to switch rendering targets on the GPU. + */ + needsOffscreenAlphaCompositing?: boolean | undefined; + /** * Invoked on mount and layout changes with * diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.js b/packages/react-native/Libraries/Components/View/ViewPropTypes.js index 1ead9ba053a51a..692410cd89d176 100644 --- a/packages/react-native/Libraries/Components/View/ViewPropTypes.js +++ b/packages/react-native/Libraries/Components/View/ViewPropTypes.js @@ -266,28 +266,21 @@ type AndroidDrawableRipple = $ReadOnly<{| 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. + * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, + * the text is read aloud. The value should should match the nativeID of the related element. * * @platform android - * - * See https://reactnative.dev/docs/view#rendertohardwaretextureandroid */ - renderToHardwareTextureAndroid?: ?boolean, + accessibilityLabelledBy?: ?string | ?Array, /** - * Whether this `View` needs to rendered offscreen and composited with an - * alpha in order to preserve 100% correct colors and blending behavior. + * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, + * the text is read aloud. The value should should match the nativeID of the related element. * * @platform android - * - * See https://reactnative.dev/docs/view#needsoffscreenalphacompositing */ - needsOffscreenAlphaCompositing?: ?boolean, + 'aria-labelledby'?: ?string, /** * Indicates to accessibility services whether the user should be notified @@ -309,6 +302,19 @@ type AndroidViewProps = $ReadOnly<{| */ 'aria-live'?: ?('polite' | 'assertive' | 'off'), + 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#rendertohardwaretextureandroid + */ + renderToHardwareTextureAndroid?: ?boolean, + /** * Controls how view is important for accessibility which is if it * fires accessibility events and if it is reported to accessibility services @@ -428,6 +434,15 @@ type IOSViewProps = $ReadOnly<{| */ accessibilityElementsHidden?: ?boolean, + /** + * Indicates to the accessibility services that the UI component is in + * a specific language. The provided string should be formatted following + * the BCP 47 specification (https://www.rfc-editor.org/info/bcp47). + * + * @platform ios + */ + accessibilityLanguage?: ?Stringish, + /** * Whether this `View` should be rendered as a bitmap before compositing. * @@ -484,15 +499,6 @@ export type ViewProps = $ReadOnly<{| */ 'aria-label'?: ?Stringish, - /** - * Indicates to the accessibility services that the UI component is in - * a specific language. The provided string should be formatted following - * the BCP 47 specification (https://www.rfc-editor.org/info/bcp47). - * - * @platform ios - */ - accessibilityLanguage?: ?Stringish, - /** * Indicates to accessibility services to treat UI component like a specific role. */ @@ -524,13 +530,6 @@ export type ViewProps = $ReadOnly<{| */ accessibilityActions?: ?$ReadOnlyArray, - /** - * Specifies the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud. - * - * @platform android - */ - accessibilityLabelledBy?: ?string | ?Array, - /** * alias for accessibilityState * @@ -548,13 +547,6 @@ export type ViewProps = $ReadOnly<{| */ 'aria-hidden'?: ?boolean, - /** - * It represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud. - * - * @platform android - */ - 'aria-labelledby'?: ?string, - /** * 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 @@ -604,6 +596,14 @@ export type ViewProps = $ReadOnly<{| */ nativeID?: ?string, + /** + * Whether this `View` needs to rendered offscreen and composited with an + * alpha in order to preserve 100% correct colors and blending behavior. + * + * See https://reactnative.dev/docs/view#needsoffscreenalphacompositing + */ + needsOffscreenAlphaCompositing?: ?boolean, + /** * This defines how far a touch event can start away from the view. * Typical interface guidelines recommend touch targets that are at least