@depup/react-native 0.86.0-depup.49 → 0.87.0-depup.0

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
@@ -21,6 +22,8 @@ import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
+export type TouchableOpacityInstance = HostInstance;
+
 export type TouchableOpacityTVProps = Readonly<{
   /**
    * *(Apple TV only)* TV preferred focus (see documentation for the View component).
@@ -68,13 +71,15 @@ export type TouchableOpacityTVProps = Readonly<{
 
 type TouchableOpacityBaseProps = Readonly<{
   /**
-   * Determines what the opacity of the wrapped view should be when touch is active.
-   * Defaults to 0.2
+   * Opacity of the wrapped view when touch is active.
+   *
+   * @default `0.2`
    */
   activeOpacity?: ?number,
+
   style?: ?Animated.WithAnimatedValue<ViewStyleProp>,
 
-  hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  hostRef?: ?React.RefSetter<TouchableOpacityInstance>,
 }>;
 
 export type TouchableOpacityProps = Readonly<{
@@ -89,88 +94,13 @@ type TouchableOpacityState = Readonly<{
 }>;
 
 /**
- * A wrapper for making views respond properly to touches.
- * On press down, the opacity of the wrapped view is decreased, dimming it.
- *
- * Opacity is controlled by wrapping the children in an Animated.View, which is
- * added to the view hierarchy.  Be aware that this can affect layout.
- *
- * Example:
- *
- * ```
- * renderButton: function() {
- *   return (
- *     <TouchableOpacity onPress={this._onPressButton}>
- *       <Image
- *         style={styles.button}
- *         source={require('./myButton.png')}
- *       />
- *     </TouchableOpacity>
- *   );
- * },
- * ```
- * ### Example
- *
- * ```ReactNativeWebPlayer
- * import React, { Component } from 'react'
- * import {
- *   AppRegistry,
- *   StyleSheet,
- *   TouchableOpacity,
- *   Text,
- *   View,
- * } from 'react-native'
- *
- * class App extends Component {
- *   state = { count: 0 }
- *
- *   onPress = () => {
- *     this.setState(state => ({
- *       count: state.count + 1
- *     }));
- *   };
- *
- *  render() {
- *    return (
- *      <View style={styles.container}>
- *        <TouchableOpacity
- *          style={styles.button}
- *          onPress={this.onPress}>
- *          <Text> Touch Here </Text>
- *        </TouchableOpacity>
- *        <View style={[styles.countContainer]}>
- *          <Text style={[styles.countText]}>
- *             { this.state.count !== 0 ? this.state.count: null}
- *           </Text>
- *         </View>
- *       </View>
- *     )
- *   }
- * }
+ * A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
  *
- * const styles = StyleSheet.create({
- *   container: {
- *     flex: 1,
- *     justifyContent: 'center',
- *     paddingHorizontal: 10
- *   },
- *   button: {
- *     alignItems: 'center',
- *     backgroundColor: '#DDDDDD',
- *     padding: 10
- *   },
- *   countContainer: {
- *     alignItems: 'center',
- *     padding: 10
- *   },
- *   countText: {
- *     color: '#FF00FF'
- *   }
- * })
+ * Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
  *
- * AppRegistry.registerComponent('App', () => App)
- * ```
+ * If you need more extensive and future-proof touch handling, use `Pressable`.
  *
+ * @see https://reactnative.dev/docs/touchableopacity
  */
 class TouchableOpacity extends React.Component<
   TouchableOpacityProps,
@@ -378,13 +308,13 @@ class TouchableOpacity extends React.Component<
 }
 
 const Touchable: component(
-  ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  ref?: React.RefSetter<TouchableOpacityInstance>,
   ...props: TouchableOpacityProps
 ) = ({
   ref,
   ...props
 }: {
-  ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  ref?: React.RefSetter<TouchableOpacityInstance>,
   ...TouchableOpacityProps,
 }) => <TouchableOpacity {...props} hostRef={ref} />;
 

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -36,6 +36,7 @@ export type TouchableWithoutFeedbackPropsAndroid = {
   touchSoundDisabled?: ?boolean,
 };
 
+/** @build-types emit-as-interface Expo compatibility */
 export type TouchableWithoutFeedbackProps = Readonly<
   {
     children?: ?React.Node,
@@ -155,9 +156,9 @@ const PASSTHROUGH_PROPS = [
 ] as const;
 
 /**
- * Do not use unless you have a very good reason.
- * All the elements that respond to press should have a visual feedback when touched.
- * This is one of the primary reason a "web" app doesn't feel "native".
+ * Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
+ *
+ * Supports only one child. If you need more extensive and future-proof touch handling, use `Pressable`.
  *
  * @see https://reactnative.dev/docs/touchablewithoutfeedback
  */

package/Libraries/Components/UnimplementedViews/UnimplementedNativeViewNativeComponent.js

@@ -8,5 +8,5 @@
  * @format
  */
 
-export * from '../../../src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent';
-export {default} from '../../../src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent';
+export * from '../../../src/private/components/unimplementedview/specs/UnimplementedNativeViewNativeComponent';
+export {default} from '../../../src/private/components/unimplementedview/specs/UnimplementedNativeViewNativeComponent';

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -194,6 +194,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * BackgroundImage
    */
+  backgroundImage: backgroundImageAttribute,
   experimental_backgroundImage: backgroundImageAttribute,
 
   /**

package/Libraries/Components/View/View.js

@@ -8,114 +8,111 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewProps} from './ViewPropTypes';
 
-import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import TextAncestorContext from '../../Text/TextAncestorContext';
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
 import {use} from 'react';
 
+export type ViewInstance = HostInstance;
+
 /**
- * The most fundamental component for building a UI, View is a container that
+ * The most fundamental component for building a UI. `View` is a container that
  * supports layout with flexbox, style, some touch handling, and accessibility
- * controls.
+ * controls. `View` maps directly to the native view equivalent on whatever
+ * platform React Native is running on, whether that is a `UIView`, `<div>`,
+ * `android.view`, etc. `View` is designed to be nested inside other views and
+ * can have 0 to many children of any type.
  *
  * @see https://reactnative.dev/docs/view
  */
-component View(
-  ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
-  ...props: ViewProps
-) {
+component View(ref?: React.RefSetter<ViewInstance>, ...props: ViewProps) {
   const hasTextAncestor = use(TextAncestorContext);
 
-  let resolvedProps = props;
-  if (!ReactNativeFeatureFlags.enableNativeViewPropTransformations()) {
-    const {
-      accessibilityState,
-      accessibilityValue,
-      'aria-busy': ariaBusy,
-      'aria-checked': ariaChecked,
-      'aria-disabled': ariaDisabled,
-      'aria-expanded': ariaExpanded,
-      'aria-hidden': ariaHidden,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      'aria-live': ariaLive,
-      'aria-selected': ariaSelected,
-      'aria-valuemax': ariaValueMax,
-      'aria-valuemin': ariaValueMin,
-      'aria-valuenow': ariaValueNow,
-      'aria-valuetext': ariaValueText,
-      id,
-      tabIndex,
-      ...otherProps
-    } = props;
-
-    const processedProps = otherProps as {...ViewProps};
-
-    const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g);
-    if (parsedAriaLabelledBy !== undefined) {
-      processedProps.accessibilityLabelledBy = parsedAriaLabelledBy;
-    }
-
-    if (ariaLabel !== undefined) {
-      processedProps.accessibilityLabel = ariaLabel;
-    }
+  const {
+    accessibilityState,
+    accessibilityValue,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-hidden': ariaHidden,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-live': ariaLive,
+    'aria-selected': ariaSelected,
+    'aria-valuemax': ariaValueMax,
+    'aria-valuemin': ariaValueMin,
+    'aria-valuenow': ariaValueNow,
+    'aria-valuetext': ariaValueText,
+    id,
+    tabIndex,
+    ...otherProps
+  } = props;
+
+  const resolvedProps = otherProps as {...ViewProps};
+
+  const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g);
+  if (parsedAriaLabelledBy !== undefined) {
+    resolvedProps.accessibilityLabelledBy = parsedAriaLabelledBy;
+  }
 
-    if (ariaLive !== undefined) {
-      processedProps.accessibilityLiveRegion =
-        ariaLive === 'off' ? 'none' : ariaLive;
-    }
+  if (ariaLabel !== undefined) {
+    resolvedProps.accessibilityLabel = ariaLabel;
+  }
 
-    if (ariaHidden !== undefined) {
-      processedProps.accessibilityElementsHidden = ariaHidden;
-      if (ariaHidden === true) {
-        processedProps.importantForAccessibility = 'no-hide-descendants';
-      }
-    }
+  if (ariaLive !== undefined) {
+    resolvedProps.accessibilityLiveRegion =
+      ariaLive === 'off' ? 'none' : ariaLive;
+  }
 
-    if (id !== undefined) {
-      processedProps.nativeID = id;
+  if (ariaHidden !== undefined) {
+    resolvedProps.accessibilityElementsHidden = ariaHidden;
+    if (ariaHidden === true) {
+      resolvedProps.importantForAccessibility = 'no-hide-descendants';
     }
+  }
 
-    if (tabIndex !== undefined) {
-      processedProps.focusable = !tabIndex;
-    }
+  if (id !== undefined) {
+    resolvedProps.nativeID = id;
+  }
 
-    if (
-      accessibilityState != null ||
-      ariaBusy != null ||
-      ariaChecked != null ||
-      ariaDisabled != null ||
-      ariaExpanded != null ||
-      ariaSelected != null
-    ) {
-      processedProps.accessibilityState = {
-        busy: ariaBusy ?? accessibilityState?.busy,
-        checked: ariaChecked ?? accessibilityState?.checked,
-        disabled: ariaDisabled ?? accessibilityState?.disabled,
-        expanded: ariaExpanded ?? accessibilityState?.expanded,
-        selected: ariaSelected ?? accessibilityState?.selected,
-      };
-    }
+  if (tabIndex !== undefined) {
+    resolvedProps.focusable = !tabIndex;
+  }
 
-    if (
-      accessibilityValue != null ||
-      ariaValueMax != null ||
-      ariaValueMin != null ||
-      ariaValueNow != null ||
-      ariaValueText != null
-    ) {
-      processedProps.accessibilityValue = {
-        max: ariaValueMax ?? accessibilityValue?.max,
-        min: ariaValueMin ?? accessibilityValue?.min,
-        now: ariaValueNow ?? accessibilityValue?.now,
-        text: ariaValueText ?? accessibilityValue?.text,
-      };
-    }
+  if (
+    accessibilityState != null ||
+    ariaBusy != null ||
+    ariaChecked != null ||
+    ariaDisabled != null ||
+    ariaExpanded != null ||
+    ariaSelected != null
+  ) {
+    resolvedProps.accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+  }
 
-    resolvedProps = processedProps;
+  if (
+    accessibilityValue != null ||
+    ariaValueMax != null ||
+    ariaValueMin != null ||
+    ariaValueNow != null ||
+    ariaValueText != null
+  ) {
+    resolvedProps.accessibilityValue = {
+      max: ariaValueMax ?? accessibilityValue?.max,
+      min: ariaValueMin ?? accessibilityValue?.min,
+      now: ariaValueNow ?? accessibilityValue?.now,
+      text: ariaValueText ?? accessibilityValue?.text,
+    };
   }
 
   const actualView =

package/Libraries/Components/View/ViewAccessibility.d.ts

@@ -188,6 +188,7 @@ export interface AccessibilityValue {
 export type AccessibilityRole =
   | 'none'
   | 'button'
+  | 'dropdownlist'
   | 'togglebutton'
   | 'link'
   | 'search'
@@ -215,7 +216,16 @@ export type AccessibilityRole =
   | 'tablist'
   | 'timer'
   | 'list'
-  | 'toolbar';
+  | 'toolbar'
+  | 'grid'
+  | 'pager'
+  | 'scrollview'
+  | 'horizontalscrollview'
+  | 'viewgroup'
+  | 'webview'
+  | 'drawerlayout'
+  | 'slidingdrawer'
+  | 'iconmenu';
 
 export interface AccessibilityPropsAndroid {
   /**

package/Libraries/Components/View/ViewAccessibility.js

@@ -145,12 +145,12 @@ export type AccessibilityActionName =
   /**
    * Generated when a VoiceOver user places focus on or inside the component and double taps with two fingers.
    * @platform ios
-   * */
+   */
   | 'magicTap'
   /**
    * Generated when a VoiceOver user places focus on or inside the component and performs a two finger scrub gesture (left, right, left).
    * @platform ios
-   * */
+   */
   | 'escape';
 
 // the info associated with an accessibility action
@@ -249,9 +249,15 @@ export type AccessibilityPropsAndroid = Readonly<{
   'aria-live'?: ?('polite' | 'assertive' | 'off'),
 
   /**
-   * 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.
+   * 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. See http://developer.android.com/reference/android/R.attr.html#importantForAccessibility for references.
+   *
+   * Possible values:
+   *      'auto' - The system determines whether the view is important for accessibility - default (recommended).
+   *      '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
    *
@@ -288,6 +294,9 @@ export type AccessibilityPropsIOS = Readonly<{
   accessibilityViewIsModal?: ?boolean,
 
   /**
+   * A Boolean value that indicates whether or not to show the item in the large content viewer.
+   * Available on iOS 13.0+
+   *
    * @platform ios
    *
    * See https://reactnative.dev/docs/view#accessibilityshowslargecontentviewer
@@ -295,6 +304,8 @@ export type AccessibilityPropsIOS = Readonly<{
   accessibilityShowsLargeContentViewer?: ?boolean,
 
   /**
+   * When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer.
+   *
    * @platform ios
    *
    * See https://reactnative.dev/docs/view#accessibilitylargecontenttitle

package/Libraries/Components/View/ViewNativeComponent.js

@@ -21,10 +21,10 @@ const ViewNativeComponent: HostComponent<Props> =
   }));
 
 interface NativeCommands {
-  +focus: (viewRef: HostInstance) => void;
-  +blur: (viewRef: HostInstance) => void;
-  +hotspotUpdate: (viewRef: HostInstance, x: number, y: number) => void;
-  +setPressed: (viewRef: HostInstance, pressed: boolean) => void;
+  readonly focus: (viewRef: HostInstance) => void;
+  readonly blur: (viewRef: HostInstance) => void;
+  readonly hotspotUpdate: (viewRef: HostInstance, x: number, y: number) => void;
+  readonly setPressed: (viewRef: HostInstance, pressed: boolean) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
@@ -42,5 +42,3 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
 // Additional note: Our long term plan is to reduce the overhead of the <Text>
 // and <View> wrappers so that we no longer have any reason to export these APIs.
 export default ViewNativeComponent;
-
-export type ViewNativeComponentType = HostComponent<Props>;

package/Libraries/Components/View/ViewPropTypes.js

@@ -112,8 +112,18 @@ type PointerEventProps = Readonly<{
 }>;
 
 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,
   onBlurCapture?: ?(event: BlurEvent) => void,
+  /**
+   * Callback that is called when the view is focused.
+   *
+   * Note: This will only be called if the view is focusable.
+   */
   onFocus?: ?(event: FocusEvent) => void,
   onFocusCapture?: ?(event: FocusEvent) => void,
 }>;
@@ -281,9 +291,17 @@ export type ViewPropsAndroid = Readonly<{
    * Whether this `View` should render itself (and all of its children) into a
    * single hardware texture on the GPU.
    *
-   * @platform android
+   * 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`
    *
-   * See https://reactnative.dev/docs/view#rendertohardwaretextureandroid
+   * @platform android
    */
   renderToHardwareTextureAndroid?: ?boolean,
 
@@ -296,35 +314,40 @@ export type ViewPropsAndroid = Readonly<{
   hasTVPreferredFocus?: ?boolean,
 
   /**
-   * TV next focus down (see documentation for the View component).
+   * 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,
 
   /**
-   * TV next focus forward (see documentation for the View component).
+   * 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,
 
   /**
-   * TV next focus left (see documentation for the View component).
+   * 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,
 
   /**
-   * TV next focus right (see documentation for the View component).
+   * 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,
 
   /**
-   * TV next focus up (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates up.
+   * The value is the `nativeID` of the target view.
    *
    * @platform android
    */
@@ -371,6 +394,7 @@ export type TVViewPropsIOS = Readonly<{
    * *(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,
 
@@ -407,9 +431,18 @@ export type ViewPropsIOS = Readonly<{
   /**
    * Whether this `View` should be rendered as a bitmap before compositing.
    *
-   * @platform ios
+   * 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.
    *
-   * See https://reactnative.dev/docs/view#shouldrasterizeios
+   * @default `false`
+   *
+   * @platform ios
    */
   shouldRasterizeIOS?: ?boolean,
 }>;
@@ -424,7 +457,7 @@ type ViewBaseProps = Readonly<{
    * optimization. Set this property to `false` to disable this optimization and
    * ensure that this `View` exists in the native view hierarchy.
    *
-   * See https://reactnative.dev/docs/view#collapsable
+   * @default `true`
    */
   collapsable?: ?boolean,
 
@@ -432,6 +465,8 @@ type ViewBaseProps = Readonly<{
    * 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,
 
@@ -463,10 +498,21 @@ type ViewBaseProps = Readonly<{
   nativeID?: ?string,
 
   /**
-   * Whether this `View` needs to rendered offscreen and composited with an
+   * 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.
    *
-   * See https://reactnative.dev/docs/view#needsoffscreenalphacompositing
+   * @default `false`
    */
   needsOffscreenAlphaCompositing?: ?boolean,
 
@@ -486,7 +532,12 @@ type ViewBaseProps = Readonly<{
   /**
    * Controls whether the `View` can be the target of touch events.
    *
-   * See https://reactnative.dev/docs/view#pointerevents
+   * - `'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'),
 
@@ -510,6 +561,7 @@ type ViewBaseProps = Readonly<{
   experimental_accessibilityOrder?: ?Array<string>,
 }>;
 
+/** @build-types emit-as-interface Nativewind, Expo compatibility */
 export type ViewProps = Readonly<{
   ...DirectEventProps,
   ...GestureResponderHandlers,