@office-iss/react-native-win32 0.71.4 → 0.72.0-preview.1

package/Libraries/Components/Pressable/Pressable.d.ts

@@ -158,7 +158,7 @@ export interface PressableProps
   /**
    * Duration (in milliseconds) to wait after press down before calling onPressIn.
    */
-  unstable_pressDelay?: number;
+  unstable_pressDelay?: number | undefined;
 }
 
 // TODO use React.AbstractComponent when available

package/Libraries/Components/Pressable/Pressable.js

@@ -188,7 +188,7 @@ type Props = $ReadOnly<{|
    */
   unstable_pressDelay?: ?number,
   /**
-   * Web to Native Accessibilty props
+   * Web to Native Accessibility props
    * https://github.com/facebook/react-native/issues/34424
    */
   'aria-label'?: ?string,

package/Libraries/Components/RefreshControl/RefreshControl.js

@@ -183,6 +183,7 @@ class RefreshControl extends React.Component<RefreshControlProps> {
   _onRefresh = () => {
     this._lastNativeRefreshing = true;
 
+    // $FlowFixMe[unused-promise]
     this.props.onRefresh && this.props.onRefresh();
 
     // The native component will start refreshing so force an update to

package/Libraries/Components/SafeAreaView/SafeAreaView.js

@@ -9,7 +9,6 @@
  */
 
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {SafeAreaViewType} from './SafeAreaView.flow';
 
 import Platform from '../../Utilities/Platform';
 import View from '../View/View';
@@ -32,4 +31,4 @@ if (Platform.OS === 'android') {
   exported = require('./RCTSafeAreaViewNativeComponent').default;
 }
 
-export default (exported: SafeAreaViewType);
+export default exported;

package/Libraries/Components/SafeAreaView/SafeAreaView.win32.js

@@ -9,7 +9,6 @@
  */
 
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {SafeAreaViewType} from './SafeAreaView.flow';
 
 import Platform from '../../Utilities/Platform';
 import View from '../View/View';
@@ -33,4 +32,4 @@ if (Platform.OS === 'android' || Platform.OS === 'win32') {
   exported = require('./RCTSafeAreaViewNativeComponent').default;
 }
 
-export default (exported: SafeAreaViewType);
+export default exported;

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -23,7 +23,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   validAttributes: {
     decelerationRate: true,
     disableIntervalMomentum: true,
-    endFillColor: {process: require('../../StyleSheet/processColor')},
+    endFillColor: {process: require('../../StyleSheet/processColor').default},
     fadingEdgeLength: true,
     nestedScrollEnabled: true,
     overScrollMode: true,
@@ -43,14 +43,20 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     borderBottomRightRadius: true,
     borderRadius: true,
     borderStyle: true,
-    borderRightColor: {process: require('../../StyleSheet/processColor')},
-    borderColor: {process: require('../../StyleSheet/processColor')},
-    borderBottomColor: {process: require('../../StyleSheet/processColor')},
+    borderRightColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    borderColor: {process: require('../../StyleSheet/processColor').default},
+    borderBottomColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     borderTopLeftRadius: true,
-    borderTopColor: {process: require('../../StyleSheet/processColor')},
+    borderTopColor: {process: require('../../StyleSheet/processColor').default},
     removeClippedSubviews: true,
     borderTopRightRadius: true,
-    borderLeftColor: {process: require('../../StyleSheet/processColor')},
+    borderLeftColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     pointerEvents: true,
   },
 };

package/Libraries/Components/ScrollView/ScrollView.d.ts

@@ -730,7 +730,7 @@ export interface ScrollViewProps
   /**
    * When true, Sticky header is hidden when scrolling down, and dock at the top when scrolling up.
    */
-  stickyHeaderHiddenOnScroll?: boolean;
+  stickyHeaderHiddenOnScroll?: boolean | undefined;
 
   /**
    * Style
@@ -841,7 +841,7 @@ export class ScrollView extends ScrollViewBase {
    * The options object has an animated prop, that enables the scrolling animation or not.
    * The animated prop defaults to true
    */
-  scrollToEnd(options?: {animated?: boolean}): void;
+  scrollToEnd(options?: {animated?: boolean | undefined}): void;
 
   /**
    * Displays the scroll indicators momentarily.

package/Libraries/Components/ScrollView/ScrollView.js

@@ -33,7 +33,6 @@ 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';
@@ -46,6 +45,8 @@ import ScrollViewContext, {HORIZONTAL, VERTICAL} from './ScrollViewContext';
 import ScrollViewNativeComponent from './ScrollViewNativeComponent';
 import ScrollViewStickyHeader from './ScrollViewStickyHeader';
 import invariant from 'invariant';
+import memoize from 'memoize-one';
+import nullthrows from 'nullthrows';
 import * as React from 'react';
 
 if (Platform.OS === 'ios') {
@@ -165,6 +166,14 @@ export type ScrollViewImperativeMethods = $ReadOnly<{|
 export type DecelerationRateType = 'fast' | 'normal' | number;
 export type ScrollResponderType = ScrollViewImperativeMethods;
 
+type NativeScrollViewInstance = React.ElementRef<HostComponent<mixed>>;
+type PublicScrollViewInstance = $ReadOnly<{|
+  ...$Exact<NativeScrollViewInstance>,
+  ...ScrollViewImperativeMethods,
+|}>;
+
+type InnerViewInstance = React.ElementRef<typeof View>;
+
 type IOSProps = $ReadOnly<{|
   /**
    * Controls whether iOS should automatically adjust the content inset
@@ -279,7 +288,6 @@ type IOSProps = $ReadOnly<{|
    * visibility. Occlusion, transforms, and other complexity won't be taken into account as to
    * whether content is "visible" or not.
    *
-   * @platform ios
    */
   maintainVisibleContentPosition?: ?$ReadOnly<{|
     minIndexForVisible: number,
@@ -301,24 +309,6 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   pinchGestureEnabled?: ?boolean,
-  /**
-   * This controls how often the scroll event will be fired while scrolling
-   * (as a time interval in ms). A lower number yields better accuracy for code
-   * that is tracking the scroll position, but can lead to scroll performance
-   * problems due to the volume of information being send over the bridge.
-   *
-   * Values between 0 and 17ms indicate 60fps updates are needed and throttling
-   * will be disabled.
-   *
-   * If you do not need precise scroll position tracking, set this value higher
-   * to limit the information being sent across the bridge.
-   *
-   * The default value is zero, which results in the scroll event being sent only
-   * once each time the view is scrolled.
-   *
-   * @platform ios
-   */
-  scrollEventThrottle?: ?number,
   /**
    * The amount by which the scroll view indicators are inset from the edges
    * of the scroll view. This should normally be set to the same value as
@@ -560,7 +550,6 @@ export type Props = $ReadOnly<{|
    * Note: Vertical pagination is not supported on Android.
    */
   pagingEnabled?: ?boolean,
-
   /**
    * When false, the view cannot be scrolled via touch interaction.
    * The default value is true.
@@ -568,6 +557,22 @@ export type Props = $ReadOnly<{|
    * Note that the view can always be scrolled by calling `scrollTo`.
    */
   scrollEnabled?: ?boolean,
+  /**
+   * This controls how often the scroll event will be fired while scrolling
+   * (as a time interval in ms). A lower number yields better accuracy for code
+   * that is tracking the scroll position, but can lead to scroll performance
+   * problems due to the volume of information being send over the bridge.
+   *
+   * Values between 0 and 17ms indicate 60fps updates are needed and throttling
+   * will be disabled.
+   *
+   * If you do not need precise scroll position tracking, set this value higher
+   * to limit the information being sent across the bridge.
+   *
+   * The default value is zero, which results in the scroll event being sent only
+   * once each time the view is scrolled.
+   */
+  scrollEventThrottle?: ?number,
   /**
    * When true, shows a vertical scroll indicator.
    * The default value is true.
@@ -658,15 +663,13 @@ export type Props = $ReadOnly<{|
    * A ref to the inner View element of the ScrollView. This should be used
    * instead of calling `getInnerViewRef`.
    */
-  innerViewRef?: React.Ref<typeof View>,
+  innerViewRef?: ForwardedRef<InnerViewInstance>,
   /**
    * A ref to the Native ScrollView component. This ref can be used to call
    * all of ScrollView's public methods, in addition to native methods like
    * measure, measureLayout, etc.
    */
-  scrollViewRef?: React.Ref<
-    typeof ScrollViewNativeComponent & ScrollViewImperativeMethods,
-  >,
+  scrollViewRef?: ForwardedRef<PublicScrollViewInstance>,
 |}>;
 
 type State = {|
@@ -747,7 +750,7 @@ class ScrollView extends React.Component<Props, State> {
   _becameResponderWhileAnimating: boolean = false;
   _preventNegativeScrollOffset: ?boolean = null;
 
-  _animated = null;
+  _animated: ?boolean = null;
 
   _subscriptionKeyboardWillShow: ?EventSubscription = null;
   _subscriptionKeyboardWillHide: ?EventSubscription = null;
@@ -826,36 +829,6 @@ class ScrollView extends React.Component<Props, State> {
     }
   }
 
-  _setNativeRef: $FlowFixMe = setAndForwardRef({
-    getForwardedRef: () => this.props.scrollViewRef,
-    setLocalRef: ref => {
-      this._scrollViewRef = ref;
-
-      /*
-        This is a hack. Ideally we would forwardRef to the underlying
-        host component. However, since ScrollView has it's own methods that can be
-        called as well, if we used the standard forwardRef then these
-        methods wouldn't be accessible and thus be a breaking change.
-
-        Therefore we edit ref to include ScrollView's public methods so that
-        they are callable from the ref.
-      */
-      if (ref) {
-        ref.getScrollResponder = this.getScrollResponder;
-        ref.getScrollableNode = this.getScrollableNode;
-        ref.getInnerViewNode = this.getInnerViewNode;
-        ref.getInnerViewRef = this.getInnerViewRef;
-        ref.getNativeScrollRef = this.getNativeScrollRef;
-        ref.scrollTo = this.scrollTo;
-        ref.scrollToEnd = this.scrollToEnd;
-        ref.flashScrollIndicators = this.flashScrollIndicators;
-        ref.scrollResponderZoomTo = this.scrollResponderZoomTo;
-        ref.scrollResponderScrollNativeHandleToKeyboard =
-          this.scrollResponderScrollNativeHandleToKeyboard;
-      }
-    },
-  });
-
   /**
    * Returns a reference to the underlying scroll responder, which supports
    * operations like `scrollTo`. All ScrollView-like components should
@@ -868,19 +841,19 @@ class ScrollView extends React.Component<Props, State> {
   };
 
   getScrollableNode: () => ?number = () => {
-    return findNodeHandle(this._scrollViewRef);
+    return findNodeHandle(this._scrollView.nativeInstance);
   };
 
   getInnerViewNode: () => ?number = () => {
-    return findNodeHandle(this._innerViewRef);
+    return findNodeHandle(this._innerView.nativeInstance);
   };
 
-  getInnerViewRef: () => ?React.ElementRef<typeof View> = () => {
-    return this._innerViewRef;
+  getInnerViewRef: () => InnerViewInstance | null = () => {
+    return this._innerView.nativeInstance;
   };
 
-  getNativeScrollRef: () => ?React.ElementRef<HostComponent<mixed>> = () => {
-    return this._scrollViewRef;
+  getNativeScrollRef: () => NativeScrollViewInstance | null = () => {
+    return this._scrollView.nativeInstance;
   };
 
   /**
@@ -931,10 +904,15 @@ class ScrollView extends React.Component<Props, State> {
       x = options.x;
       animated = options.animated;
     }
-    if (this._scrollViewRef == null) {
+    if (this._scrollView.nativeInstance == null) {
       return;
     }
-    Commands.scrollTo(this._scrollViewRef, x || 0, y || 0, animated !== false);
+    Commands.scrollTo(
+      this._scrollView.nativeInstance,
+      x || 0,
+      y || 0,
+      animated !== false,
+    );
   };
 
   /**
@@ -950,10 +928,10 @@ class ScrollView extends React.Component<Props, State> {
   ) => {
     // Default to true
     const animated = (options && options.animated) !== false;
-    if (this._scrollViewRef == null) {
+    if (this._scrollView.nativeInstance == null) {
       return;
     }
-    Commands.scrollToEnd(this._scrollViewRef, animated);
+    Commands.scrollToEnd(this._scrollView.nativeInstance, animated);
   };
 
   /**
@@ -962,10 +940,10 @@ class ScrollView extends React.Component<Props, State> {
    * @platform ios
    */
   flashScrollIndicators: () => void = () => {
-    if (this._scrollViewRef == null) {
+    if (this._scrollView.nativeInstance == null) {
       return;
     }
-    Commands.flashScrollIndicators(this._scrollViewRef);
+    Commands.flashScrollIndicators(this._scrollView.nativeInstance);
   };
 
   /**
@@ -990,21 +968,21 @@ class ScrollView extends React.Component<Props, State> {
     this._additionalScrollOffset = additionalOffset || 0;
     this._preventNegativeScrollOffset = !!preventNegativeScrollOffset;
 
-    if (this._innerViewRef == null) {
+    if (this._innerView.nativeInstance == null) {
       return;
     }
 
     if (typeof nodeHandle === 'number') {
       UIManager.measureLayout(
         nodeHandle,
-        findNodeHandle(this),
+        nullthrows(findNodeHandle(this)),
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         this._textInputFocusError,
         this._inputMeasureAndScrollToKeyboard,
       );
     } else {
       nodeHandle.measureLayout(
-        this._innerViewRef,
+        this._innerView.nativeInstance,
         this._inputMeasureAndScrollToKeyboard,
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         this._textInputFocusError,
@@ -1047,10 +1025,14 @@ class ScrollView extends React.Component<Props, State> {
       );
     }
 
-    if (this._scrollViewRef == null) {
+    if (this._scrollView.nativeInstance == null) {
       return;
     }
-    Commands.zoomToRect(this._scrollViewRef, rect, animated !== false);
+    Commands.zoomToRect(
+      this._scrollView.nativeInstance,
+      rect,
+      animated !== false,
+    );
   };
 
   _textInputFocusError() {
@@ -1123,7 +1105,7 @@ class ScrollView extends React.Component<Props, State> {
     ) {
       this._scrollAnimatedValueAttachment =
         AnimatedImplementation.attachNativeEvent(
-          this._scrollViewRef,
+          this._scrollView.nativeInstance,
           'onScroll',
           [{nativeEvent: {contentOffset: {y: this._scrollAnimatedValue}}}],
         );
@@ -1146,7 +1128,7 @@ class ScrollView extends React.Component<Props, State> {
     if (!stickyHeaderIndices) {
       return;
     }
-    const childArray = React.Children.toArray(this.props.children);
+    const childArray = React.Children.toArray<$FlowFixMe>(this.props.children);
     if (key !== this._getKeyForIndex(index, childArray)) {
       // ignore stale layout update
       return;
@@ -1202,15 +1184,45 @@ class ScrollView extends React.Component<Props, State> {
       this.props.onContentSizeChange(width, height);
   };
 
-  _scrollViewRef: ?React.ElementRef<HostComponent<mixed>> = null;
+  _innerView: RefForwarder<InnerViewInstance, InnerViewInstance> =
+    createRefForwarder(
+      (instance: InnerViewInstance): InnerViewInstance => instance,
+    );
+
+  _scrollView: RefForwarder<
+    NativeScrollViewInstance,
+    PublicScrollViewInstance,
+  > = createRefForwarder(
+    (nativeInstance: NativeScrollViewInstance): PublicScrollViewInstance => {
+      // This is a hack. Ideally we would forwardRef  to the underlying
+      // host component. However, since ScrollView has it's own methods that can be
+      // called as well, if we used the standard forwardRef then these
+      // methods wouldn't be accessible and thus be a breaking change.
+      //
+      // Therefore we edit ref to include ScrollView's public methods so that
+      // they are callable from the ref.
+
+      // $FlowFixMe[prop-missing] - Known issue with appending custom methods.
+      const publicInstance: PublicScrollViewInstance = Object.assign(
+        nativeInstance,
+        {
+          getScrollResponder: this.getScrollResponder,
+          getScrollableNode: this.getScrollableNode,
+          getInnerViewNode: this.getInnerViewNode,
+          getInnerViewRef: this.getInnerViewRef,
+          getNativeScrollRef: this.getNativeScrollRef,
+          scrollTo: this.scrollTo,
+          scrollToEnd: this.scrollToEnd,
+          flashScrollIndicators: this.flashScrollIndicators,
+          scrollResponderZoomTo: this.scrollResponderZoomTo,
+          scrollResponderScrollNativeHandleToKeyboard:
+            this.scrollResponderScrollNativeHandleToKeyboard,
+        },
+      );
 
-  _innerViewRef: ?React.ElementRef<typeof View> = null;
-  _setInnerViewRef: $FlowFixMe = setAndForwardRef({
-    getForwardedRef: () => this.props.innerViewRef,
-    setLocalRef: ref => {
-      this._innerViewRef = ref;
+      return publicInstance;
     },
-  });
+  );
 
   /**
    * Warning, this may be called several times for a single keyboard opening.
@@ -1650,6 +1662,7 @@ class ScrollView extends React.Component<Props, State> {
       this.props.contentContainerStyle,
     ];
     if (__DEV__ && this.props.style !== undefined) {
+      // $FlowFixMe[underconstrained-implicit-instantiation]
       const style = flattenStyle(this.props.style);
       const childLayoutProps = ['alignItems', 'justifyContent'].filter(
         prop => style && style[prop] !== undefined,
@@ -1673,7 +1686,9 @@ class ScrollView extends React.Component<Props, State> {
     let children = this.props.children;
 
     if (stickyHeaderIndices != null && stickyHeaderIndices.length > 0) {
-      const childArray = React.Children.toArray(this.props.children);
+      const childArray = React.Children.toArray<$FlowFixMe>(
+        this.props.children,
+      );
 
       children = childArray.map((child, index) => {
         const indexOfIndex = child ? stickyHeaderIndices.indexOf(index) : -1;
@@ -1716,7 +1731,7 @@ class ScrollView extends React.Component<Props, State> {
     const contentContainer = (
       <NativeDirectionalScrollContentView
         {...contentSizeChangeProps}
-        ref={this._setInnerViewRef}
+        ref={this._innerView.getForwardingRef(this.props.innerViewRef)}
         style={contentContainerStyle}
         removeClippedSubviews={
           // Subview clipping causes issues with sticky headers on Android and
@@ -1802,12 +1817,15 @@ class ScrollView extends React.Component<Props, State> {
     }
 
     const refreshControl = this.props.refreshControl;
+    const scrollViewRef = this._scrollView.getForwardingRef(
+      this.props.scrollViewRef,
+    );
 
     if (refreshControl) {
       if (Platform.OS === 'ios') {
         // On iOS the RefreshControl is a child of the ScrollView.
         return (
-          <NativeDirectionalScrollView {...props} ref={this._setNativeRef}>
+          <NativeDirectionalScrollView {...props} ref={scrollViewRef}>
             {refreshControl}
             {contentContainer}
           </NativeDirectionalScrollView>
@@ -1818,6 +1836,7 @@ class ScrollView extends React.Component<Props, State> {
         // AndroidSwipeRefreshLayout and use flex: 1 for the ScrollView.
         // Note: we should split props.style on the inner and outer props
         // however, the ScrollView still needs the baseStyle to be scrollable
+        // $FlowFixMe[underconstrained-implicit-instantiation]
         const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
         return React.cloneElement(
           refreshControl,
@@ -1825,14 +1844,14 @@ class ScrollView extends React.Component<Props, State> {
           <NativeDirectionalScrollView
             {...props}
             style={StyleSheet.compose(baseStyle, inner)}
-            ref={this._setNativeRef}>
+            ref={scrollViewRef}>
             {contentContainer}
           </NativeDirectionalScrollView>,
         );
       }
     }
     return (
-      <NativeDirectionalScrollView {...props} ref={this._setNativeRef}>
+      <NativeDirectionalScrollView {...props} ref={scrollViewRef}>
         {contentContainer}
       </NativeDirectionalScrollView>
     );
@@ -1857,6 +1876,48 @@ const styles = StyleSheet.create({
   },
 });
 
+type ForwardedRef<T> = {current: null | T, ...} | ((null | T) => mixed);
+
+type RefForwarder<TNativeInstance, TPublicInstance> = {
+  getForwardingRef: (
+    ?ForwardedRef<TPublicInstance>,
+  ) => (TNativeInstance | null) => void,
+  nativeInstance: TNativeInstance | null,
+  publicInstance: TPublicInstance | null,
+};
+
+/**
+ * Helper function that should be replaced with `useCallback` and `useMergeRefs`
+ * once `ScrollView` is reimplemented as a functional component.
+ */
+function createRefForwarder<TNativeInstance, TPublicInstance>(
+  mutator: TNativeInstance => TPublicInstance,
+): RefForwarder<TNativeInstance, TPublicInstance> {
+  const state: RefForwarder<TNativeInstance, TPublicInstance> = {
+    getForwardingRef: memoize(forwardedRef => {
+      return (nativeInstance: TNativeInstance | null): void => {
+        const publicInstance =
+          nativeInstance == null ? null : mutator(nativeInstance);
+
+        state.nativeInstance = nativeInstance;
+        state.publicInstance = publicInstance;
+
+        if (forwardedRef != null) {
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(publicInstance);
+          } else {
+            forwardedRef.current = publicInstance;
+          }
+        }
+      };
+    }),
+    nativeInstance: null,
+    publicInstance: null,
+  };
+
+  return state;
+}
+
 /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
  * LTI update could not be added via codemod */
 function Wrapper(props, ref: (mixed => mixed) | {current: mixed, ...}) {
@@ -1872,9 +1933,6 @@ ForwardedScrollView.displayName = 'ScrollView';
 
 module.exports = ((ForwardedScrollView: $FlowFixMe): React.AbstractComponent<
   React.ElementConfig<typeof ScrollView>,
-  $ReadOnly<{|
-    ...$Exact<React.ElementRef<HostComponent<mixed>>>,
-    ...ScrollViewImperativeMethods,
-  |}>,
+  PublicScrollViewInstance,
 > &
   ScrollViewComponentStatics);