@office-iss/react-native-win32 0.0.0-canary.286 → 0.0.0-canary.288

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js

@@ -10,9 +10,15 @@
 
 'use strict';
 
-import typeof UnimplementedViewType from '../UnimplementedViews/UnimplementedView';
 import typeof ProgressBarAndroidNativeComponentType from './ProgressBarAndroidNativeComponent';
+import type {ProgressBarAndroidProps} from './ProgressBarAndroidTypes';
 
-export default require('../UnimplementedViews/UnimplementedView').default as
-  | UnimplementedViewType
-  | ProgressBarAndroidNativeComponentType;
+export type {ProgressBarAndroidProps};
+
+export default require('../UnimplementedViews/UnimplementedView')
+  .default as $FlowFixMe as component(
+  ref?: React.RefSetter<
+    React.ElementRef<ProgressBarAndroidNativeComponentType>,
+  >,
+  ...props: ProgressBarAndroidProps
+);

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroidTypes.js

@@ -0,0 +1,54 @@
+/**
+ * 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
+ */
+
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {ViewProps} from '../View/ViewPropTypes';
+
+/**
+ * Style of the ProgressBar and whether it shows indeterminate progress (e.g. spinner).
+ *
+ * `indeterminate` can only be false if `styleAttr` is Horizontal, and requires a
+ * `progress` value.
+ */
+type ProgressBarAndroidStyleAttrProp =
+  | {
+      styleAttr: 'Horizontal',
+      indeterminate: false,
+      progress: number,
+    }
+  | {
+      styleAttr:
+        | 'Horizontal'
+        | 'Normal'
+        | 'Small'
+        | 'Large'
+        | 'Inverse'
+        | 'SmallInverse'
+        | 'LargeInverse',
+      indeterminate: true,
+    };
+
+export type ProgressBarAndroidProps = $ReadOnly<{
+  ...ViewProps,
+  ...ProgressBarAndroidStyleAttrProp,
+
+  /**
+   * Whether to show the ProgressBar (true, the default) or hide it (false).
+   */
+  animating?: ?boolean,
+  /**
+   * Color of the progress bar.
+   */
+  color?: ?ColorValue,
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: ?string,
+}>;

package/Libraries/Components/RefreshControl/RefreshControl.js

@@ -21,7 +21,7 @@ import React from 'react';
 
 const Platform = require('../../Utilities/Platform').default;
 
-type IOSProps = $ReadOnly<{
+export type RefreshControlPropsIOS = $ReadOnly<{
   /**
    * The color of the refresh indicator.
    */
@@ -36,7 +36,7 @@ type IOSProps = $ReadOnly<{
   title?: ?string,
 }>;
 
-type AndroidProps = $ReadOnly<{
+export type RefreshControlPropsAndroid = $ReadOnly<{
   /**
    * Whether the pull to refresh functionality is enabled.
    */
@@ -55,11 +55,7 @@ type AndroidProps = $ReadOnly<{
   size?: ?('default' | 'large'),
 }>;
 
-export type RefreshControlProps = $ReadOnly<{
-  ...ViewProps,
-  ...IOSProps,
-  ...AndroidProps,
-
+type RefreshControlBaseProps = $ReadOnly<{
   /**
    * Called when the view starts refreshing.
    */
@@ -76,6 +72,13 @@ export type RefreshControlProps = $ReadOnly<{
   progressViewOffset?: ?number,
 }>;
 
+export type RefreshControlProps = $ReadOnly<{
+  ...ViewProps,
+  ...RefreshControlPropsIOS,
+  ...RefreshControlPropsAndroid,
+  ...RefreshControlBaseProps,
+}>;
+
 /**
  * This component is used inside a ScrollView or ListView to add pull to refresh
  * functionality. When the ScrollView is at `scrollY: 0`, swiping down

package/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js

@@ -9,7 +9,8 @@
  */
 
 'use strict';
-import type {HostComponent} from '../../../Renderer/shims/ReactNativeTypes';
+
+import type {HostComponent} from '../../../../src/private/types/HostComponent';
 
 import requireNativeComponent from '../../../ReactNative/requireNativeComponent';
 import * as React from 'react';

package/Libraries/Components/SafeAreaView/SafeAreaView.js

@@ -24,7 +24,7 @@ import * as React from 'react';
  * sensor housing area on iPhone X).
  */
 const exported: component(
-  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
   ...props: ViewProps
 ) = Platform.select({
   ios: require('./RCTSafeAreaViewNativeComponent').default,

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

@@ -24,7 +24,7 @@ import * as React from 'react';
  * sensor housing area on iPhone X).
  */
 const exported: component(
-  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
   ...props: ViewProps
 ) = Platform.select({
   ios: require('./RCTSafeAreaViewNativeComponent').default,

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -8,10 +8,8 @@
  * @format
  */
 
-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
+import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
 
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';

package/Libraries/Components/ScrollView/ScrollContentViewNativeComponent.js

@@ -8,10 +8,8 @@
  * @flow strict-local
  */
 
-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
+import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps as Props} from '../View/ViewPropTypes';
 
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';

package/Libraries/Components/ScrollView/ScrollView.js

@@ -8,21 +8,21 @@
  * @flow strict-local
  */
 
-import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 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 {
-  LayoutChangeEvent,
   GestureResponderEvent,
+  LayoutChangeEvent,
   ScrollEvent,
 } from '../../Types/CoreEventTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 import type {KeyboardEvent, KeyboardMetrics} from '../Keyboard/Keyboard';
 import typeof View from '../View/View';
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {Props as ScrollViewStickyHeaderProps} from './ScrollViewStickyHeader';
+import type {ScrollViewStickyHeaderProps} from './ScrollViewStickyHeader';
 
 import {
   HScrollContentViewNativeComponent,
@@ -126,34 +126,39 @@ import * as React from 'react';
  *   this.props.onKeyboardDidHide
  */
 
+export interface ScrollViewScrollToOptions {
+  x?: number;
+  y?: number;
+  animated?: boolean;
+}
+
 // Public methods for ScrollView
-export type ScrollViewImperativeMethods = $ReadOnly<{
-  getScrollResponder: $PropertyType<ScrollView, 'getScrollResponder'>,
-  getScrollableNode: $PropertyType<ScrollView, 'getScrollableNode'>,
-  getInnerViewNode: $PropertyType<ScrollView, 'getInnerViewNode'>,
-  getInnerViewRef: $PropertyType<ScrollView, 'getInnerViewRef'>,
-  getNativeScrollRef: $PropertyType<ScrollView, 'getNativeScrollRef'>,
-  scrollTo: $PropertyType<ScrollView, 'scrollTo'>,
-  scrollToEnd: $PropertyType<ScrollView, 'scrollToEnd'>,
-  flashScrollIndicators: $PropertyType<ScrollView, 'flashScrollIndicators'>,
-  scrollResponderZoomTo: $PropertyType<ScrollView, 'scrollResponderZoomTo'>,
-  scrollResponderScrollNativeHandleToKeyboard: $PropertyType<
+export interface ScrollViewImperativeMethods {
+  +getScrollResponder: $PropertyType<ScrollView, 'getScrollResponder'>;
+  +getScrollableNode: $PropertyType<ScrollView, 'getScrollableNode'>;
+  +getInnerViewNode: $PropertyType<ScrollView, 'getInnerViewNode'>;
+  +getInnerViewRef: $PropertyType<ScrollView, 'getInnerViewRef'>;
+  +getNativeScrollRef: $PropertyType<ScrollView, 'getNativeScrollRef'>;
+  +scrollTo: $PropertyType<ScrollView, 'scrollTo'>;
+  +scrollToEnd: $PropertyType<ScrollView, 'scrollToEnd'>;
+  +flashScrollIndicators: $PropertyType<ScrollView, 'flashScrollIndicators'>;
+  +scrollResponderZoomTo: $PropertyType<ScrollView, 'scrollResponderZoomTo'>;
+  +scrollResponderScrollNativeHandleToKeyboard: $PropertyType<
     ScrollView,
     'scrollResponderScrollNativeHandleToKeyboard',
-  >,
-}>;
+  >;
+}
 
 export type DecelerationRateType = 'fast' | 'normal' | number;
 export type ScrollResponderType = ScrollViewImperativeMethods;
 
-type PublicScrollViewInstance = $ReadOnly<{
-  ...HostInstance,
-  ...ScrollViewImperativeMethods,
-}>;
+export interface PublicScrollViewInstance
+  extends HostInstance,
+    ScrollViewImperativeMethods {}
 
 type InnerViewInstance = React.ElementRef<View>;
 
-type IOSProps = $ReadOnly<{
+export type ScrollViewPropsIOS = $ReadOnly<{
   /**
    * Controls whether iOS should automatically adjust the content inset
    * for scroll views that are placed behind a navigation bar or
@@ -309,7 +314,7 @@ type IOSProps = $ReadOnly<{
   ),
 }>;
 
-type AndroidProps = $ReadOnly<{
+export type ScrollViewPropsAndroid = $ReadOnly<{
   /**
    * Enables nested scrolling for Android API level 21+.
    * Nested scrolling is supported by default on iOS
@@ -371,10 +376,10 @@ type StickyHeaderComponentType = component(
   ...ScrollViewStickyHeaderProps
 );
 
-export type Props = $ReadOnly<{
+export type ScrollViewProps = $ReadOnly<{
   ...ViewProps,
-  ...IOSProps,
-  ...AndroidProps,
+  ...ScrollViewPropsIOS,
+  ...ScrollViewPropsAndroid,
 
   /**
    * These styles will be applied to the scroll view content container which
@@ -638,7 +643,7 @@ export type Props = $ReadOnly<{
    */
   /* $FlowFixMe[unclear-type] - how to handle generic type without existential
    * operator? */
-  refreshControl?: ?ExactReactElement_DEPRECATED<any>,
+  refreshControl?: ?React.Node,
   children?: React.Node,
   /**
    * A ref to the inner View element of the ScrollView. This should be used
@@ -698,10 +703,10 @@ export type ScrollViewComponentStatics = $ReadOnly<{
  * multiple columns, infinite scroll loading, or any number of other features it
  * supports out of the box.
  */
-class ScrollView extends React.Component<Props, State> {
+class ScrollView extends React.Component<ScrollViewProps, State> {
   static Context: typeof ScrollViewContext = ScrollViewContext;
 
-  constructor(props: Props) {
+  constructor(props: ScrollViewProps) {
     super(props);
 
     this._scrollAnimatedValue = new AnimatedImplementation.Value(
@@ -779,7 +784,7 @@ class ScrollView extends React.Component<Props, State> {
     this._updateAnimatedNodeAttachment();
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: ScrollViewProps) {
     const prevContentInsetTop = prevProps.contentInset
       ? prevProps.contentInset.top
       : 0;
@@ -851,28 +856,10 @@ class ScrollView extends React.Component<Props, State> {
    * This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.
    */
   scrollTo: (
-    options?:
-      | {
-          x?: number,
-          y?: number,
-          animated?: boolean,
-          ...
-        }
-      | number,
+    options?: ScrollViewScrollToOptions | number,
     deprecatedX?: number,
     deprecatedAnimated?: boolean,
-  ) => void = (
-    options?:
-      | {
-          x?: number,
-          y?: number,
-          animated?: boolean,
-          ...
-        }
-      | number,
-    deprecatedX?: number,
-    deprecatedAnimated?: boolean,
-  ) => {
+  ) => void = (options, deprecatedX, deprecatedAnimated) => {
     let x, y, animated;
     if (typeof options === 'number') {
       console.warn(
@@ -902,9 +889,7 @@ class ScrollView extends React.Component<Props, State> {
    * `scrollToEnd({animated: false})` for immediate scrolling.
    * If no options are passed, `animated` defaults to true.
    */
-  scrollToEnd: (options?: ?{animated?: boolean, ...}) => void = (
-    options?: ?{animated?: boolean, ...},
-  ) => {
+  scrollToEnd: (options?: ?ScrollViewScrollToOptions) => void = options => {
     // Default to true
     const animated = (options && options.animated) !== false;
     const component = this.getNativeScrollRef();
@@ -1502,7 +1487,7 @@ class ScrollView extends React.Component<Props, State> {
         keyboardNeverPersistTaps &&
         this._keyboardIsDismissible() &&
         e.target != null &&
-        // $FlowFixMe[incompatible-call]
+        // $FlowFixMe[incompatible-type]
         !TextInputState.isTextInput(e.target)
       ) {
         return true;
@@ -1814,7 +1799,7 @@ class ScrollView extends React.Component<Props, State> {
       this.props.scrollViewRef,
     );
 
-    if (refreshControl) {
+    if (refreshControl != null) {
       if (Platform.OS === 'ios') {
         // On iOS the RefreshControl is a child of the ScrollView.
         return (
@@ -1830,9 +1815,8 @@ 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]
-        // $FlowFixMe[incompatible-call]
         const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
+        // $FlowFixMe[incompatible-call]
         return React.cloneElement(
           refreshControl,
           {style: StyleSheet.compose(baseStyle, outer)},
@@ -1918,10 +1902,10 @@ function createRefForwarder<TNativeInstance, TPublicInstance>(
 // component and we need to map `ref` to a differently named prop. This can be
 // removed when `ScrollView` is a functional component.
 const Wrapper: component(
-  ref: React.RefSetter<PublicScrollViewInstance>,
-  ...props: Props
+  ref?: React.RefSetter<PublicScrollViewInstance>,
+  ...props: ScrollViewProps
 ) = React.forwardRef(function Wrapper(
-  props: Props,
+  props: ScrollViewProps,
   ref: ?React.RefSetter<PublicScrollViewInstance>,
 ): React.Node {
   return ref == null ? (

package/Libraries/Components/ScrollView/ScrollViewCommands.js

@@ -8,7 +8,7 @@
  * @flow strict-local
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
 import type {Double} from '../../Types/CodegenTypes';
 
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -8,10 +8,8 @@
  * @format
  */
 
-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
+import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
 
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -18,7 +18,7 @@ import useMergeRefs from '../../Utilities/useMergeRefs';
 import * as React from 'react';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
-export type Props = $ReadOnly<{
+export type ScrollViewStickyHeaderProps = $ReadOnly<{
   children?: React.Node,
   nextHeaderLayoutY: ?number,
   onLayout: (event: LayoutChangeEvent) => void,
@@ -32,15 +32,13 @@ export type Props = $ReadOnly<{
   hiddenOnScroll?: ?boolean,
 }>;
 
-type Instance = {
-  ...React.ElementRef<typeof Animated.View>,
-  setNextHeaderY: number => void,
-  ...
-};
+interface Instance extends React.ElementRef<typeof Animated.View> {
+  +setNextHeaderY: number => void;
+}
 
 const ScrollViewStickyHeaderWithForwardedRef: component(
   ref: React.RefSetter<Instance>,
-  ...props: Props
+  ...props: ScrollViewStickyHeaderProps
 ) = React.forwardRef(function ScrollViewStickyHeader(props, forwardedRef) {
   const {
     inverted,
@@ -62,6 +60,7 @@ const ScrollViewStickyHeaderWithForwardedRef: component(
     if (ref == null) {
       return;
     }
+    // $FlowExpectedError[cannot-write]
     ref.setNextHeaderY = setNextHeaderLayoutY;
     setIsFabric(isFabricPublicInstance(ref));
   }, []);

package/Libraries/Components/StatusBar/StatusBar.js

@@ -55,7 +55,7 @@ export type StatusBarAnimation = $Keys<{
   ...
 }>;
 
-type AndroidProps = $ReadOnly<{
+export type StatusBarPropsAndroid = $ReadOnly<{
   /**
    * The background color of the status bar.
    * @platform android
@@ -71,7 +71,7 @@ type AndroidProps = $ReadOnly<{
   translucent?: ?boolean,
 }>;
 
-type IOSProps = $ReadOnly<{
+export type StatusBarPropsIOS = $ReadOnly<{
   /**
    * If the network activity indicator should be visible.
    *
@@ -87,9 +87,7 @@ type IOSProps = $ReadOnly<{
   showHideTransition?: ?('fade' | 'slide' | 'none'),
 }>;
 
-type Props = $ReadOnly<{
-  ...AndroidProps,
-  ...IOSProps,
+type StatusBarBaseProps = $ReadOnly<{
   /**
    * If the status bar is hidden.
    */
@@ -105,22 +103,28 @@ type Props = $ReadOnly<{
   barStyle?: ?('default' | 'light-content' | 'dark-content'),
 }>;
 
+export type StatusBarProps = $ReadOnly<{
+  ...StatusBarPropsAndroid,
+  ...StatusBarPropsIOS,
+  ...StatusBarBaseProps,
+}>;
+
 type StackProps = {
   backgroundColor: ?{
-    value: Props['backgroundColor'],
+    value: StatusBarProps['backgroundColor'],
     animated: boolean,
   },
   barStyle: ?{
-    value: Props['barStyle'],
+    value: StatusBarProps['barStyle'],
     animated: boolean,
   },
-  translucent: Props['translucent'],
+  translucent: StatusBarProps['translucent'],
   hidden: ?{
     value: boolean,
     animated: boolean,
-    transition: Props['showHideTransition'],
+    transition: StatusBarProps['showHideTransition'],
   },
-  networkActivityIndicatorVisible: Props['networkActivityIndicatorVisible'],
+  networkActivityIndicatorVisible: StatusBarProps['networkActivityIndicatorVisible'],
 };
 
 /**
@@ -147,7 +151,7 @@ function mergePropsStack(
  * Returns an object to insert in the props stack from the props
  * and the transition/animation info.
  */
-function createStackEntry(props: Props): StackProps {
+function createStackEntry(props: StatusBarProps): StackProps {
   const animated = props.animated ?? false;
   const showHideTransition = props.showHideTransition ?? 'fade';
   return {
@@ -220,7 +224,7 @@ function createStackEntry(props: Props): StackProps {
  *
  * `currentHeight` (Android only) The height of the status bar.
  */
-class StatusBar extends React.Component<Props> {
+class StatusBar extends React.Component<StatusBarProps> {
   static _propsStack: Array<StackProps> = [];
 
   static _defaultProps: any = createStackEntry({
@@ -309,7 +313,7 @@ class StatusBar extends React.Component<Props> {
    * @param color Background color.
    * @param animated Animate the style change.
    */
-  static setBackgroundColor(color: string, animated?: boolean): void {
+  static setBackgroundColor(color: ColorValue, animated?: boolean): void {
     if (Platform.OS !== 'android') {
       console.warn('`setBackgroundColor` is only available on Android');
       return;
@@ -320,7 +324,7 @@ class StatusBar extends React.Component<Props> {
     const processedColor = processColor(color);
     if (processedColor == null) {
       console.warn(
-        `\`StatusBar.setBackgroundColor\`: Color ${color} parsed to null or undefined`,
+        `\`StatusBar.setBackgroundColor\`: Color ${String(color)} parsed to null or undefined`,
       );
       return;
     }
@@ -351,7 +355,7 @@ class StatusBar extends React.Component<Props> {
    *
    * @param props Object containing the StatusBar props to use in the stack entry.
    */
-  static pushStackEntry(props: any): any {
+  static pushStackEntry(props: StatusBarProps): StackProps {
     const entry = createStackEntry(props);
     StatusBar._propsStack.push(entry);
     StatusBar._updatePropsStack();
@@ -363,7 +367,7 @@ class StatusBar extends React.Component<Props> {
    *
    * @param entry Entry returned from `pushStackEntry`.
    */
-  static popStackEntry(entry: any) {
+  static popStackEntry(entry: StackProps) {
     const index = StatusBar._propsStack.indexOf(entry);
     if (index !== -1) {
       StatusBar._propsStack.splice(index, 1);
@@ -377,7 +381,10 @@ class StatusBar extends React.Component<Props> {
    * @param entry Entry returned from `pushStackEntry` to replace.
    * @param props Object containing the StatusBar props to use in the replacement stack entry.
    */
-  static replaceStackEntry(entry: any, props: any): any {
+  static replaceStackEntry(
+    entry: StackProps,
+    props: StatusBarProps,
+  ): StackProps {
     const newEntry = createStackEntry(props);
     const index = StatusBar._propsStack.indexOf(entry);
     if (index !== -1) {
@@ -400,14 +407,18 @@ class StatusBar extends React.Component<Props> {
   componentWillUnmount() {
     // When a StatusBar is unmounted, remove itself from the stack and update
     // the native bar with the next props.
-    StatusBar.popStackEntry(this._stackEntry);
+    if (this._stackEntry != null) {
+      StatusBar.popStackEntry(this._stackEntry);
+    }
   }
 
   componentDidUpdate() {
-    this._stackEntry = StatusBar.replaceStackEntry(
-      this._stackEntry,
-      this.props,
-    );
+    if (this._stackEntry != null) {
+      this._stackEntry = StatusBar.replaceStackEntry(
+        this._stackEntry,
+        this.props,
+      );
+    }
   }
 
   /**