@office-iss/react-native-win32 0.70.2 → 0.71.0-preview.1

package/Libraries/Components/ScrollView/ScrollView.js

@@ -8,48 +8,49 @@
  * @flow strict-local
  */
 
-import AnimatedImplementation from '../../Animated/AnimatedImplementation';
-import Dimensions from '../../Utilities/Dimensions';
-import Platform from '../../Utilities/Platform';
-import * as React from 'react';
-import ReactNative from '../../Renderer/shims/ReactNative';
-require('../../Renderer/shims/ReactNative'); // Force side effects to prevent T55744311
-import ScrollViewStickyHeader from './ScrollViewStickyHeader';
-import StyleSheet from '../../StyleSheet/StyleSheet';
-import View from '../View/View';
-import UIManager from '../../ReactNative/UIManager';
-import Keyboard from '../Keyboard/Keyboard';
-import FrameRateLogger from '../../Interaction/FrameRateLogger';
-import TextInputState from '../TextInput/TextInputState';
-
-import dismissKeyboard from '../../Utilities/dismissKeyboard';
-import flattenStyle from '../../StyleSheet/flattenStyle';
-import invariant from 'invariant';
-import processDecelerationRate from './processDecelerationRate';
-import splitLayoutProps from '../../StyleSheet/splitLayoutProps';
-import setAndForwardRef from '../../Utilities/setAndForwardRef';
-
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PointProp} from '../../StyleSheet/PointPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {
+  LayoutEvent,
   PressEvent,
   ScrollEvent,
-  LayoutEvent,
 } from '../../Types/CoreEventTypes';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
+import type {KeyboardEvent, KeyboardMetrics} from '../Keyboard/Keyboard';
 import type {ViewProps} from '../View/ViewPropTypes';
-import ScrollViewContext, {HORIZONTAL, VERTICAL} from './ScrollViewContext';
 import type {Props as ScrollViewStickyHeaderProps} from './ScrollViewStickyHeader';
-import type {KeyboardEvent} from '../Keyboard/Keyboard';
-import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 
-import Commands from './ScrollViewCommands';
+import AnimatedImplementation from '../../Animated/AnimatedImplementation';
+import FrameRateLogger from '../../Interaction/FrameRateLogger';
+import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import UIManager from '../../ReactNative/UIManager';
+import flattenStyle from '../../StyleSheet/flattenStyle';
+import splitLayoutProps from '../../StyleSheet/splitLayoutProps';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Dimensions from '../../Utilities/Dimensions';
+import dismissKeyboard from '../../Utilities/dismissKeyboard';
+import Platform from '../../Utilities/Platform';
+import setAndForwardRef from '../../Utilities/setAndForwardRef';
+import Keyboard from '../Keyboard/Keyboard';
+import TextInputState from '../TextInput/TextInputState';
+import View from '../View/View';
 import AndroidHorizontalScrollContentViewNativeComponent from './AndroidHorizontalScrollContentViewNativeComponent';
 import AndroidHorizontalScrollViewNativeComponent from './AndroidHorizontalScrollViewNativeComponent';
+import processDecelerationRate from './processDecelerationRate';
 import ScrollContentViewNativeComponent from './ScrollContentViewNativeComponent';
+import Commands from './ScrollViewCommands';
+import ScrollViewContext, {HORIZONTAL, VERTICAL} from './ScrollViewContext';
 import ScrollViewNativeComponent from './ScrollViewNativeComponent';
+import ScrollViewStickyHeader from './ScrollViewStickyHeader';
+import invariant from 'invariant';
+import * as React from 'react';
+
+if (Platform.OS === 'ios') {
+  require('../../Renderer/shims/ReactNative'); // Force side effects to prevent T55744311
+}
 
 const {NativeHorizontalScrollViewTuple, NativeVerticalScrollViewTuple} =
   Platform.OS === 'android'
@@ -410,7 +411,7 @@ type AndroidProps = $ReadOnly<{|
    */
   persistentScrollbar?: ?boolean,
   /**
-   * Fades out the edges of the the scroll content.
+   * Fades out the edges of the scroll content.
    *
    * If the value is greater than 0, the fading edges will be set accordingly
    * to the current scroll direction and position,
@@ -731,7 +732,7 @@ class ScrollView extends React.Component<Props, State> {
     new Map();
   _headerLayoutYs: Map<string, number> = new Map();
 
-  _keyboardWillOpenTo: ?KeyboardEvent = null;
+  _keyboardMetrics: ?KeyboardMetrics = null;
   _additionalScrollOffset: number = 0;
   _isTouching: boolean = false;
   _lastMomentumScrollBeginTime: number = 0;
@@ -769,7 +770,7 @@ class ScrollView extends React.Component<Props, State> {
       );
     }
 
-    this._keyboardWillOpenTo = null;
+    this._keyboardMetrics = Keyboard.metrics();
     this._additionalScrollOffset = 0;
 
     this._subscriptionKeyboardWillShow = Keyboard.addListener(
@@ -825,7 +826,7 @@ class ScrollView extends React.Component<Props, State> {
     }
   }
 
-  _setNativeRef = setAndForwardRef({
+  _setNativeRef: $FlowFixMe = setAndForwardRef({
     getForwardedRef: () => this.props.scrollViewRef,
     setLocalRef: ref => {
       this._scrollViewRef = ref;
@@ -867,11 +868,11 @@ class ScrollView extends React.Component<Props, State> {
   };
 
   getScrollableNode: () => ?number = () => {
-    return ReactNative.findNodeHandle(this._scrollViewRef);
+    return findNodeHandle(this._scrollViewRef);
   };
 
   getInnerViewNode: () => ?number = () => {
-    return ReactNative.findNodeHandle(this._innerViewRef);
+    return findNodeHandle(this._innerViewRef);
   };
 
   getInnerViewRef: () => ?React.ElementRef<typeof View> = () => {
@@ -996,7 +997,7 @@ class ScrollView extends React.Component<Props, State> {
     if (typeof nodeHandle === 'number') {
       UIManager.measureLayout(
         nodeHandle,
-        ReactNative.findNodeHandle(this),
+        findNodeHandle(this),
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         this._textInputFocusError,
         this._inputMeasureAndScrollToKeyboard,
@@ -1075,8 +1076,8 @@ class ScrollView extends React.Component<Props, State> {
     let keyboardScreenY = Dimensions.get('window').height;
 
     const scrollTextInputIntoVisibleRect = () => {
-      if (this._keyboardWillOpenTo != null) {
-        keyboardScreenY = this._keyboardWillOpenTo.endCoordinates.screenY;
+      if (this._keyboardMetrics != null) {
+        keyboardScreenY = this._keyboardMetrics.screenY;
       }
       let scrollOffsetY =
         top - keyboardScreenY + height + this._additionalScrollOffset;
@@ -1094,8 +1095,8 @@ class ScrollView extends React.Component<Props, State> {
       this._preventNegativeScrollOffset = false;
     };
 
-    if (this._keyboardWillOpenTo == null) {
-      // `_keyboardWillOpenTo` is set inside `scrollResponderKeyboardWillShow` which
+    if (this._keyboardMetrics == null) {
+      // `_keyboardMetrics` is set inside `scrollResponderKeyboardWillShow` which
       // is not guaranteed to be called before `_inputMeasureAndScrollToKeyboard` but native has already scheduled it.
       // In case it was not called before `_inputMeasureAndScrollToKeyboard`, we postpone scrolling to
       // text input.
@@ -1107,7 +1108,7 @@ class ScrollView extends React.Component<Props, State> {
     }
   };
 
-  _getKeyForIndex(index: $FlowFixMe, childArray: $FlowFixMe) {
+  _getKeyForIndex(index: $FlowFixMe, childArray: $FlowFixMe): $FlowFixMe {
     const child = childArray[index];
     return child && child.key;
   }
@@ -1204,7 +1205,7 @@ class ScrollView extends React.Component<Props, State> {
   _scrollViewRef: ?React.ElementRef<HostComponent<mixed>> = null;
 
   _innerViewRef: ?React.ElementRef<typeof View> = null;
-  _setInnerViewRef = setAndForwardRef({
+  _setInnerViewRef: $FlowFixMe = setAndForwardRef({
     getForwardedRef: () => this.props.innerViewRef,
     setLocalRef: ref => {
       this._innerViewRef = ref;
@@ -1243,32 +1244,28 @@ class ScrollView extends React.Component<Props, State> {
   scrollResponderKeyboardWillShow: (e: KeyboardEvent) => void = (
     e: KeyboardEvent,
   ) => {
-    this._keyboardWillOpenTo = e;
+    this._keyboardMetrics = e.endCoordinates;
     this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e);
   };
 
   scrollResponderKeyboardWillHide: (e: KeyboardEvent) => void = (
     e: KeyboardEvent,
   ) => {
-    this._keyboardWillOpenTo = null;
+    this._keyboardMetrics = null;
     this.props.onKeyboardWillHide && this.props.onKeyboardWillHide(e);
   };
 
   scrollResponderKeyboardDidShow: (e: KeyboardEvent) => void = (
     e: KeyboardEvent,
   ) => {
-    // TODO(7693961): The event for DidShow is not available on iOS yet.
-    // Use the one from WillShow and do not assign.
-    if (e) {
-      this._keyboardWillOpenTo = e;
-    }
+    this._keyboardMetrics = e.endCoordinates;
     this.props.onKeyboardDidShow && this.props.onKeyboardDidShow(e);
   };
 
   scrollResponderKeyboardDidHide: (e: KeyboardEvent) => void = (
     e: KeyboardEvent,
   ) => {
-    this._keyboardWillOpenTo = null;
+    this._keyboardMetrics = null;
     this.props.onKeyboardDidHide && this.props.onKeyboardDidHide(e);
   };
 
@@ -1385,6 +1382,7 @@ class ScrollView extends React.Component<Props, State> {
     // if another touch occurs outside of it
     const currentlyFocusedTextInput = TextInputState.currentlyFocusedInput();
     if (
+      currentlyFocusedTextInput != null &&
       this.props.keyboardShouldPersistTaps !== true &&
       this.props.keyboardShouldPersistTaps !== 'always' &&
       this._keyboardIsDismissible() &&
@@ -1460,7 +1458,6 @@ class ScrollView extends React.Component<Props, State> {
     }
 
     const currentlyFocusedInput = TextInputState.currentlyFocusedInput();
-
     if (
       this.props.keyboardShouldPersistTaps === 'handled' &&
       this._keyboardIsDismissible() &&
@@ -1514,6 +1511,11 @@ class ScrollView extends React.Component<Props, State> {
       return false;
     }
 
+    // Let presses through if the soft keyboard is detached from the viewport
+    if (this._softKeyboardIsDetached()) {
+      return false;
+    }
+
     if (
       keyboardNeverPersistTaps &&
       this._keyboardIsDismissible() &&
@@ -1544,14 +1546,28 @@ class ScrollView extends React.Component<Props, State> {
 
     // Even if an input is focused, we may not have a keyboard to dismiss. E.g
     // when using a physical keyboard. Ensure we have an event for an opened
-    // keyboard, except on Android where setting windowSoftInputMode to
-    // adjustNone leads to missing keyboard events.
+    // keyboard.
     const softKeyboardMayBeOpen =
-      this._keyboardWillOpenTo != null || Platform.OS === 'android';
+      this._keyboardMetrics != null || this._keyboardEventsAreUnreliable();
 
     return hasFocusedTextInput && softKeyboardMayBeOpen;
   };
 
+  /**
+   * Whether an open soft keyboard is present which does not overlap the
+   * viewport. E.g. for a VR soft-keyboard which is detached from the app
+   * viewport.
+   */
+  _softKeyboardIsDetached: () => boolean = () => {
+    return this._keyboardMetrics != null && this._keyboardMetrics.height === 0;
+  };
+
+  _keyboardEventsAreUnreliable: () => boolean = () => {
+    // Android versions prior to API 30 rely on observing layout changes when
+    // `android:windowSoftInputMode` is set to `adjustResize` or `adjustPan`.
+    return Platform.OS === 'android' && Platform.Version < 30;
+  };
+
   /**
    * Invoke this from an `onTouchEnd` event.
    *
@@ -1560,6 +1576,25 @@ class ScrollView extends React.Component<Props, State> {
   _handleTouchEnd: (e: PressEvent) => void = (e: PressEvent) => {
     const nativeEvent = e.nativeEvent;
     this._isTouching = nativeEvent.touches.length !== 0;
+
+    const {keyboardShouldPersistTaps} = this.props;
+    const keyboardNeverPersistsTaps =
+      !keyboardShouldPersistTaps || keyboardShouldPersistTaps === 'never';
+
+    // Dismiss the keyboard now if we didn't become responder in capture phase
+    // to eat presses, but still want to dismiss on interaction.
+    // Don't do anything if the target of the touch event is the current input.
+    const currentlyFocusedTextInput = TextInputState.currentlyFocusedInput();
+    if (
+      currentlyFocusedTextInput != null &&
+      e.target !== currentlyFocusedTextInput &&
+      this._softKeyboardIsDetached() &&
+      this._keyboardIsDismissible() &&
+      keyboardNeverPersistsTaps
+    ) {
+      TextInputState.blurTextInput(currentlyFocusedTextInput);
+    }
+
     this.props.onTouchEnd && this.props.onTouchEnd(e);
   };
 

package/Libraries/Components/ScrollView/ScrollViewCommands.js

@@ -8,11 +8,11 @@
  * @flow strict-local
  */
 
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {Double} from '../../Types/CodegenTypes';
+
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import * as React from 'react';
-import type {Double} from 'react-native/Libraries/Types/CodegenTypes';
-
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 
 type ScrollViewNativeComponentType = HostComponent<mixed>;
 interface NativeCommands {

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -8,11 +8,12 @@
  * @format
  */
 
-import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
 import type {
   HostComponent,
   PartialViewConfig,
 } from '../../Renderer/shims/ReactNativeTypes';
+import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
+
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfigIgnore';
 import Platform from '../../Utilities/Platform';

package/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
-import type {ViewProps} from '../View/ViewPropTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
-import type {ScrollEvent} from '../../Types/CoreEventTypes';
 import type {PointProp} from '../../StyleSheet/PointPropType';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {ScrollEvent} from '../../Types/CoreEventTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
 
 export type ScrollViewNativeProps = $ReadOnly<{
   ...ViewProps,