@react-native-oh/react-native-harmony 0.72.27-9 → 0.72.28-1

package/Libraries/Components/Keyboard/KeyboardAvoidingView.harmony.js

@@ -0,0 +1,255 @@
+/**
+ * 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 {ViewStyleProp} from 'react-native/Libraries/Components/Keyboard/../../StyleSheet/StyleSheet';
+import type {
+  ViewLayout,
+  ViewLayoutEvent,
+  ViewProps,
+} from 'react-native/Libraries/Components/Keyboard/../View/ViewPropTypes';
+import type {KeyboardEvent, KeyboardMetrics} from 'react-native/Libraries/Components/Keyboard/Keyboard';
+
+import LayoutAnimation from 'react-native/Libraries/Components/Keyboard/../../LayoutAnimation/LayoutAnimation';
+import StyleSheet from 'react-native/Libraries/Components/Keyboard/../../StyleSheet/StyleSheet';
+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 * as React from 'react';
+
+type Props = $ReadOnly<{|
+  ...ViewProps,
+
+  /**
+   * Specify how to react to the presence of the keyboard.
+   */
+  behavior?: ?('height' | 'position' | 'padding'),
+
+  /**
+   * Style of the content container when `behavior` is 'position'.
+   */
+  contentContainerStyle?: ?ViewStyleProp,
+
+  /**
+   * Controls whether this `KeyboardAvoidingView` instance should take effect.
+   * This is useful when more than one is on the screen. Defaults to true.
+   */
+  enabled?: ?boolean,
+
+  /**
+   * Distance between the top of the user screen and the React Native view. This
+   * may be non-zero in some cases. Defaults to 0.
+   */
+  keyboardVerticalOffset?: number,
+|}>;
+
+type State = {|
+  bottom: number,
+|};
+
+/**
+ * View that moves out of the way when the keyboard appears by automatically
+ * adjusting its height, position, or bottom padding.
+ */
+class KeyboardAvoidingView extends React.Component<Props, State> {
+  _frame: ?ViewLayout = null;
+  _keyboardEvent: ?KeyboardEvent = null;
+  _subscriptions: Array<EventSubscription> = [];
+  viewRef: {current: React.ElementRef<typeof View> | null, ...};
+  _initialFrameHeight: number = 0;
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {bottom: 0};
+    this.viewRef = React.createRef();
+  }
+
+  async _relativeKeyboardHeight(
+    keyboardFrame: KeyboardMetrics,
+  ): Promise<number> {
+    const frame = this._frame;
+    if (!frame || !keyboardFrame) {
+      return 0;
+    }
+
+    // On iOS when Prefer Cross-Fade Transitions is enabled, the keyboard position
+    // & height is reported differently (0 instead of Y position value matching height of frame)
+    if (
+      Platform.OS === 'ios' &&
+      keyboardFrame.screenY === 0 &&
+      (await AccessibilityInfo.prefersCrossFadeTransitions())
+    ) {
+      return 0;
+    }
+
+    const keyboardY =
+      keyboardFrame.screenY - (this.props.keyboardVerticalOffset ?? 0);
+
+    if (this.props.behavior === 'height') {
+      return Math.max(
+        this.state.bottom + frame.y + frame.height - keyboardY,
+        0,
+      );
+    }
+
+    // Calculate the displacement needed for the view such that it
+    // no longer overlaps with the keyboard
+    return Math.max(frame.y + frame.height - keyboardY, 0);
+  }
+
+  _onKeyboardChange = (event: ?KeyboardEvent) => {
+    this._keyboardEvent = event;
+    // $FlowFixMe[unused-promise]
+    this._updateBottomIfNecessary();
+  };
+
+  _onLayout = async (event: ViewLayoutEvent) => {
+    const wasFrameNull = this._frame == null;
+    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) {
+      await this._updateBottomIfNecessary();
+    }
+
+    if (this.props.onLayout) {
+      this.props.onLayout(event);
+    }
+  };
+
+  _updateBottomIfNecessary = async () => {
+    if (this._keyboardEvent == null) {
+      this.setState({bottom: 0});
+      return;
+    }
+
+    const {duration, easing, endCoordinates} = this._keyboardEvent;
+    const height = await this._relativeKeyboardHeight(endCoordinates);
+
+    if (this.state.bottom === height) {
+      return;
+    }
+
+    if (duration && easing) {
+      LayoutAnimation.configureNext({
+        // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
+        duration: duration > 10 ? duration : 10,
+        update: {
+          duration: duration > 10 ? duration : 10,
+          type: LayoutAnimation.Types[easing] || 'keyboard',
+        },
+      });
+    }
+    this.setState({bottom: height});
+  };
+
+  componentDidMount(): void {
+    if (Platform.OS === 'ios') {
+      this._subscriptions = [
+        Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
+      ];
+    } else {
+      this._subscriptions = [
+        Keyboard.addListener('keyboardDidHide', this._onKeyboardChange),
+        Keyboard.addListener('keyboardDidShow', this._onKeyboardChange),
+      ];
+    }
+  }
+
+  componentWillUnmount(): void {
+    this._subscriptions.forEach(subscription => {
+      subscription.remove();
+    });
+  }
+
+  render(): React.Node {
+    const {
+      behavior,
+      children,
+      contentContainerStyle,
+      enabled = true,
+      // eslint-disable-next-line no-unused-vars
+      keyboardVerticalOffset = 0,
+      style,
+      onLayout,
+      ...props
+    } = this.props;
+    const bottomHeight = enabled === true ? this.state.bottom : 0;
+    switch (behavior) {
+      case 'height':
+        let heightStyle;
+        if (this._frame != null && this.state.bottom > 0) {
+          // Note that we only apply a height change when there is keyboard present,
+          // i.e. this.state.bottom is greater than 0. If we remove that condition,
+          // this.frame.height will never go back to its original value.
+          // When height changes, we need to disable flex.
+          heightStyle = {
+            height: this._initialFrameHeight - bottomHeight,
+            flex: 0,
+          };
+        }
+        /* RNOH: patch */
+        return (
+          <View
+            ref={this.viewRef}
+            style={StyleSheet.compose(style, heightStyle)}
+            onLayout={this._onLayout}
+            {...props}>
+            {React.Children.map(children, child => React.cloneElement(child, {__keyboardAvoidingViewBottomHeight: bottomHeight}))}
+          </View>
+        );
+
+      case 'position':
+        return (
+          <View
+            ref={this.viewRef}
+            style={style}
+            onLayout={this._onLayout}
+            {...props}>
+            <View
+              style={StyleSheet.compose(contentContainerStyle, {
+                bottom: bottomHeight,
+              })}>
+              {children}
+            </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 => React.cloneElement(child, {__keyboardAvoidingViewBottomHeight: bottomHeight}))}
+          </View>
+        );
+
+      default:
+        return (
+          <View
+            ref={this.viewRef}
+            onLayout={this._onLayout}
+            style={style}
+            {...props}>
+            {children}
+          </View>
+        );
+    }
+  }
+}
+
+export default KeyboardAvoidingView;

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

@@ -684,6 +684,8 @@ type State = {|
   // RNOH patch - resolving flashScrollIndicators command on the JS side
   // as it is currently not feasible on the native side
   showScrollIndicator: boolean,
+  contentOffset: ?number,
+  contentHeight: ?number,
 |};
 
 const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
@@ -772,6 +774,8 @@ class ScrollView extends React.Component<Props, State> {
     // RNOH patch - resolving flashScrollIndicators command on the JS side
     // as it is currently not feasible on the native side
     showScrollIndicator: false,
+    contentOffset: null,
+    contentHeight: null,
   };
 
   componentDidMount() {
@@ -1188,14 +1192,15 @@ class ScrollView extends React.Component<Props, State> {
         );
       }
     }
+    this.setState({
+      contentOffset: e.nativeEvent.contentOffset.y
+    });
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
   };
 
   _handleLayout = (e: LayoutEvent) => {
-    if (this.props.invertStickyHeaders === true) {
-      this.setState({ layoutHeight: e.nativeEvent.layout.height });
-    }
+    this.setState({ layoutHeight: e.nativeEvent.layout.height });
     if (this.props.onLayout) {
       this.props.onLayout(e);
     }
@@ -1203,6 +1208,26 @@ class ScrollView extends React.Component<Props, State> {
 
   _handleContentOnLayout = (e: LayoutEvent) => {
     const { width, height } = e.nativeEvent.layout;
+    /**
+     * RNOH patch - Fixed the issue where sticky headers are in disordered position after foldable phone is expanded/folded.
+     * When a foldable phone is expanded/folded, the height of the list items often changes,
+     * causing the content height of the ScrollView to change.
+     * But since the scroll event is not triggered, the position of the sticky headers is 
+     * still offset according to the original content height.
+     * So we should recalculate the contentOffset based on the new contentHeight and trigger 
+     * the scroll event to fix the position of sticky headers
+     */
+    let { contentOffset, contentHeight, layoutHeight } = this.state;
+    if (contentOffset && contentHeight) {
+      contentOffset *= (height - layoutHeight) / (contentHeight - layoutHeight);
+      (contentOffset < 0) && (contentOffset = 0);
+      this.scrollTo({ y: contentOffset, animated: false });
+      this._scrollAnimatedValue.setValue(contentOffset);
+    }
+    this.setState({
+      contentOffset,
+      contentHeight: height
+    });
     this.props.onContentSizeChange &&
       this.props.onContentSizeChange(width, height);
   };

package/Libraries/Components/StatusBar/StatusBar.harmony.js

@@ -406,6 +406,9 @@ class StatusBar extends React.Component<Props> {
         StatusBar._defaultProps
       );
       //RNOH: patch - delete code specific to IOS and Android
+      if (!oldProps || oldProps.hidden.value !== mergedProps.hidden.value) {
+        NativeStatusBarManagerHarmony.setHidden(mergedProps.hidden.value);
+      }
 
       // Update the props that have changed using the merged values from the props stack.
       if (!oldProps || oldProps.barStyle.value !== mergedProps.barStyle.value) {
@@ -431,9 +434,6 @@ class StatusBar extends React.Component<Props> {
           NativeStatusBarManagerHarmony.setColor(processedColor, mergedProps.backgroundColor.animated);
         }
       }
-      if (!oldProps || oldProps.hidden.value !== mergedProps.hidden.value) {
-        NativeStatusBarManagerHarmony.setHidden(mergedProps.hidden.value);
-      }
       // Update the current prop values.
       StatusBar._currentValues = mergedProps;
     });

package/index.js

@@ -76,7 +76,7 @@ module.exports = {
     return require('react-native/Libraries/Components/Keyboard/Keyboard');
   },
   get KeyboardAvoidingView() {
-    return require('react-native/Libraries/Components/Keyboard/KeyboardAvoidingView')
+    return require('./Libraries/Components/Keyboard/KeyboardAvoidingView')
       .default;
   },
   get NativeEventEmitter() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-oh/react-native-harmony",
-  "version": "0.72.27-9",
+  "version": "0.72.28-1",
   "description": "",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -49,7 +49,7 @@
     "./*.har"
   ],
   "dependencies": {
-    "@react-native-oh/react-native-harmony-cli": "^0.0.26-9",
+    "@react-native-oh/react-native-harmony-cli": "^0.0.26-12",
     "colors": "^1.4.0",
     "fs-extra": "^11.1.1",
     "metro": "^0.76.3",