@react-native-oh/react-native-harmony 0.72.82 → 0.77.18-1

package/Libraries/Components/Keyboard/Keyboard.d.ts

@@ -0,0 +1,109 @@
+/**
+ * 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 {NativeEventEmitter} from '../../EventEmitter/NativeEventEmitter';
+import {EmitterSubscription} from '../../vendor/emitter/EventEmitter';
+
+export type KeyboardEventName =
+  | 'keyboardWillShow'
+  | 'keyboardDidShow'
+  | 'keyboardWillHide'
+  | 'keyboardDidHide'
+  | 'keyboardWillChangeFrame'
+  | 'keyboardDidChangeFrame';
+
+export type KeyboardEventEasing =
+  | 'easeIn'
+  | 'easeInEaseOut'
+  | 'easeOut'
+  | 'linear'
+  | 'keyboard';
+
+type KeyboardMetrics = {
+  screenX: number;
+  screenY: number;
+  width: number;
+  height: number;
+};
+
+interface KeyboardEventIOS {
+  /**
+   * @platform ios
+   */
+  startCoordinates: KeyboardMetrics;
+  /**
+   * @platform ios
+   */
+  isEventFromThisApp: boolean;
+}
+
+export interface KeyboardEvent extends Partial<KeyboardEventIOS> {
+  /**
+   * Always set to 0 on Android.
+   */
+  duration: number;
+  /**
+   * Always set to "keyboard" on Android.
+   */
+  easing: KeyboardEventEasing;
+  endCoordinates: KeyboardMetrics;
+}
+
+type KeyboardEventListener = (event: KeyboardEvent) => void;
+
+export interface KeyboardStatic extends NativeEventEmitter {
+  /**
+   * Dismisses the active keyboard and removes focus.
+   */
+  dismiss: () => void;
+  /**
+   * The `addListener` function connects a JavaScript function to an identified native
+   * keyboard notification event.
+   *
+   * This function then returns the reference to the listener.
+   *
+   * {string} eventName The `nativeEvent` is the string that identifies the event you're listening for.  This
+   *can be any of the following:
+   *
+   * - `keyboardWillShow`
+   * - `keyboardDidShow`
+   * - `keyboardWillHide`
+   * - `keyboardDidHide`
+   * - `keyboardWillChangeFrame`
+   * - `keyboardDidChangeFrame`
+   *
+   * Note that if you set `android:windowSoftInputMode` to `adjustResize`  or `adjustNothing`,
+   * only `keyboardDidShow` and `keyboardDidHide` events will be available on Android.
+   * `keyboardWillShow` as well as `keyboardWillHide` are generally not available on Android
+   * since there is no native corresponding event.
+   *
+   * {function} callback function to be called when the event fires.
+   */
+  addListener: (
+    eventType: KeyboardEventName,
+    listener: KeyboardEventListener,
+  ) => EmitterSubscription;
+  /**
+   * Useful for syncing TextInput (or other keyboard accessory view) size of
+   * position changes with keyboard movements.
+   */
+  scheduleLayoutAnimation: (event: KeyboardEvent) => void;
+
+  /**
+   * Whether the keyboard is last known to be visible.
+   */
+  isVisible(): boolean;
+
+  /**
+   * Return the metrics of the soft-keyboard if visible.
+   */
+  metrics(): KeyboardMetrics | undefined;
+}
+
+export const Keyboard: KeyboardStatic;

package/Libraries/Components/Keyboard/Keyboard.js

@@ -0,0 +1,205 @@
+/**
+ * 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
+ * @flow strict-local
+ */
+
+import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
+
+import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';
+import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
+import dismissKeyboard from '../../Utilities/dismissKeyboard';
+import Platform from '../../Utilities/Platform';
+import NativeKeyboardObserver from './NativeKeyboardObserver';
+
+export type KeyboardEventName = $Keys<KeyboardEventDefinitions>;
+
+export type KeyboardEventEasing =
+  | 'easeIn'
+  | 'easeInEaseOut'
+  | 'easeOut'
+  | 'linear'
+  | 'keyboard';
+
+export type KeyboardMetrics = $ReadOnly<{|
+  screenX: number,
+  screenY: number,
+  width: number,
+  height: number,
+|}>;
+
+export type KeyboardEvent = AndroidKeyboardEvent | IOSKeyboardEvent;
+
+type BaseKeyboardEvent = {|
+  duration: number,
+  easing: KeyboardEventEasing,
+  endCoordinates: KeyboardMetrics,
+|};
+
+export type AndroidKeyboardEvent = $ReadOnly<{|
+  ...BaseKeyboardEvent,
+  duration: 0,
+  easing: 'keyboard',
+|}>;
+
+export type IOSKeyboardEvent = $ReadOnly<{|
+  ...BaseKeyboardEvent,
+  startCoordinates: KeyboardMetrics,
+  isEventFromThisApp: boolean,
+|}>;
+
+type KeyboardEventDefinitions = {
+  keyboardWillShow: [KeyboardEvent],
+  keyboardDidShow: [KeyboardEvent],
+  keyboardWillHide: [KeyboardEvent],
+  keyboardDidHide: [KeyboardEvent],
+  keyboardWillChangeFrame: [KeyboardEvent],
+  keyboardDidChangeFrame: [KeyboardEvent],
+};
+
+/**
+ * `Keyboard` module to control keyboard events.
+ *
+ * ### Usage
+ *
+ * The Keyboard module allows you to listen for native events and react to them, as
+ * well as make changes to the keyboard, like dismissing it.
+ *
+ *```
+ * import React, { Component } from 'react';
+ * import { Keyboard, TextInput } from 'react-native';
+ *
+ * class Example extends Component {
+ *   componentWillMount () {
+ *     this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
+ *     this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
+ *   }
+ *
+ *   componentWillUnmount () {
+ *     this.keyboardDidShowListener.remove();
+ *     this.keyboardDidHideListener.remove();
+ *   }
+ *
+ *   _keyboardDidShow () {
+ *     alert('Keyboard Shown');
+ *   }
+ *
+ *   _keyboardDidHide () {
+ *     alert('Keyboard Hidden');
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <TextInput
+ *         onSubmitEditing={Keyboard.dismiss}
+ *       />
+ *     );
+ *   }
+ * }
+ *```
+ */
+
+class Keyboard {
+  _currentlyShowing: ?KeyboardEvent;
+
+  _emitter: NativeEventEmitter<KeyboardEventDefinitions> =
+    new NativeEventEmitter(
+      // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
+      // If you want to use the native module on other platforms, please remove this condition and test its behavior
+      Platform.OS !== 'ios' ? null : NativeKeyboardObserver,
+    );
+
+  constructor() {
+    this.addListener('keyboardDidShow', ev => {
+      this._currentlyShowing = ev;
+    });
+    this.addListener('keyboardDidHide', _ev => {
+      this._currentlyShowing = null;
+    });
+  }
+
+  /**
+   * The `addListener` function connects a JavaScript function to an identified native
+   * keyboard notification event.
+   *
+   * This function then returns the reference to the listener.
+   *
+   * @param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for.  This
+   *can be any of the following:
+   *
+   * - `keyboardWillShow`
+   * - `keyboardDidShow`
+   * - `keyboardWillHide`
+   * - `keyboardDidHide`
+   * - `keyboardWillChangeFrame`
+   * - `keyboardDidChangeFrame`
+   *
+   * Android versions prior to API 30 rely on observing layout changes when
+   * `android:windowSoftInputMode` is set to `adjustResize` or `adjustPan`.
+   *
+   * `keyboardWillShow` as well as `keyboardWillHide` are not available on Android since there is
+   * no native corresponding event.
+   *
+   * @param {function} callback function to be called when the event fires.
+   */
+  addListener<K: $Keys<KeyboardEventDefinitions>>(
+    eventType: K,
+    listener: (...$ElementType<KeyboardEventDefinitions, K>) => mixed,
+    context?: mixed,
+  ): EventSubscription {
+    return this._emitter.addListener(eventType, listener);
+  }
+
+  /**
+   * Removes all listeners for a specific event type.
+   *
+   * @param {string} eventType The native event string listeners are watching which will be removed.
+   */
+  removeAllListeners<K: $Keys<KeyboardEventDefinitions>>(eventType: ?K): void {
+    this._emitter.removeAllListeners(eventType);
+  }
+
+  /**
+   * Dismisses the active keyboard and removes focus.
+   */
+  dismiss(): void {
+    dismissKeyboard();
+  }
+
+  /**
+   * Whether the keyboard is last known to be visible.
+   */
+  isVisible(): boolean {
+    return !!this._currentlyShowing;
+  }
+
+  /**
+   * Return the metrics of the soft-keyboard if visible.
+   */
+  metrics(): ?KeyboardMetrics {
+    return this._currentlyShowing?.endCoordinates;
+  }
+
+  /**
+   * Useful for syncing TextInput (or other keyboard accessory view) size of
+   * position changes with keyboard movements.
+   */
+  scheduleLayoutAnimation(event: KeyboardEvent): void {
+    const {duration, easing} = event;
+    if (duration != null && duration !== 0) {
+      LayoutAnimation.configureNext({
+        duration: duration,
+        update: {
+          duration: duration,
+          type: (easing != null && LayoutAnimation.Types[easing]) || 'keyboard',
+        },
+      });
+    }
+  }
+}
+
+module.exports = (new Keyboard(): Keyboard);

package/Libraries/Components/Keyboard/KeyboardAvoidingView.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 {StyleProp} from '../../StyleSheet/StyleSheet';
+import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
+import {ViewProps} from '../View/ViewPropTypes';
+
+/**
+ * It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard.
+ * It can automatically adjust either its position or bottom padding based on the position of the keyboard.
+ */
+declare class KeyboardAvoidingViewComponent extends React.Component<KeyboardAvoidingViewProps> {}
+declare const KeyboardAvoidingViewBase: Constructor<TimerMixin> &
+  typeof KeyboardAvoidingViewComponent;
+export class KeyboardAvoidingView extends KeyboardAvoidingViewBase {}
+
+export interface KeyboardAvoidingViewProps extends ViewProps {
+  behavior?: 'height' | 'position' | 'padding' | undefined;
+
+  /**
+   * The style of the content container(View) when behavior is 'position'.
+   */
+  contentContainerStyle?: StyleProp<ViewStyle> | undefined;
+
+  /**
+   * This is the distance between the top of the user screen and the react native view,
+   * may be non-zero in some use cases.
+   */
+  keyboardVerticalOffset?: number | undefined;
+
+  /**
+   * Enables or disables the KeyboardAvoidingView.
+   *
+   * Default is true
+   */
+  enabled?: boolean | undefined;
+}

package/Libraries/Components/Keyboard/{KeyboardAvoidingView.harmony.js → KeyboardAvoidingView.js}

@@ -8,21 +8,24 @@
  * @flow strict-local
  */
 
-import type {ViewStyleProp} from 'react-native/Libraries/Components/Keyboard/../../StyleSheet/StyleSheet';
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import type {DimensionsPayload} from '../../Utilities/NativeDeviceInfo';
 import type {
   ViewLayout,
   ViewLayoutEvent,
   ViewProps,
-} from 'react-native/Libraries/Components/Keyboard/../View/ViewPropTypes';
-import type {KeyboardEvent, KeyboardMetrics} from 'react-native/Libraries/Components/Keyboard/Keyboard';
+} from '../View/ViewPropTypes';
+import type {KeyboardEvent, KeyboardMetrics} from './Keyboard';
 
-import LayoutAnimation from 'react-native/Libraries/Components/Keyboard/../../LayoutAnimation/LayoutAnimation';
-import StyleSheet from 'react-native/Libraries/Components/Keyboard/../../StyleSheet/StyleSheet';
+import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Dimensions from '../../Utilities/Dimensions';
 import Platform from '../../Utilities/Platform';
-import {type EventSubscription} from 'react-native/Libraries/Components/Keyboard/../../vendor/emitter/EventEmitter';
-import AccessibilityInfo from 'react-native/Libraries/Components/Keyboard/../AccessibilityInfo/AccessibilityInfo';
-import View from 'react-native/Libraries/Components/Keyboard/../View/View';
-import Keyboard from 'react-native/Libraries/Components/Keyboard/Keyboard';
+import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
+import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo';
+import View from '../View/View';
+import KeyboardAvoidingViewDelegate from './delegates/KeyboardAvoidingViewDelegate';
+import Keyboard from './Keyboard';
 import * as React from 'react';
 
 type Props = $ReadOnly<{|
@@ -65,19 +68,26 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   _subscriptions: Array<EventSubscription> = [];
   viewRef: {current: React.ElementRef<typeof View> | null, ...};
   _initialFrameHeight: number = 0;
+  _bottom: number = 0;
+  _windowWidth: number = Dimensions.get('window').width;
+  _delegate: KeyboardAvoidingViewDelegate;
 
   constructor(props: Props) {
     super(props);
     this.state = {bottom: 0};
     this.viewRef = React.createRef();
+    this._delegate = new KeyboardAvoidingViewDelegate({ getProps: () => this.props });
   }
 
   async _relativeKeyboardHeight(
     keyboardFrame: KeyboardMetrics,
   ): Promise<number> {
+    const result = this._delegate.getRelativeKeyboardHeight(keyboardFrame, this.props);
+    if (result !== null) {
+      return result;
+    }
     const frame = this._frame;
-    if (!frame || !keyboardFrame 
-      || this.props.enabled === false) { // RNOH patch
+    if (!frame || !keyboardFrame) {
       return 0;
     }
 
@@ -113,14 +123,17 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   };
 
   _onLayout = async (event: ViewLayoutEvent) => {
-    const wasFrameNull = this._frame == null;
+    event.persist();
+
+    const oldFrame = this._frame;
     this._frame = event.nativeEvent.layout;
     if (!this._initialFrameHeight) {
       // save the initial frame height, before the keyboard is visible
       this._initialFrameHeight = this._frame.height;
     }
 
-    if (wasFrameNull) {
+    // update bottom height for the first time or when the height is changed
+    if (!oldFrame || oldFrame.height !== this._frame.height) {
       await this._updateBottomIfNecessary();
     }
 
@@ -129,20 +142,45 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     }
   };
 
+  _onDimensionsChange = ({window}: DimensionsPayload) => {
+    this._windowWidth = window?.width ?? 0;
+  };
+
+  // Avoid unnecessary renders if the KeyboardAvoidingView is disabled.
+  _setBottom = (value: number) => {
+    const enabled = this.props.enabled ?? true;
+    this._bottom = value;
+    if (enabled) {
+      this.setState({bottom: value});
+    }
+  };
+
   _updateBottomIfNecessary = async () => {
     if (this._keyboardEvent == null) {
-      this.setState({bottom: 0});
+      this._setBottom(0);
+      return;
+    }
+
+    if (
+      Platform.OS === 'ios' &&
+      this._windowWidth !== this._keyboardEvent.endCoordinates.width
+    ) {
+      // The keyboard is not the standard bottom-of-the-screen keyboard. For example, floating keyboard on iPadOS.
+      this._setBottom(0);
       return;
     }
 
     const {duration, easing, endCoordinates} = this._keyboardEvent;
     const height = await this._relativeKeyboardHeight(endCoordinates);
 
-    if (this.state.bottom === height) {
+    if (this._bottom === height) {
       return;
     }
 
-    if (duration && easing) {
+    this._setBottom(height);
+
+    const enabled = this.props.enabled ?? true;
+    if (enabled && duration && easing) {
       LayoutAnimation.configureNext({
         // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
         duration: duration > 10 ? duration : 10,
@@ -152,13 +190,25 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
         },
       });
     }
-    this.setState({bottom: height});
   };
 
+  componentDidUpdate(_: Props, prevState: State): void {
+    const enabled = this.props.enabled ?? true;
+    if (enabled && this._bottom !== prevState.bottom) {
+      this.setState({bottom: this._bottom});
+    }
+  }
+
   componentDidMount(): void {
+    if (!Keyboard.isVisible()) {
+      this._keyboardEvent = null;
+      this._setBottom(0);
+    }
+
     if (Platform.OS === 'ios') {
       this._subscriptions = [
         Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
+        Dimensions.addEventListener('change', this._onDimensionsChange),
       ];
     } else {
       this._subscriptions = [
@@ -187,6 +237,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
       ...props
     } = this.props;
     const bottomHeight = enabled === true ? this.state.bottom : 0;
+    const preparedChildren = this._delegate.prepareChildren(children, { bottomHeight });
     switch (behavior) {
       case 'height':
         let heightStyle;
@@ -200,14 +251,13 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
             flex: 0,
           };
         }
-        /* RNOH: patch */
         return (
           <View
             ref={this.viewRef}
             style={StyleSheet.compose(style, heightStyle)}
             onLayout={this._onLayout}
             {...props}>
-            {React.Children.map(children, child => child && React.cloneElement(child, {__keyboardAvoidingViewBottomHeight: bottomHeight}))}
+            {preparedChildren}
           </View>
         );
 
@@ -222,20 +272,19 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
               style={StyleSheet.compose(contentContainerStyle, {
                 bottom: bottomHeight,
               })}>
-              {children}
+              {preparedChildren}
             </View>
           </View>
         );
 
       case 'padding':
-        /* RNOH: patch */
         return (
           <View
             ref={this.viewRef}
             style={StyleSheet.compose(style, {paddingBottom: bottomHeight})}
             onLayout={this._onLayout}
             {...props}>
-            {React.Children.map(children, child => child && React.cloneElement(child, {__keyboardAvoidingViewBottomHeight: bottomHeight}))}
+            {preparedChildren}
           </View>
         );
 
@@ -246,7 +295,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
             onLayout={this._onLayout}
             style={style}
             {...props}>
-            {children}
+            {preparedChildren}
           </View>
         );
     }

package/Libraries/Components/Keyboard/NativeKeyboardObserver.js

@@ -0,0 +1,13 @@
+/**
+ * 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
+ * @format
+ */
+
+export * from '../../../src/private/specs/modules/NativeKeyboardObserver';
+import NativeKeyboardObserver from '../../../src/private/specs/modules/NativeKeyboardObserver';
+export default NativeKeyboardObserver;

package/Libraries/Components/Keyboard/delegates/BaseKeyboardAvoidingViewDelegate.ts

@@ -0,0 +1,28 @@
+/**
+ * @format
+ */
+import {ReactNode} from 'react';
+import type {KeyboardAvoidingViewProps, KeyboardMetrics} from 'react-native';
+
+export type BaseKeyboardAvoidingViewDelegateContext = {
+  getProps(): KeyboardAvoidingViewProps;
+};
+
+export type PrepareChildrenOptions = {
+  bottomHeight?: number;
+};
+
+export abstract class BaseKeyboardAvoidingViewDelegate {
+  constructor(protected ctx: BaseKeyboardAvoidingViewDelegateContext) {}
+
+  getRelativeKeyboardHeight(keyboardFrame: KeyboardMetrics): number | null {
+    return null;
+  }
+
+  prepareChildren(
+    children: ReactNode,
+    options: PrepareChildrenOptions = {},
+  ): ReactNode {
+    return children;
+  }
+}

package/Libraries/Components/Keyboard/delegates/KeyboardAvoidingViewDelegate.harmony.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2024 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { ReactNode } from 'react';
+import { KeyboardMetrics } from '../../Keyboard/Keyboard';
+import {
+  BaseKeyboardAvoidingViewDelegate,
+  PrepareChildrenOptions,
+} from './BaseKeyboardAvoidingViewDelegate';
+
+export default class KeyboardAvoidingViewDelegate extends BaseKeyboardAvoidingViewDelegate {
+  override getRelativeKeyboardHeight(
+    keyboardFrame: KeyboardMetrics
+  ): number | null {
+    if (this.ctx.getProps().enabled === false) {
+      return 0;
+    }
+    return super.getRelativeKeyboardHeight(keyboardFrame);
+  }
+
+  override prepareChildren(
+    children: ReactNode,
+    options: PrepareChildrenOptions
+  ): ReactNode {
+    const behavior = this.ctx.getProps().behavior;
+    if (behavior === 'height' || behavior === 'padding') {
+      return React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return child;
+        }
+        return React.cloneElement(child, {
+          __keyboardAvoidingViewBottomHeight: options.bottomHeight ?? 0,
+        } as any);
+      });
+    }
+    return children;
+  }
+}

package/Libraries/Components/Keyboard/delegates/KeyboardAvoidingViewDelegate.ts

@@ -0,0 +1,6 @@
+/**
+ * @format
+ */
+import {BaseKeyboardAvoidingViewDelegate} from './BaseKeyboardAvoidingViewDelegate';
+
+export default class KeyboardAvoidingViewDelegate extends BaseKeyboardAvoidingViewDelegate {}