@react-native-oh/react-native-harmony 0.72.14-lazy → 0.72.17

package/Libraries/Alert/Alert.harmony.js

@@ -41,7 +41,7 @@ class Alert {
     }
 
     // At most two buttons. Ignore rest.
-    const validButtons: Buttons = buttons.slice(0, 2);
+    const validButtons: Buttons = (buttons ?? [{text: "OK"}]).slice(0, 2)
     const secondaryButton = validButtons.pop();
     const primaryButton = validButtons.pop();
 

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.harmony.js

@@ -0,0 +1,426 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+// RNOH: patch
+// COPIED FROM: https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js
+
+import type { HostComponent } from "react-native/Libraries/Renderer/shims/ReactNativeTypes";
+import type { EventSubscription } from "react-native/Libraries/vendor/emitter/EventEmitter";
+import type { ElementRef } from "react";
+
+// RNOH: patch - imports fixed
+import RCTDeviceEventEmitter from "react-native/Libraries/EventEmitter/RCTDeviceEventEmitter";
+import { sendAccessibilityEvent } from "react-native/Libraries/ReactNative/RendererProxy";
+import Platform from "../../Utilities/Platform";
+import legacySendAccessibilityEvent from "react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent";
+import NativeAccessibilityInfoAndroid from "react-native/Libraries/Components/AccessibilityInfo/NativeAccessibilityInfo";
+import NativeAccessibilityManagerIOS from "react-native/Libraries/Components/AccessibilityInfo/NativeAccessibilityManager";
+
+// Events that are only supported on Android.
+type AccessibilityEventDefinitionsAndroid = {
+  accessibilityServiceChanged: [boolean],
+};
+
+// Events that are only supported on iOS.
+type AccessibilityEventDefinitionsIOS = {
+  announcementFinished: [{ announcement: string, success: boolean }],
+  boldTextChanged: [boolean],
+  grayscaleChanged: [boolean],
+  invertColorsChanged: [boolean],
+  reduceTransparencyChanged: [boolean],
+};
+
+type AccessibilityEventDefinitions = {
+  ...AccessibilityEventDefinitionsAndroid,
+  ...AccessibilityEventDefinitionsIOS,
+  change: [boolean], // screenReaderChanged
+  reduceMotionChanged: [boolean],
+  screenReaderChanged: [boolean],
+};
+
+type AccessibilityEventTypes = "click" | "focus" | "viewHoverEnter";
+
+// Mapping of public event names to platform-specific event names.
+const EventNames: Map<
+  $Keys<AccessibilityEventDefinitions>,
+  string
+> = Platform.OS === "android"
+  ? new Map([
+      ["change", "touchExplorationDidChange"],
+      ["reduceMotionChanged", "reduceMotionDidChange"],
+      ["screenReaderChanged", "touchExplorationDidChange"],
+      ["accessibilityServiceChanged", "accessibilityServiceDidChange"],
+    ])
+  : new Map([
+      ["announcementFinished", "announcementFinished"],
+      ["boldTextChanged", "boldTextChanged"],
+      ["change", "screenReaderChanged"],
+      ["grayscaleChanged", "grayscaleChanged"],
+      ["invertColorsChanged", "invertColorsChanged"],
+      ["reduceMotionChanged", "reduceMotionChanged"],
+      ["reduceTransparencyChanged", "reduceTransparencyChanged"],
+      ["screenReaderChanged", "screenReaderChanged"],
+    ]);
+
+/**
+ * Sometimes it's useful to know whether or not the device has a screen reader
+ * that is currently active. The `AccessibilityInfo` API is designed for this
+ * purpose. You can use it to query the current state of the screen reader as
+ * well as to register to be notified when the state of the screen reader
+ * changes.
+ *
+ * See https://reactnative.dev/docs/accessibilityinfo
+ */
+const AccessibilityInfo = {
+  /**
+   * Query whether bold text is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when bold text is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#isBoldTextEnabled
+   */
+  isBoldTextEnabled(): Promise<boolean> {
+    if (Platform.OS === "android") {
+      return Promise.resolve(false);
+    } else {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentBoldTextState(
+            resolve,
+            reject
+          );
+        } else {
+          reject(null);
+        }
+      });
+    }
+  },
+
+  /**
+   * Query whether grayscale is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when grayscale is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#isGrayscaleEnabled
+   */
+  isGrayscaleEnabled(): Promise<boolean> {
+    if (Platform.OS === "android") {
+      return Promise.resolve(false);
+    } else {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentGrayscaleState(
+            resolve,
+            reject
+          );
+        } else {
+          reject(null);
+        }
+      });
+    }
+  },
+
+  /**
+   * Query whether inverted colors are currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when invert color is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#isInvertColorsEnabled
+   */
+  isInvertColorsEnabled(): Promise<boolean> {
+    if (Platform.OS === "android") {
+      return Promise.resolve(false);
+    } else {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentInvertColorsState(
+            resolve,
+            reject
+          );
+        } else {
+          reject(null);
+        }
+      });
+    }
+  },
+
+  /**
+   * Query whether reduced motion is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when a reduce motion is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#isReduceMotionEnabled
+   */
+  isReduceMotionEnabled(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === "android") {
+        if (NativeAccessibilityInfoAndroid != null) {
+          NativeAccessibilityInfoAndroid.isReduceMotionEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      } else {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentReduceMotionState(
+            resolve,
+            reject
+          );
+        } else {
+          reject(null);
+        }
+      }
+    });
+  },
+
+  /**
+   * Query whether reduce motion and prefer cross-fade transitions settings are currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when  prefer cross-fade transitions is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#prefersCrossFadeTransitions
+   */
+  prefersCrossFadeTransitions(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === "android") {
+        return Promise.resolve(false);
+      } else {
+        if (
+          NativeAccessibilityManagerIOS?.getCurrentPrefersCrossFadeTransitionsState !=
+          null
+        ) {
+          NativeAccessibilityManagerIOS.getCurrentPrefersCrossFadeTransitionsState(
+            resolve,
+            reject
+          );
+        } else {
+          reject(null);
+        }
+      }
+    });
+  },
+
+  /**
+   * Query whether reduced transparency is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when a reduce transparency is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#isReduceTransparencyEnabled
+   */
+  isReduceTransparencyEnabled(): Promise<boolean> {
+    if (Platform.OS === "android") {
+      return Promise.resolve(false);
+    } else {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentReduceTransparencyState(
+            resolve,
+            reject
+          );
+        } else {
+          reject(null);
+        }
+      });
+    }
+  },
+
+  /**
+   * Query whether a screen reader is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when a screen reader is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#isScreenReaderEnabled
+   */
+  isScreenReaderEnabled(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      // RNOH: path to support open harmony
+      if (Platform.OS === "android" || Platform.OS === "harmony") {
+        if (NativeAccessibilityInfoAndroid != null) {
+          NativeAccessibilityInfoAndroid.isTouchExplorationEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      } else {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentVoiceOverState(
+            resolve,
+            reject
+          );
+        } else {
+          reject(null);
+        }
+      }
+    });
+  },
+
+  /**
+   * Query whether Accessibility Service is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when any service is enabled and `false` otherwise.
+   *
+   * @platform android
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo/#isaccessibilityserviceenabled-android
+   */
+  isAccessibilityServiceEnabled(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === "android") {
+        if (
+          NativeAccessibilityInfoAndroid != null &&
+          NativeAccessibilityInfoAndroid.isAccessibilityServiceEnabled != null
+        ) {
+          NativeAccessibilityInfoAndroid.isAccessibilityServiceEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      } else {
+        reject(null);
+      }
+    });
+  },
+
+  /**
+   * Add an event handler. Supported events:
+   *
+   * - `reduceMotionChanged`: Fires when the state of the reduce motion toggle changes.
+   *   The argument to the event handler is a boolean. The boolean is `true` when a reduce
+   *   motion is enabled (or when "Transition Animation Scale" in "Developer options" is
+   *   "Animation off") and `false` otherwise.
+   * - `screenReaderChanged`: Fires when the state of the screen reader changes. The argument
+   *   to the event handler is a boolean. The boolean is `true` when a screen
+   *   reader is enabled and `false` otherwise.
+   *
+   * These events are only supported on iOS:
+   *
+   * - `boldTextChanged`: iOS-only event. Fires when the state of the bold text toggle changes.
+   *   The argument to the event handler is a boolean. The boolean is `true` when a bold text
+   *   is enabled and `false` otherwise.
+   * - `grayscaleChanged`: iOS-only event. Fires when the state of the gray scale toggle changes.
+   *   The argument to the event handler is a boolean. The boolean is `true` when a gray scale
+   *   is enabled and `false` otherwise.
+   * - `invertColorsChanged`: iOS-only event. Fires when the state of the invert colors toggle
+   *   changes. The argument to the event handler is a boolean. The boolean is `true` when a invert
+   *   colors is enabled and `false` otherwise.
+   * - `reduceTransparencyChanged`: iOS-only event. Fires when the state of the reduce transparency
+   *   toggle changes.  The argument to the event handler is a boolean. The boolean is `true`
+   *   when a reduce transparency is enabled and `false` otherwise.
+   * - `announcementFinished`: iOS-only event. Fires when the screen reader has
+   *   finished making an announcement. The argument to the event handler is a
+   *   dictionary with these keys:
+   *     - `announcement`: The string announced by the screen reader.
+   *     - `success`: A boolean indicating whether the announcement was
+   *       successfully made.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#addeventlistener
+   */
+  addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
+    eventName: K,
+    // $FlowIssue[incompatible-type] - Flow bug with unions and generics (T128099423)
+    handler: (...$ElementType<AccessibilityEventDefinitions, K>) => void
+  ): EventSubscription {
+    const deviceEventName = EventNames.get(eventName);
+    return deviceEventName == null
+      ? { remove(): void {} }
+      : // $FlowFixMe[incompatible-call]
+        RCTDeviceEventEmitter.addListener(deviceEventName, handler);
+  },
+
+  /**
+   * Set accessibility focus to a React component.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#setaccessibilityfocus
+   */
+  setAccessibilityFocus(reactTag: number): void {
+    legacySendAccessibilityEvent(reactTag, "focus");
+  },
+
+  /**
+   * Send a named accessibility event to a HostComponent.
+   */
+  sendAccessibilityEvent(
+    handle: ElementRef<HostComponent<mixed>>,
+    eventType: AccessibilityEventTypes
+  ) {
+    // iOS only supports 'focus' event types
+    if (Platform.OS === "ios" && eventType === "click") {
+      return;
+    }
+    // route through React renderer to distinguish between Fabric and non-Fabric handles
+    sendAccessibilityEvent(handle, eventType);
+  },
+
+  /**
+   * Post a string to be announced by the screen reader.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#announceforaccessibility
+   */
+  announceForAccessibility(announcement: string): void {
+    if (Platform.OS === "android") {
+      NativeAccessibilityInfoAndroid?.announceForAccessibility(announcement);
+    } else {
+      NativeAccessibilityManagerIOS?.announceForAccessibility(announcement);
+    }
+  },
+
+  /**
+   * Post a string to be announced by the screen reader.
+   * - `announcement`: The string announced by the screen reader.
+   * - `options`: An object that configures the reading options.
+   *   - `queue`: The announcement will be queued behind existing announcements. iOS only.
+   */
+  announceForAccessibilityWithOptions(
+    announcement: string,
+    options: { queue?: boolean }
+  ): void {
+    if (Platform.OS === "android") {
+      NativeAccessibilityInfoAndroid?.announceForAccessibility(announcement);
+    } else {
+      if (NativeAccessibilityManagerIOS?.announceForAccessibilityWithOptions) {
+        NativeAccessibilityManagerIOS?.announceForAccessibilityWithOptions(
+          announcement,
+          options
+        );
+      } else {
+        NativeAccessibilityManagerIOS?.announceForAccessibility(announcement);
+      }
+    }
+  },
+
+  /**
+   * Get the recommended timeout for changes to the UI needed by this user.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#getrecommendedtimeoutmillis
+   */
+  getRecommendedTimeoutMillis(originalTimeout: number): Promise<number> {
+    if (Platform.OS === "android") {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityInfoAndroid?.getRecommendedTimeoutMillis) {
+          NativeAccessibilityInfoAndroid.getRecommendedTimeoutMillis(
+            originalTimeout,
+            resolve
+          );
+        } else {
+          resolve(originalTimeout);
+        }
+      });
+    } else {
+      return Promise.resolve(originalTimeout);
+    }
+  },
+};
+
+export default AccessibilityInfo;

package/Libraries/Components/ScrollView/ScrollView.harmony.js

@@ -1316,7 +1316,8 @@ class ScrollView extends React.Component<Props, State> {
     FrameRateLogger.beginScroll(); // TODO: track all scrolls after implementing onScrollEndAnimation
 
     if (
-      Platform.OS === "android" &&
+      // RNOH: patch - add support for OpenHarmony
+      (Platform.OS === "android" || Platform.OS === "harmony") &&
       this.props.keyboardDismissMode === "on-drag"
     ) {
       dismissKeyboard();
@@ -1809,10 +1810,10 @@ class ScrollView extends React.Component<Props, State> {
       // default to true
       snapToEnd: this.props.snapToEnd !== false,
       // pagingEnabled is overridden by snapToInterval / snapToOffsets
-      pagingEnabled: 
-          this.props.pagingEnabled === true &&
-          this.props.snapToInterval == null &&
-          this.props.snapToOffsets == null, 
+      pagingEnabled:
+        this.props.pagingEnabled === true &&
+        this.props.snapToInterval == null &&
+        this.props.snapToOffsets == null,
     };
 
     const { decelerationRate } = this.props;

package/Libraries/Core/setUpReactDevTools.harmony.js

@@ -0,0 +1,93 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+if (__DEV__) {
+  let isWebSocketOpen = false;
+  let ws = null;
+
+  const reactDevTools = require('react-devtools-core');
+  const connectToDevTools = () => {
+    if (ws !== null && isWebSocketOpen) {
+      // If the DevTools backend is already connected, don't recreate the WebSocket.
+      // This would break the connection.
+      // If there isn't an active connection, a backend may be waiting to connect,
+      // in which case it's okay to make a new one.
+      return;
+    }
+
+    // not when debugging in chrome
+    // TODO(t12832058) This check is broken
+    if (!window.document) {
+      const AppState = require('react-native/Libraries/AppState/AppState');
+      const getDevServer = require('react-native/Libraries/Core/Devtools/getDevServer');
+
+      // Don't steal the DevTools from currently active app.
+      // Note: if you add any AppState subscriptions to this file,
+      // you will also need to guard against `AppState.isAvailable`,
+      // or the code will throw for bundles that don't have it.
+      const isAppActive = () => AppState.currentState !== 'background';
+
+      // RNOH patch: wait until appstate is active before connecting
+      if (!isAppActive()) {
+        const subscription = AppState.addEventListener('change', () => {
+          if (isAppActive()) {
+            connectToDevTools();
+            subscription.remove();
+          }
+        });
+        return;
+      }
+
+      // Get hostname from development server (packager)
+      const devServer = getDevServer();
+      const host = devServer.bundleLoadedFromServer
+        ? devServer.url
+            .replace(/https?:\/\//, '')
+            .replace(/\/$/, '')
+            .split(':')[0]
+        : 'localhost';
+
+      // Read the optional global variable for backward compatibility.
+      // It was added in https://github.com/facebook/react-native/commit/bf2b435322e89d0aeee8792b1c6e04656c2719a0.
+      const port =
+        window.__REACT_DEVTOOLS_PORT__ != null
+          ? window.__REACT_DEVTOOLS_PORT__
+          : 8097;
+
+      const WebSocket = require('react-native/Libraries/WebSocket/WebSocket');
+      ws = new WebSocket('ws://' + host + ':' + port);
+      ws.addEventListener('close', event => {
+        isWebSocketOpen = false;
+      });
+      ws.addEventListener('open', event => {
+        isWebSocketOpen = true;
+      });
+
+      const ReactNativeStyleAttributes = require('react-native/Libraries/Components/View/ReactNativeStyleAttributes');
+      const devToolsSettingsManager = require('react-native/Libraries/DevToolsSettings/DevToolsSettingsManager');
+
+      reactDevTools.connectToDevTools({
+        isAppActive,
+        resolveRNStyle: require('react-native/Libraries/StyleSheet/flattenStyle'),
+        nativeStyleEditorValidAttributes: Object.keys(
+          ReactNativeStyleAttributes,
+        ),
+        websocket: ws,
+        devToolsSettingsManager,
+      });
+    }
+  };
+
+  const RCTNativeAppEventEmitter = require('react-native/Libraries/EventEmitter/RCTNativeAppEventEmitter');
+  RCTNativeAppEventEmitter.addListener('RCTDevMenuShown', connectToDevTools);
+  connectToDevTools(); // Try connecting once on load
+}

package/Libraries/Image/AssetSourceResolver.harmony.ts

@@ -2,6 +2,10 @@ import {
   getAssetDestRelativePath,
   Asset,
 } from '@react-native-oh/react-native-harmony-cli/src/assetResolver';
+import {
+  getBasePath,
+} from '@react-native/assets-registry/path-support';
+import { Platform } from 'react-native';
 
 type ResolvedAssetSource = {
   readonly __packager_asset: boolean;
@@ -11,6 +15,11 @@ type ResolvedAssetSource = {
   readonly scale: number;
 };
 
+function getAssetPath(asset: Asset): string {
+  const assetDir = getBasePath(asset);
+  return assetDir + '/' + asset.name + '.' + asset.type;
+}
+
 class AssetSourceResolver {
   constructor(
     private serverUrl: string | undefined,
@@ -18,7 +27,15 @@ class AssetSourceResolver {
     private asset: Asset
   ) {}
 
+  isLoadedFromServer(): boolean {
+    return !!this.serverUrl;
+  }
+
   public defaultAsset(): ResolvedAssetSource {
+    if (this.isLoadedFromServer()) {
+      return this.assetServerURL();
+    }
+
     return {
       __packager_asset: this.asset.__packager_asset,
       uri: `asset://${getAssetDestRelativePath(this.asset)}`,
@@ -27,6 +44,35 @@ class AssetSourceResolver {
       height: this.asset.height,
     };
   }
+
+  /**
+   * Returns an absolute URL which can be used to fetch the asset
+   * from the devserver
+   */
+  assetServerURL(): ResolvedAssetSource {
+    if (!this.serverUrl) {
+      throw new Error('need server to load from');
+    }
+
+    return this.fromSource(
+      this.serverUrl +
+      getAssetPath(this.asset) +
+        '?platform=' +
+        Platform.OS +
+        '&hash=' +
+        this.asset.hash,
+    );
+  }
+
+  fromSource(source: string): ResolvedAssetSource {
+    return {
+      __packager_asset: true,
+      width: this.asset.width,
+      height: this.asset.height,
+      uri: source,
+      scale: 1,
+    };
+  }
 }
 
 module.exports = AssetSourceResolver;

package/Libraries/NativeComponent/BaseViewConfig.harmony.js

@@ -23,6 +23,18 @@ const bubblingEventTypes = {
       bubbled: 'onChange',
     },
   },
+  topFocus: {
+    phasedRegistrationNames: {
+      bubbled: 'onFocus',
+      captured: 'onFocusCapture',
+    },
+  },
+  topBlur: {
+    phasedRegistrationNames: {
+      bubbled: 'onBlur',
+      captured: 'onBlurCapture',
+    },
+  },
   topSelect: {
     phasedRegistrationNames: {
       captured: 'onSelectCapture',