react-native 0.70.4 → 0.71.0-rc.0

package/Libraries/Components/Touchable/Touchable.d.ts

@@ -0,0 +1,90 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+import {Insets} from '../../../types/public/Insets';
+import {GestureResponderEvent} from '../../Types/CoreEventTypes';
+
+/**
+ * //FIXME: need to find documentation on which component is a TTouchable and can implement that interface
+ * @see React.DOMAtributes
+ */
+export interface Touchable {
+  onTouchStart?: ((event: GestureResponderEvent) => void) | undefined;
+  onTouchMove?: ((event: GestureResponderEvent) => void) | undefined;
+  onTouchEnd?: ((event: GestureResponderEvent) => void) | undefined;
+  onTouchCancel?: ((event: GestureResponderEvent) => void) | undefined;
+  onTouchEndCapture?: ((event: GestureResponderEvent) => void) | undefined;
+}
+
+export const Touchable: {
+  TOUCH_TARGET_DEBUG: boolean;
+  renderDebugView: (config: {
+    color: string | number;
+    hitSlop?: Insets | undefined;
+  }) => React.ReactElement | null;
+};
+
+/**
+ * @see https://github.com/facebook/react-native/blob/0.34-stable\Libraries\Components\Touchable\Touchable.js
+ */
+interface TouchableMixin {
+  /**
+   * Invoked when the item should be highlighted. Mixers should implement this
+   * to visually distinguish the `VisualRect` so that the user knows that
+   * releasing a touch will result in a "selection" (analog to click).
+   */
+  touchableHandleActivePressIn(e: GestureResponderEvent): void;
+
+  /**
+   * Invoked when the item is "active" (in that it is still eligible to become
+   * a "select") but the touch has left the `PressRect`. Usually the mixer will
+   * want to unhighlight the `VisualRect`. If the user (while pressing) moves
+   * back into the `PressRect` `touchableHandleActivePressIn` will be invoked
+   * again and the mixer should probably highlight the `VisualRect` again. This
+   * event will not fire on an `touchEnd/mouseUp` event, only move events while
+   * the user is depressing the mouse/touch.
+   */
+  touchableHandleActivePressOut(e: GestureResponderEvent): void;
+
+  /**
+   * Invoked when the item is "selected" - meaning the interaction ended by
+   * letting up while the item was either in the state
+   * `RESPONDER_ACTIVE_PRESS_IN` or `RESPONDER_INACTIVE_PRESS_IN`.
+   */
+  touchableHandlePress(e: GestureResponderEvent): void;
+
+  /**
+   * Invoked when the item is long pressed - meaning the interaction ended by
+   * letting up while the item was in `RESPONDER_ACTIVE_LONG_PRESS_IN`. If
+   * `touchableHandleLongPress` is *not* provided, `touchableHandlePress` will
+   * be called as it normally is. If `touchableHandleLongPress` is provided, by
+   * default any `touchableHandlePress` callback will not be invoked. To
+   * override this default behavior, override `touchableLongPressCancelsPress`
+   * to return false. As a result, `touchableHandlePress` will be called when
+   * lifting up, even if `touchableHandleLongPress` has also been called.
+   */
+  touchableHandleLongPress(e: GestureResponderEvent): void;
+
+  /**
+   * Returns the amount to extend the `HitRect` into the `PressRect`. Positive
+   * numbers mean the size expands outwards.
+   */
+  touchableGetPressRectOffset(): Insets;
+
+  /**
+   * Returns the number of millis to wait before triggering a highlight.
+   */
+  touchableGetHighlightDelayMS(): number;
+
+  // These methods are undocumented but still being used by TouchableMixin internals
+  touchableGetLongPressDelayMS(): number;
+  touchableGetPressOutDelayMS(): number;
+  touchableGetHitSlop(): Insets;
+}

package/Libraries/Components/Touchable/Touchable.flow.js

@@ -0,0 +1,258 @@
+/**
+ * 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.
+ *
+ * @flow
+ * @format
+ */
+
+import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {PressEvent} from '../../Types/CoreEventTypes';
+
+import * as React from 'react';
+
+/**
+ * `Touchable`: Taps done right.
+ *
+ * You hook your `ResponderEventPlugin` events into `Touchable`. `Touchable`
+ * will measure time/geometry and tells you when to give feedback to the user.
+ *
+ * ====================== Touchable Tutorial ===============================
+ * The `Touchable` mixin helps you handle the "press" interaction. It analyzes
+ * the geometry of elements, and observes when another responder (scroll view
+ * etc) has stolen the touch lock. It notifies your component when it should
+ * give feedback to the user. (bouncing/highlighting/unhighlighting).
+ *
+ * - When a touch was activated (typically you highlight)
+ * - When a touch was deactivated (typically you unhighlight)
+ * - When a touch was "pressed" - a touch ended while still within the geometry
+ *   of the element, and no other element (like scroller) has "stolen" touch
+ *   lock ("responder") (Typically you bounce the element).
+ *
+ * A good tap interaction isn't as simple as you might think. There should be a
+ * slight delay before showing a highlight when starting a touch. If a
+ * subsequent touch move exceeds the boundary of the element, it should
+ * unhighlight, but if that same touch is brought back within the boundary, it
+ * should rehighlight again. A touch can move in and out of that boundary
+ * several times, each time toggling highlighting, but a "press" is only
+ * triggered if that touch ends while within the element's boundary and no
+ * scroller (or anything else) has stolen the lock on touches.
+ *
+ * To create a new type of component that handles interaction using the
+ * `Touchable` mixin, do the following:
+ *
+ * - Initialize the `Touchable` state.
+ *
+ *   getInitialState: function() {
+ *     return merge(this.touchableGetInitialState(), yourComponentState);
+ *   }
+ *
+ * - Choose the rendered component who's touches should start the interactive
+ *   sequence. On that rendered node, forward all `Touchable` responder
+ *   handlers. You can choose any rendered node you like. Choose a node whose
+ *   hit target you'd like to instigate the interaction sequence:
+ *
+ *   // In render function:
+ *   return (
+ *     <View
+ *       onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
+ *       onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
+ *       onResponderGrant={this.touchableHandleResponderGrant}
+ *       onResponderMove={this.touchableHandleResponderMove}
+ *       onResponderRelease={this.touchableHandleResponderRelease}
+ *       onResponderTerminate={this.touchableHandleResponderTerminate}>
+ *       <View>
+ *         Even though the hit detection/interactions are triggered by the
+ *         wrapping (typically larger) node, we usually end up implementing
+ *         custom logic that highlights this inner one.
+ *       </View>
+ *     </View>
+ *   );
+ *
+ * - You may set up your own handlers for each of these events, so long as you
+ *   also invoke the `touchable*` handlers inside of your custom handler.
+ *
+ * - Implement the handlers on your component class in order to provide
+ *   feedback to the user. See documentation for each of these class methods
+ *   that you should implement.
+ *
+ *   touchableHandlePress: function() {
+ *      this.performBounceAnimation();  // or whatever you want to do.
+ *   },
+ *   touchableHandleActivePressIn: function() {
+ *     this.beginHighlighting(...);  // Whatever you like to convey activation
+ *   },
+ *   touchableHandleActivePressOut: function() {
+ *     this.endHighlighting(...);  // Whatever you like to convey deactivation
+ *   },
+ *
+ * - There are more advanced methods you can implement (see documentation below):
+ *   touchableGetHighlightDelayMS: function() {
+ *     return 20;
+ *   }
+ *   // In practice, *always* use a predeclared constant (conserve memory).
+ *   touchableGetPressRectOffset: function() {
+ *     return {top: 20, left: 20, right: 20, bottom: 100};
+ *   }
+ */
+
+// Default amount "active" region protrudes beyond box
+
+/**
+ * By convention, methods prefixed with underscores are meant to be @private,
+ * and not @protected. Mixers shouldn't access them - not even to provide them
+ * as callback handlers.
+ *
+ *
+ * ========== Geometry =========
+ * `Touchable` only assumes that there exists a `HitRect` node. The `PressRect`
+ * is an abstract box that is extended beyond the `HitRect`.
+ *
+ *  +--------------------------+
+ *  |                          | - "Start" events in `HitRect` cause `HitRect`
+ *  |  +--------------------+  |   to become the responder.
+ *  |  |  +--------------+  |  | - `HitRect` is typically expanded around
+ *  |  |  |              |  |  |   the `VisualRect`, but shifted downward.
+ *  |  |  |  VisualRect  |  |  | - After pressing down, after some delay,
+ *  |  |  |              |  |  |   and before letting up, the Visual React
+ *  |  |  +--------------+  |  |   will become "active". This makes it eligible
+ *  |  |     HitRect        |  |   for being highlighted (so long as the
+ *  |  +--------------------+  |   press remains in the `PressRect`).
+ *  |        PressRect     o   |
+ *  +----------------------|---+
+ *           Out Region    |
+ *                         +-----+ This gap between the `HitRect` and
+ *                                 `PressRect` allows a touch to move far away
+ *                                 from the original hit rect, and remain
+ *                                 highlighted, and eligible for a "Press".
+ *                                 Customize this via
+ *                                 `touchableGetPressRectOffset()`.
+ *
+ *
+ *
+ * ======= State Machine =======
+ *
+ * +-------------+ <---+ RESPONDER_RELEASE
+ * |NOT_RESPONDER|
+ * +-------------+ <---+ RESPONDER_TERMINATED
+ *     +
+ *     | RESPONDER_GRANT (HitRect)
+ *     v
+ * +---------------------------+  DELAY   +-------------------------+  T + DELAY     +------------------------------+
+ * |RESPONDER_INACTIVE_PRESS_IN|+-------->|RESPONDER_ACTIVE_PRESS_IN| +------------> |RESPONDER_ACTIVE_LONG_PRESS_IN|
+ * +---------------------------+          +-------------------------+                +------------------------------+
+ *     +            ^                         +           ^                                 +           ^
+ *     |LEAVE_      |ENTER_                   |LEAVE_     |ENTER_                           |LEAVE_     |ENTER_
+ *     |PRESS_RECT  |PRESS_RECT               |PRESS_RECT |PRESS_RECT                       |PRESS_RECT |PRESS_RECT
+ *     |            |                         |           |                                 |           |
+ *     v            +                         v           +                                 v           +
+ * +----------------------------+  DELAY  +--------------------------+               +-------------------------------+
+ * |RESPONDER_INACTIVE_PRESS_OUT|+------->|RESPONDER_ACTIVE_PRESS_OUT|               |RESPONDER_ACTIVE_LONG_PRESS_OUT|
+ * +----------------------------+         +--------------------------+               +-------------------------------+
+ *
+ * T + DELAY => LONG_PRESS_DELAY_MS + DELAY
+ *
+ * Not drawn are the side effects of each transition. The most important side
+ * effect is the `touchableHandlePress` abstract method invocation that occurs
+ * when a responder is released while in either of the "Press" states.
+ *
+ * The other important side effects are the highlight abstract method
+ * invocations (internal callbacks) to be implemented by the mixer.
+ *
+ *
+ * @lends Touchable.prototype
+ */
+interface TouchableMixinType {
+  /**
+   * Invoked when the item receives focus. Mixers might override this to
+   * visually distinguish the `VisualRect` so that the user knows that it
+   * currently has the focus. Most platforms only support a single element being
+   * focused at a time, in which case there may have been a previously focused
+   * element that was blurred just prior to this. This can be overridden when
+   * using `Touchable.Mixin.withoutDefaultFocusAndBlur`.
+   */
+  touchableHandleFocus: (e: Event) => void;
+
+  /**
+   * Invoked when the item loses focus. Mixers might override this to
+   * visually distinguish the `VisualRect` so that the user knows that it
+   * no longer has focus. Most platforms only support a single element being
+   * focused at a time, in which case the focus may have moved to another.
+   * This can be overridden when using
+   * `Touchable.Mixin.withoutDefaultFocusAndBlur`.
+   */
+  touchableHandleBlur: (e: Event) => void;
+
+  componentDidMount: () => void;
+
+  /**
+   * Clear all timeouts on unmount
+   */
+  componentWillUnmount: () => void;
+
+  /**
+   * It's prefer that mixins determine state in this way, having the class
+   * explicitly mix the state in the one and only `getInitialState` method.
+   *
+   * @return {object} State object to be placed inside of
+   * `this.state.touchable`.
+   */
+  touchableGetInitialState: () => $TEMPORARY$object<{|
+    touchable: $TEMPORARY$object<{|responderID: null, touchState: void|}>,
+  |}>;
+
+  // ==== Hooks to Gesture Responder system ====
+  /**
+   * Must return true if embedded in a native platform scroll view.
+   */
+  touchableHandleResponderTerminationRequest: () => any;
+
+  /**
+   * Must return true to start the process of `Touchable`.
+   */
+  touchableHandleStartShouldSetResponder: () => any;
+
+  /**
+   * Return true to cancel press on long press.
+   */
+  touchableLongPressCancelsPress: () => boolean;
+
+  /**
+   * Place as callback for a DOM element's `onResponderGrant` event.
+   * @param {SyntheticEvent} e Synthetic event from event system.
+   *
+   */
+  touchableHandleResponderGrant: (e: PressEvent) => void;
+
+  /**
+   * Place as callback for a DOM element's `onResponderRelease` event.
+   */
+  touchableHandleResponderRelease: (e: PressEvent) => void;
+
+  /**
+   * Place as callback for a DOM element's `onResponderTerminate` event.
+   */
+  touchableHandleResponderTerminate: (e: PressEvent) => void;
+
+  /**
+   * Place as callback for a DOM element's `onResponderMove` event.
+   */
+  touchableHandleResponderMove: (e: PressEvent) => void;
+
+  withoutDefaultFocusAndBlur: {...};
+}
+
+export type TouchableType = {
+  Mixin: TouchableMixinType,
+  /**
+   * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
+   */
+  renderDebugView: ({
+    color: ColorValue,
+    hitSlop: EdgeInsetsProp,
+    ...
+  }) => null | React.Node,
+};

package/Libraries/Components/Touchable/Touchable.js

@@ -8,18 +8,18 @@
  * @format
  */
 
-import * as React from 'react';
-import BoundingDimensions from './BoundingDimensions';
-import Platform from '../../Utilities/Platform';
-import Position from './Position';
-import UIManager from '../../ReactNative/UIManager';
-import SoundManager from '../Sound/SoundManager';
-
-import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
-
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {TouchableType} from './Touchable.flow';
+
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import UIManager from '../../ReactNative/UIManager';
+import Platform from '../../Utilities/Platform';
+import SoundManager from '../Sound/SoundManager';
+import BoundingDimensions from './BoundingDimensions';
+import Position from './Position';
+import * as React from 'react';
 
 const extractSingleTouch = (nativeEvent: {
   +changedTouches: $ReadOnlyArray<PressEvent['nativeEvent']>,
@@ -927,7 +927,7 @@ const TouchableMixin = {
     }
   },
 
-  withoutDefaultFocusAndBlur: ({}: $TEMPORARY$object<{||}>),
+  withoutDefaultFocusAndBlur: ({}: {...}),
 };
 
 /**
@@ -944,7 +944,7 @@ const {
 TouchableMixin.withoutDefaultFocusAndBlur =
   TouchableMixinWithoutDefaultFocusAndBlur;
 
-const Touchable = {
+const Touchable: TouchableType = {
   Mixin: TouchableMixin,
   /**
    * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -8,13 +8,15 @@
  * @format
  */
 
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+
+import Animated from '../../Animated/Animated';
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
-import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
-import {Animated, Platform} from 'react-native';
+import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
 type Props = $ReadOnly<{|
@@ -130,23 +132,55 @@ class TouchableBounce extends React.Component<Props, State> {
     // adopting `Pressability`, so preserve that behavior.
     const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
       this.state.pressability.getEventHandlers();
+    const accessibilityLiveRegion =
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+    const _accessibilityState = {
+      busy: this.props['aria-busy'] ?? this.props.accessibilityState?.busy,
+      checked:
+        this.props['aria-checked'] ?? this.props.accessibilityState?.checked,
+      disabled:
+        this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled,
+      expanded:
+        this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
+      selected:
+        this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
+    };
 
+    const accessibilityValue = {
+      max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
+      min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
+      now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
+      text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
+    };
+
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     return (
       <Animated.View
         style={[{transform: [{scale: this.state.scale}]}, this.props.style]}
         accessible={this.props.accessible !== false}
-        accessibilityLabel={this.props.accessibilityLabel}
+        accessibilityLabel={accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}
-        accessibilityState={this.props.accessibilityState}
+        accessibilityState={_accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
-        accessibilityValue={this.props.accessibilityValue}
-        importantForAccessibility={this.props.importantForAccessibility}
-        accessibilityLiveRegion={this.props.accessibilityLiveRegion}
-        accessibilityViewIsModal={this.props.accessibilityViewIsModal}
-        accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        accessibilityValue={accessibilityValue}
+        accessibilityLiveRegion={accessibilityLiveRegion}
+        importantForAccessibility={
+          this.props['aria-hidden'] === true
+            ? 'no-hide-descendants'
+            : this.props.importantForAccessibility
+        }
+        accessibilityViewIsModal={
+          this.props['aria-modal'] ?? this.props.accessibilityViewIsModal
+        }
+        accessibilityElementsHidden={
+          this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
+        }
         nativeID={this.props.nativeID}
         testID={this.props.testID}
         hitSlop={this.props.hitSlop}

package/Libraries/Components/Touchable/TouchableHighlight.d.ts

@@ -0,0 +1,68 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+import {Constructor} from '../../../types/private/Utilities';
+import {TimerMixin} from '../../../types/private/TimerMixin';
+import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
+import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
+import {TouchableMixin} from './Touchable';
+import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
+
+/**
+ * @see https://reactnative.dev/docs/touchablehighlight#props
+ */
+export interface TouchableHighlightProps extends TouchableWithoutFeedbackProps {
+  /**
+   * Determines what the opacity of the wrapped view should be when touch is active.
+   */
+  activeOpacity?: number | undefined;
+
+  /**
+   *
+   * Called immediately after the underlay is hidden
+   */
+  onHideUnderlay?: (() => void) | undefined;
+
+  /**
+   * Called immediately after the underlay is shown
+   */
+  onShowUnderlay?: (() => void) | undefined;
+
+  /**
+   * @see https://reactnative.dev/docs/view#style
+   */
+  style?: StyleProp<ViewStyle> | undefined;
+
+  /**
+   * The color of the underlay that will show through when the touch is active.
+   */
+  underlayColor?: ColorValue | undefined;
+}
+
+/**
+ * A wrapper for making views respond properly to touches.
+ * On press down, the opacity of the wrapped view is decreased,
+ * which allows the underlay color to show through, darkening or tinting the view.
+ * The underlay comes from adding a view to the view hierarchy,
+ * which can sometimes cause unwanted visual artifacts if not used correctly,
+ * for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
+ *
+ * NOTE: TouchableHighlight supports only one child
+ * If you wish to have several child components, wrap them in a View.
+ *
+ * @see https://reactnative.dev/docs/touchablehighlight
+ */
+declare class TouchableHighlightComponent extends React.Component<TouchableHighlightProps> {}
+declare const TouchableHighlightBase: Constructor<NativeMethods> &
+  Constructor<TimerMixin> &
+  Constructor<TouchableMixin> &
+  typeof TouchableHighlightComponent;
+export class TouchableHighlight extends TouchableHighlightBase {}

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -8,15 +8,16 @@
  * @format
  */
 
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+
+import View from '../../Components/View/View';
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 import Platform from '../../Utilities/Platform';
-import View from '../../Components/View/View';
 import * as React from 'react';
 
 type AndroidProps = $ReadOnly<{|
@@ -291,21 +292,43 @@ class TouchableHighlight extends React.Component<Props, State> {
           }
         : this.props.accessibilityState;
 
+    const accessibilityValue = {
+      max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
+      min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
+      now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
+      text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
+    };
+
+    const accessibilityLiveRegion =
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     return (
       <View
         accessible={this.props.accessible !== false}
-        accessibilityLabel={this.props.accessibilityLabel}
+        accessibilityLabel={accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}
         accessibilityState={accessibilityState}
-        accessibilityValue={this.props.accessibilityValue}
+        accessibilityValue={accessibilityValue}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
-        importantForAccessibility={this.props.importantForAccessibility}
-        accessibilityLiveRegion={this.props.accessibilityLiveRegion}
-        accessibilityViewIsModal={this.props.accessibilityViewIsModal}
-        accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        importantForAccessibility={
+          this.props['aria-hidden'] === true
+            ? 'no-hide-descendants'
+            : this.props.importantForAccessibility
+        }
+        accessibilityViewIsModal={
+          this.props['aria-modal'] ?? this.props.accessibilityViewIsModal
+        }
+        accessibilityLiveRegion={accessibilityLiveRegion}
+        accessibilityElementsHidden={
+          this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
+        }
         style={StyleSheet.compose(
           this.props.style,
           this.state.extraStyles?.underlay,