react-native-windows 0.81.1 → 0.82.0-preview.1

package/Libraries/Core/ReactNativeVersion.js

@@ -9,14 +9,41 @@
  * @generated by scripts/releases/set-version.js
  */
 
-export const version: $ReadOnly<{
-  major: number,
-  minor: number,
-  patch: number,
-  prerelease: string | null,
-}> = {
-  major: 0,
-  minor: 81,
-  patch: 5,
-  prerelease: null,
+/**
+ * Object containing the current React Native version.
+ *
+ * Specifically, this is the source of truth for the resolved `react-native`
+ * package in the JavaScript bundle. Apps and libraries can use this to
+ * determine compatibility or enable version-specific features.
+ *
+ * @example
+ * ```js
+ * // Get the full version string
+ * const version = ReactNativeVersion.getVersionString();
+ *
+ * // Access individual version components
+ * const major = ReactNativeVersion.major;
+ * ```
+ */
+export default class ReactNativeVersion {
+  static major: number = 0;
+  static minor: number = 82;
+  static patch: number = 0;
+  static prerelease: string | null = 'rc.0';
+
+  static getVersionString(): string {
+    return `${this.major}.${this.minor}.${this.patch}${this.prerelease != null ? `-${this.prerelease}` : ''}`;
+  }
+}
+
+/**
+ * @deprecated Compatibility export — please import `ReactNativeVersion` from
+ *   `react-native`.
+ * See https://github.com/react-native-community/discussions-and-proposals/pull/894.
+ */
+export const version = {
+  major: ReactNativeVersion.major,
+  minor: ReactNativeVersion.minor,
+  patch: ReactNativeVersion.patch,
+  prerelease: ReactNativeVersion.prerelease,
 };

package/Libraries/Core/Timers/JSTimers.js

@@ -473,12 +473,14 @@ let ExportedJSTimers: {
 
 if (!NativeTiming) {
   console.warn("Timing native module is not available, can't set timers.");
-  // $FlowFixMe[prop-missing] : we can assume timers are generally available
+  // $FlowFixMe[incompatible-type] : we can assume timers are generally available
   ExportedJSTimers = ({
     callReactNativeMicrotasks: JSTimers.callReactNativeMicrotasks,
     queueReactNativeMicrotask: JSTimers.queueReactNativeMicrotask,
+    // $FlowFixMe[incompatible-variance]
   }: typeof JSTimers);
 } else {
+  // $FlowFixMe[incompatible-variance]
   ExportedJSTimers = JSTimers;
 }
 

package/Libraries/Core/Timers/immediateShim.js

@@ -40,7 +40,7 @@ export function setImmediate(callback: Function, ...args: any): number {
     clearedImmediates.delete(id);
   }
 
-  // $FlowFixMe[incompatible-call]
+  // $FlowFixMe[incompatible-type]
   global.queueMicrotask(() => {
     if (!clearedImmediates.has(id)) {
       callback.apply(undefined, args);

package/Libraries/Core/Timers/queueMicrotask.js

@@ -30,6 +30,7 @@ export default function queueMicrotask(callback: Function) {
   }
 
   // Try to reuse a lazily allocated resolved promise from closure.
+  // $FlowFixMe[constant-condition]
   (resolvedPromise || (resolvedPromise = Promise.resolve()))
     .then(callback)
     .catch(error =>

package/Libraries/Core/setUpPerformance.js

@@ -8,12 +8,13 @@
  * @format
  */
 
-import Performance from '../../src/private/webapis/performance/Performance';
 import NativePerformance from '../../src/private/webapis/performance/specs/NativePerformance';
 
 // In case if the native implementation of the Performance API is available, use it,
 // otherwise fall back to the legacy/default one, which only defines 'Performance.now()'
 if (NativePerformance) {
+  const Performance =
+    require('../../src/private/webapis/performance/Performance').default;
   // $FlowExpectedError[cannot-write]
   global.performance = new Performance();
 } else {

package/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -98,13 +98,13 @@ class DebuggingOverlayRegistry {
     // `canonical.publicInstance` => Fabric
     // $FlowExpectedError[prop-missing]
     if (instanceHandle.canonical?.publicInstance != null) {
-      // $FlowExpectedError[incompatible-return]
+      // $FlowExpectedError[incompatible-type]
       return instanceHandle.canonical?.publicInstance;
     }
 
     // `canonical` => Legacy Fabric
     if (instanceHandle.canonical != null) {
-      // $FlowFixMe[incompatible-return]
+      // $FlowFixMe[incompatible-type]
       return instanceHandle.canonical;
     }
 
@@ -124,6 +124,8 @@ class DebuggingOverlayRegistry {
     let iterator: ?ReadOnlyElement = instance;
     while (iterator != null) {
       for (const subscriber of this.#registry) {
+        /* $FlowFixMe[invalid-compare] Error discovered during Constant
+         * Condition roll out. See https://fburl.com/workplace/4oq3zi07. */
         if (subscriber.rootViewRef.current === iterator) {
           return subscriber;
         }
@@ -182,7 +184,7 @@ class DebuggingOverlayRegistry {
 
         if (
           isChildPublicInstance(
-            // $FlowFixMe[incompatible-call] There is a lot of stuff to untangle to make types for refs work.
+            // $FlowFixMe[incompatible-type] There is a lot of stuff to untangle to make types for refs work.
             potentialParent.rootViewRef.current,
             // $FlowFixMe[incompatible-call] There is a lot of stuff to untangle to make types for refs work.
             potentialChild.rootViewRef.current,

package/Libraries/Image/AssetSourceResolver.windows.js

@@ -58,8 +58,8 @@ function getBasePath(asset: PackagerAsset, local: boolean) {
     const safePath = basePath.replace(/\.\.\//g, '_');
     // If this asset was created with saveAssetPlugin, then we should shorten the path
     // This conditional allow compat of bundles which might have been created without the saveAssetPlugin
-    // $FlowFixMe: __useShortPath not part of public type
-    if (asset.__useShortPath) {
+    // $FlowFixMe[prop-missing][sketchy-null-mixed]: __useShortPath not part of public type
+    if (asset.__useShortPath === true) {
       return ensureShortPath(safePath);
     }
     return safePath;

package/Libraries/Image/Image.android.js

@@ -12,8 +12,10 @@ import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {ImageProps} from './ImageProps';
+import type {ImageSourceHeaders} from './ImageSourceUtils';
 import type {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
@@ -31,6 +33,7 @@ import NativeImageLoaderAndroid, {
 import resolveAssetSource from './resolveAssetSource';
 import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
 import * as React from 'react';
+import {use} from 'react';
 
 let _requestId = 1;
 function generateRequestId() {
@@ -121,6 +124,12 @@ async function queryCache(
   return NativeImageLoaderAndroid.queryCache(urls);
 }
 
+const EMPTY_IMAGE_SOURCE = {
+  uri: undefined,
+  width: undefined,
+  height: undefined,
+};
+
 /**
  * A React component for displaying different types of images,
  * including network images, static resources, temporary local images, and
@@ -128,137 +137,344 @@ async function queryCache(
  *
  * See https://reactnative.dev/docs/image
  */
-let BaseImage: AbstractImageAndroid = ({
-  ref: forwardedRef,
-  ...props
-}: {
-  ref?: React.RefSetter<HostInstance>,
-  ...ImageProps,
-}) => {
-  let source = getImageSourcesFromImageProps(props) || {
-    uri: undefined,
-    width: undefined,
-    height: undefined,
-  };
-  const defaultSource = resolveAssetSource(props.defaultSource);
-  const loadingIndicatorSource = resolveAssetSource(
-    props.loadingIndicatorSource,
-  );
-
-  if (props.children != null) {
-    throw new Error(
-      'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
-    );
-  }
+let _BaseImage;
+if (ReactNativeFeatureFlags.reduceDefaultPropsInImage()) {
+  let BaseImage: AbstractImageAndroid = ({
+    ref: forwardedRef,
+    alt,
+    accessible,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-hidden': ariaHidden,
+    'aria-label': ariaLabel,
+    'aria-selected': ariaSelected,
+    accessibilityLabel,
+    accessibilityLabelledBy,
+    accessibilityState,
+    defaultSource,
+    loadingIndicatorSource,
+    children,
+    source,
+    src,
+    style,
+    crossOrigin,
+    referrerPolicy,
+    srcSet,
+    onLoadStart,
+    onLoad,
+    onLoadEnd,
+    onError,
+    width,
+    height,
+    resizeMode,
+    ...restProps
+  }: {
+    ref?: React.RefSetter<HostInstance>,
+    ...ImageProps,
+  }) => {
+    let source_ =
+      getImageSourcesFromImageProps({
+        crossOrigin,
+        referrerPolicy,
+        src,
+        srcSet,
+        width,
+        height,
+        source,
+      }) || EMPTY_IMAGE_SOURCE;
+    const defaultSource_ = resolveAssetSource(defaultSource);
+    const loadingIndicatorSource_ = resolveAssetSource(loadingIndicatorSource);
 
-  if (props.defaultSource != null && props.loadingIndicatorSource != null) {
-    throw new Error(
-      'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
-    );
-  }
+    if (children != null) {
+      throw new Error(
+        'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
+      );
+    }
 
-  let style: ImageStyleProp;
-  let sources;
-  if (Array.isArray(source)) {
-    style = [styles.base, props.style];
-    sources = source;
-  } else {
-    const {uri} = source;
-    if (uri === '') {
-      console.warn('source.uri should not be an empty string');
+    if (defaultSource != null && loadingIndicatorSource != null) {
+      throw new Error(
+        'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
+      );
     }
-    const width = source.width ?? props.width;
-    const height = source.height ?? props.height;
-    style = [{width, height}, styles.base, props.style];
-    sources = [source];
-  }
 
-  const {onLoadStart, onLoad, onLoadEnd, onError} = props;
-  const nativeProps = {
-    ...props,
-    style,
-    shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
+    let style_: ImageStyleProp;
+    let sources_;
+    let headers_: ?ImageSourceHeaders;
+    if (Array.isArray(source_)) {
+      style_ = [styles.base, style];
+      sources_ = source_;
+      headers_ = sources_[0].headers;
+    } else {
+      const {uri} = source_;
+      if (uri === '') {
+        console.warn('source.uri should not be an empty string');
+      }
+      const width_ = source_.width ?? width;
+      const height_ = source_.height ?? height;
+      style_ = [{width: width_, height: height_}, styles.base, style];
+      sources_ = [source_];
+    }
+
+    const nativeProps = restProps as {
+      ...React.PropsOf<ImageViewNativeComponent>,
+    };
+
     // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
     // (for historical reasons). So in the latter case we populate both "src" and "source",
     // in order to have a better alignment between platforms in the future.
-    src: sources,
-    source: sources,
-    /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
-     * when making Flow check .android.js files. */
-    headers: (source?.[0]?.headers || source?.headers: ?{[string]: string}),
-    defaultSource: defaultSource ? defaultSource.uri : null,
-    loadingIndicatorSrc: loadingIndicatorSource
-      ? loadingIndicatorSource.uri
-      : null,
-    accessibilityLabel:
-      props['aria-label'] ?? props.accessibilityLabel ?? props.alt,
-    accessibilityLabelledBy:
-      props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy,
-    accessible: props.alt !== undefined ? true : props.accessible,
-    accessibilityState: {
-      busy: props['aria-busy'] ?? props.accessibilityState?.busy,
-      checked: props['aria-checked'] ?? props.accessibilityState?.checked,
-      disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
-      expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
-      selected: props['aria-selected'] ?? props.accessibilityState?.selected,
-    },
+    // TODO: `src` should be eventually removed from the API on Android.
+    nativeProps.src = sources_;
+    nativeProps.source = sources_;
+
+    nativeProps.style = style_;
+
+    if (headers_ != null) {
+      nativeProps.headers = headers_;
+    }
+
+    if (onLoadStart != null) {
+      nativeProps.shouldNotifyLoadEvents = true;
+      nativeProps.onLoadStart = onLoadStart;
+    }
+
+    if (onLoad != null) {
+      nativeProps.shouldNotifyLoadEvents = true;
+      nativeProps.onLoad = onLoad;
+    }
+
+    if (onLoadEnd != null) {
+      nativeProps.shouldNotifyLoadEvents = true;
+      nativeProps.onLoadEnd = onLoadEnd;
+    }
+
+    if (onError != null) {
+      nativeProps.shouldNotifyLoadEvents = true;
+      nativeProps.onError = onError;
+    }
+
+    if (defaultSource_ != null && defaultSource_.uri != null) {
+      nativeProps.defaultSource = defaultSource_.uri;
+    }
+
+    if (
+      loadingIndicatorSource_ != null &&
+      loadingIndicatorSource_.uri != null
+    ) {
+      nativeProps.loadingIndicatorSrc = loadingIndicatorSource_.uri;
+    }
+
+    if (ariaLabel != null) {
+      nativeProps.accessibilityLabel = ariaLabel;
+    } else if (accessibilityLabel != null) {
+      nativeProps.accessibilityLabel = accessibilityLabel;
+    } else if (alt != null) {
+      nativeProps.accessibilityLabel = alt;
+    }
+
+    if (ariaLabelledBy != null) {
+      nativeProps.accessibilityLabelledBy = ariaLabelledBy;
+    } else if (accessibilityLabelledBy != null) {
+      nativeProps.accessibilityLabelledBy = accessibilityLabelledBy;
+    }
+
+    if (alt != null) {
+      nativeProps.accessible = true;
+    } else if (accessible != null) {
+      nativeProps.accessible = accessible;
+    }
+
+    if (
+      accessibilityState != null ||
+      ariaBusy != null ||
+      ariaChecked != null ||
+      ariaDisabled != null ||
+      ariaExpanded != null ||
+      ariaSelected != null
+    ) {
+      nativeProps.accessibilityState = {
+        busy: ariaBusy ?? accessibilityState?.busy,
+        checked: ariaChecked ?? accessibilityState?.checked,
+        disabled: ariaDisabled ?? accessibilityState?.disabled,
+        expanded: ariaExpanded ?? accessibilityState?.expanded,
+        selected: ariaSelected ?? accessibilityState?.selected,
+      };
+    }
+
+    if (ariaHidden === true) {
+      nativeProps.importantForAccessibility = 'no-hide-descendants';
+    }
+
+    const flattenedStyle_ = flattenStyle<ImageStyleProp>(style);
+    const objectFit_ = convertObjectFitToResizeMode(flattenedStyle_?.objectFit);
+    const resizeMode_ =
+      objectFit_ || resizeMode || flattenedStyle_?.resizeMode || 'cover';
+    nativeProps.resizeMode = resizeMode_;
+
+    const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
+
+    const hasTextAncestor = use(TextAncestorContext);
+    const analyticTag = use(ImageAnalyticsTagContext);
+    if (analyticTag !== null) {
+      nativeProps.internal_analyticTag = analyticTag;
+    }
+
+    return hasTextAncestor ? (
+      <TextInlineImageNativeComponent
+        // $FlowFixMe[incompatible-type]
+        style={style_}
+        resizeMode={resizeMode_}
+        headers={headers_}
+        src={sources_}
+        ref={actualRef}
+      />
+    ) : (
+      <ImageViewNativeComponent {...nativeProps} ref={actualRef} />
+    );
   };
 
-  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
-  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
-  const resizeMode =
-    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
-
-  const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
-
-  return (
-    <ImageAnalyticsTagContext.Consumer>
-      {analyticTag => {
-        const nativePropsWithAnalytics =
-          analyticTag !== null
-            ? {
-                ...nativeProps,
-                internal_analyticTag: analyticTag,
-              }
-            : nativeProps;
-        return (
-          <TextAncestorContext.Consumer>
-            {hasTextAncestor => {
-              if (hasTextAncestor) {
+  _BaseImage = BaseImage;
+} else {
+  let BaseImage: AbstractImageAndroid = ({
+    ref: forwardedRef,
+    ...props
+  }: {
+    ref?: React.RefSetter<HostInstance>,
+    ...ImageProps,
+  }) => {
+    let source = getImageSourcesFromImageProps(props) || {
+      uri: undefined,
+      width: undefined,
+      height: undefined,
+    };
+    const defaultSource = resolveAssetSource(props.defaultSource);
+    const loadingIndicatorSource = resolveAssetSource(
+      props.loadingIndicatorSource,
+    );
+
+    if (props.children != null) {
+      throw new Error(
+        'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
+      );
+    }
+
+    if (props.defaultSource != null && props.loadingIndicatorSource != null) {
+      throw new Error(
+        'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
+      );
+    }
+
+    let style: ImageStyleProp;
+    let sources;
+    if (Array.isArray(source)) {
+      style = [styles.base, props.style];
+      sources = source;
+    } else {
+      const {uri} = source;
+      if (uri === '') {
+        console.warn('source.uri should not be an empty string');
+      }
+      const width = source.width ?? props.width;
+      const height = source.height ?? props.height;
+      style = [{width, height}, styles.base, props.style];
+      sources = [source];
+    }
+
+    const {onLoadStart, onLoad, onLoadEnd, onError} = props;
+    const nativeProps = {
+      ...props,
+      style,
+      shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
+      // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
+      // (for historical reasons). So in the latter case we populate both "src" and "source",
+      // in order to have a better alignment between platforms in the future.
+      src: sources,
+      source: sources,
+      /* $FlowFixMe[prop-missing](>=0.78.0 site=react_native_android_fb) This issue was found
+       * when making Flow check .android.js files. */
+      headers: (source?.[0]?.headers || source?.headers: ?{[string]: string}),
+      defaultSource: defaultSource ? defaultSource.uri : null,
+      loadingIndicatorSrc: loadingIndicatorSource
+        ? loadingIndicatorSource.uri
+        : null,
+      accessibilityLabel:
+        props['aria-label'] ?? props.accessibilityLabel ?? props.alt,
+      accessibilityLabelledBy:
+        props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy,
+      accessible: props.alt !== undefined ? true : props.accessible,
+      accessibilityState: {
+        busy: props['aria-busy'] ?? props.accessibilityState?.busy,
+        checked: props['aria-checked'] ?? props.accessibilityState?.checked,
+        disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
+        expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
+        selected: props['aria-selected'] ?? props.accessibilityState?.selected,
+      },
+      importantForAccessibility:
+        props['aria-hidden'] === true
+          ? ('no-hide-descendants' as const)
+          : props.importantForAccessibility,
+    };
+
+    const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+    const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
+    const resizeMode =
+      objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
+
+    const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
+
+    return (
+      <ImageAnalyticsTagContext.Consumer>
+        {analyticTag => {
+          const nativePropsWithAnalytics =
+            analyticTag !== null
+              ? {
+                  ...nativeProps,
+                  internal_analyticTag: analyticTag,
+                }
+              : nativeProps;
+          return (
+            <TextAncestorContext.Consumer>
+              {hasTextAncestor => {
+                if (hasTextAncestor) {
+                  return (
+                    <TextInlineImageNativeComponent
+                      // $FlowFixMe[incompatible-type]
+                      style={style}
+                      resizeMode={resizeMode}
+                      headers={nativeProps.headers}
+                      src={sources}
+                      ref={actualRef}
+                    />
+                  );
+                }
+
                 return (
-                  <TextInlineImageNativeComponent
-                    // $FlowFixMe[incompatible-type]
-                    style={style}
+                  <ImageViewNativeComponent
+                    {...nativePropsWithAnalytics}
                     resizeMode={resizeMode}
-                    headers={nativeProps.headers}
-                    src={sources}
                     ref={actualRef}
                   />
                 );
-              }
-
-              return (
-                <ImageViewNativeComponent
-                  {...nativePropsWithAnalytics}
-                  resizeMode={resizeMode}
-                  ref={actualRef}
-                />
-              );
-            }}
-          </TextAncestorContext.Consumer>
-        );
-      }}
-    </ImageAnalyticsTagContext.Consumer>
-  );
-};
+              }}
+            </TextAncestorContext.Consumer>
+          );
+        }}
+      </ImageAnalyticsTagContext.Consumer>
+    );
+  };
+
+  _BaseImage = BaseImage;
+}
 
 const imageComponentDecorator = unstable_getImageComponentDecorator();
 if (imageComponentDecorator != null) {
-  BaseImage = imageComponentDecorator(BaseImage);
+  _BaseImage = imageComponentDecorator(_BaseImage);
 }
 
 // $FlowExpectedError[incompatible-type] Eventually we need to move these functions from statics of the component to exports in the module.
-const Image: ImageAndroid = BaseImage;
+const Image: ImageAndroid = _BaseImage;
 
 Image.displayName = 'Image';
 

package/Libraries/Image/Image.ios.js

@@ -153,6 +153,7 @@ let BaseImage: AbstractImageIOS = ({
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
     'aria-selected': ariaSelected,
+    'aria-hidden': ariaHidden,
     src,
     ...restProps
   } = props;
@@ -164,6 +165,10 @@ let BaseImage: AbstractImageIOS = ({
     expanded: ariaExpanded ?? props.accessibilityState?.expanded,
     selected: ariaSelected ?? props.accessibilityState?.selected,
   };
+
+  // In order for `aria-hidden` to work on iOS we must set `accessible` to false (`accessibilityElementsHidden` is not enough).
+  const accessible =
+    ariaHidden !== true && (props.alt !== undefined ? true : props.accessible);
   const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
 
   const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
@@ -175,7 +180,7 @@ let BaseImage: AbstractImageIOS = ({
           <ImageViewNativeComponent
             accessibilityState={_accessibilityState}
             {...restProps}
-            accessible={props.alt !== undefined ? true : props.accessible}
+            accessible={accessible}
             accessibilityLabel={accessibilityLabel ?? props.alt}
             ref={actualRef}
             style={style}