@office-iss/react-native-win32 0.84.0-preview.2 → 0.85.0-preview.1

package/Libraries/Components/EnterString.win32.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnterString.win32.js","sourceRoot":"","sources":["../../src-win/Libraries/Components/EnterString.win32.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,YAAY,CAAC;;;;;AAEb,+CAA4E;AAC5E,kDAAyB;AACzB,wCAAyC;AAuBzC,MAAM,iBAAkB,SAAQ,eAAK,CAAC,SAAsC;IAmDnE,MAAM;QACX,OAAO,8BAAC,cAAc,OAAK,IAAI,CAAC,KAAK,GAAI,CAAC;IAC5C,CAAC;;AApDD,gCAAgC;AAEhC;;;GAGG;AACH;;;;;;;;;;EAUE;AAEH,8CAA8C;AAC/B,2BAAS,GAAQ;IAC7B,mDAAmD;IACnD,qBAAqB;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,MAAM;IAEvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,IAAI;IAExB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,MAAM;IAEvB;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,IAAI;CAC1B,CAAC;AAEY,8BAAY,GAA4B;IACpD,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC;AAOJ,MAAM,cAAc,GAAG,IAAA,qCAAsB,EAAC,gBAAgB,CAAC,CAAC;AAEhE,MAAqB,WAAY,SAAQ,eAAK,CAAC,SAAgC;IAQtE,MAAM;QACX,MAAM,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnD,CAAC,6CAA6C;QAE/C,OAAO,8BAAC,iBAAiB,OAAM,IAAuC,GAAI,CAAC;IAAE,CAAC;IAExE,gBAAgB,CAAC,KAAsD;QAC7E,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YACxB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAC9C;IACH,CAAC;;AAnBa,wBAAY,GAAsB;IAC9C,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC;kBANiB,WAAW","sourcesContent":["/**\n * @providesModule EnterString\n */\n'use strict';\n\nimport { requireNativeComponent, NativeSyntheticEvent } from 'react-native';\nimport React from 'react'\nimport PropTypes = require('prop-types');\n\nexport interface IEnterStringProps /*extends React.ClassAttributes<React.View>*/ {\n  // ViewProperties {\n  disabled?: boolean;\n  value?: string;\n  label?: string;\n  onChanged?: (newValue: string) => void;\n}\n\ninterface INativeOnChangedEventArgs {\n  text: string;\n}\n\n// Same as EnterStringProps, but the event args are objects\ninterface IEnterStringNativeProps /*extends React.ClassAttributes<React.View>*/ {\n  // ViewProperties {\n  disabled?: boolean;\n  value?: string;\n  label?: string;\n  onChanged?: (event: NativeSyntheticEvent<INativeOnChangedEventArgs>) => void;\n}\n\nclass EnterStringNative extends React.Component<IEnterStringNativeProps, {}> {\n  // mixins: [NativeMethodsMixin],\n\n  /**\n   * `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We\n   * make `this` look like an actual native component class.\n   */\n  /*\n  viewConfig: {\n    uiViewClassName: 'RCTEnterString',\n    validAttributes: {\n        ...ReactNativeViewAttributes.RCTView,\n        text: true,\n        disabled: true,\n        label: true,\n    },\n  },\n  */\n\n // TODO figure out how to get a real type here\n  public static propTypes: any = {\n    // React.ValidationMap<IEnterStringNativeProps> = {\n    // ...View.propTypes,\n    /**\n     * Text to display inside the EnterString\n     */\n    value: PropTypes.string,\n\n    /**\n     * If true, disable all interactions for this component.\n     */\n    disabled: PropTypes.bool,\n\n    /**\n     * Label\n     */\n    label: PropTypes.string,\n\n    /**\n     * Callback when text is changed\n     */\n    onChanged: PropTypes.func,\n  };\n\n  public static DefaultProps: IEnterStringNativeProps = {\n    disabled: false,\n    value: '',\n    label: '',\n    onChanged: null,\n  };\n\n  public render() {\n    return <RCTEnterString {...this.props} />;\n  }\n}\n\nconst RCTEnterString = requireNativeComponent('RCTEnterString');\n\nexport default class EnterString extends React.Component<IEnterStringProps, {}> {\n  public static DefaultProps: IEnterStringProps = {\n    disabled: false,\n    value: '',\n    label: '',\n    onChanged: null,\n  };\n\n  public render() {\n    const args = { ...this.props };\n    if (args.onChanged) {\n      args.onChanged = this._onChangedNative.bind(this);\n    } // TODO how should this work without the cast\n\n    return <EnterStringNative {...(args as any) as IEnterStringNativeProps} />;  }\n\n  private _onChangedNative(event: NativeSyntheticEvent<INativeOnChangedEventArgs>) {\n    if (this.props.onChanged) {\n      this.props.onChanged(event.nativeEvent.text);\n    }\n  }\n}\n"]}
+{"version":3,"file":"EnterString.win32.js","sourceRoot":"","sources":["../../src-win/Libraries/Components/EnterString.win32.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,YAAY,CAAC;;;;;AAEb,+CAA4E;AAC5E,kDAAyB;AACzB,wCAAyC;AAuBzC,MAAM,iBAAkB,SAAQ,eAAK,CAAC,SAAsC;IAmDnE,MAAM;QACX,OAAO,8BAAC,cAAc,OAAK,IAAI,CAAC,KAAK,GAAI,CAAC;IAC5C,CAAC;;AApDD,gCAAgC;AAEhC;;;GAGG;AACH;;;;;;;;;;EAUE;AAEH,8CAA8C;AAC/B,2BAAS,GAAQ;IAC7B,mDAAmD;IACnD,qBAAqB;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,MAAM;IAEvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,IAAI;IAExB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,MAAM;IAEvB;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,IAAI;CAC1B,CAAC;AAEY,8BAAY,GAA4B;IACpD,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,SAAS;CACrB,CAAC;AAOJ,MAAM,cAAc,GAAG,IAAA,qCAAsB,EAAC,gBAAgB,CAAC,CAAC;AAEhE,MAAqB,WAAY,SAAQ,eAAK,CAAC,SAAgC;IAQtE,MAAM;QACX,MAAM,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnD,CAAC,6CAA6C;QAE/C,OAAO,8BAAC,iBAAiB,OAAM,IAAuC,GAAI,CAAC;IAAE,CAAC;IAExE,gBAAgB,CAAC,KAAsD;QAC7E,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YACxB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAC9C;IACH,CAAC;;AAnBa,wBAAY,GAAsB;IAC9C,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,SAAS;CACrB,CAAC;kBANiB,WAAW","sourcesContent":["/**\n * @providesModule EnterString\n */\n'use strict';\n\nimport { requireNativeComponent, NativeSyntheticEvent } from 'react-native';\nimport React from 'react'\nimport PropTypes = require('prop-types');\n\nexport interface IEnterStringProps /*extends React.ClassAttributes<React.View>*/ {\n  // ViewProperties {\n  disabled?: boolean;\n  value?: string;\n  label?: string;\n  onChanged?: (newValue: string) => void;\n}\n\ninterface INativeOnChangedEventArgs {\n  text: string;\n}\n\n// Same as EnterStringProps, but the event args are objects\ninterface IEnterStringNativeProps /*extends React.ClassAttributes<React.View>*/ {\n  // ViewProperties {\n  disabled?: boolean;\n  value?: string;\n  label?: string;\n  onChanged?: (event: NativeSyntheticEvent<INativeOnChangedEventArgs>) => void;\n}\n\nclass EnterStringNative extends React.Component<IEnterStringNativeProps, {}> {\n  // mixins: [NativeMethodsMixin],\n\n  /**\n   * `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We\n   * make `this` look like an actual native component class.\n   */\n  /*\n  viewConfig: {\n    uiViewClassName: 'RCTEnterString',\n    validAttributes: {\n        ...ReactNativeViewAttributes.RCTView,\n        text: true,\n        disabled: true,\n        label: true,\n    },\n  },\n  */\n\n // TODO figure out how to get a real type here\n  public static propTypes: any = {\n    // React.ValidationMap<IEnterStringNativeProps> = {\n    // ...View.propTypes,\n    /**\n     * Text to display inside the EnterString\n     */\n    value: PropTypes.string,\n\n    /**\n     * If true, disable all interactions for this component.\n     */\n    disabled: PropTypes.bool,\n\n    /**\n     * Label\n     */\n    label: PropTypes.string,\n\n    /**\n     * Callback when text is changed\n     */\n    onChanged: PropTypes.func,\n  };\n\n  public static DefaultProps: IEnterStringNativeProps = {\n    disabled: false,\n    value: '',\n    label: '',\n    onChanged: undefined,\n  };\n\n  public render() {\n    return <RCTEnterString {...this.props} />;\n  }\n}\n\nconst RCTEnterString = requireNativeComponent('RCTEnterString');\n\nexport default class EnterString extends React.Component<IEnterStringProps, {}> {\n  public static DefaultProps: IEnterStringProps = {\n    disabled: false,\n    value: '',\n    label: '',\n    onChanged: undefined,\n  };\n\n  public render() {\n    const args = { ...this.props };\n    if (args.onChanged) {\n      args.onChanged = this._onChangedNative.bind(this);\n    } // TODO how should this work without the cast\n\n    return <EnterStringNative {...(args as any) as IEnterStringNativeProps} />;  }\n\n  private _onChangedNative(event: NativeSyntheticEvent<INativeOnChangedEventArgs>) {\n    if (this.props.onChanged) {\n      this.props.onChanged(event.nativeEvent.text);\n    }\n  }\n}\n"]}

package/Libraries/Components/Keyboard/Keyboard.js

@@ -16,7 +16,7 @@ import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
 import NativeKeyboardObserver from './NativeKeyboardObserver';
 
-export type KeyboardEventName = $Keys<KeyboardEventDefinitions>;
+export type KeyboardEventName = keyof KeyboardEventDefinitions;
 
 export type KeyboardEventEasing =
   | 'easeIn'
@@ -25,7 +25,7 @@ export type KeyboardEventEasing =
   | 'linear'
   | 'keyboard';
 
-export type KeyboardMetrics = $ReadOnly<{
+export type KeyboardMetrics = Readonly<{
   screenX: number,
   screenY: number,
   width: number,
@@ -40,13 +40,13 @@ type BaseKeyboardEvent = {
   endCoordinates: KeyboardMetrics,
 };
 
-export type AndroidKeyboardEvent = $ReadOnly<{
+export type AndroidKeyboardEvent = Readonly<{
   ...BaseKeyboardEvent,
   duration: 0,
   easing: 'keyboard',
 }>;
 
-export type IOSKeyboardEvent = $ReadOnly<{
+export type IOSKeyboardEvent = Readonly<{
   ...BaseKeyboardEvent,
   startCoordinates: KeyboardMetrics,
   isEventFromThisApp: boolean,
@@ -146,7 +146,7 @@ class KeyboardImpl {
    *
    * @param {function} callback function to be called when the event fires.
    */
-  addListener<K: $Keys<KeyboardEventDefinitions>>(
+  addListener<K: keyof KeyboardEventDefinitions>(
     eventType: K,
     listener: (...KeyboardEventDefinitions[K]) => unknown,
     context?: unknown,
@@ -159,7 +159,7 @@ class KeyboardImpl {
    *
    * @param {string} eventType The native event string listeners are watching which will be removed.
    */
-  removeAllListeners<K: $Keys<KeyboardEventDefinitions>>(eventType: ?K): void {
+  removeAllListeners<K: keyof KeyboardEventDefinitions>(eventType: ?K): void {
     this._emitter.removeAllListeners(eventType);
   }
 

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -26,7 +26,7 @@ import Keyboard from './Keyboard';
 import * as React from 'react';
 import {createRef} from 'react';
 
-export type KeyboardAvoidingViewProps = $ReadOnly<{
+export type KeyboardAvoidingViewProps = Readonly<{
   ...ViewProps,
 
   /**

package/Libraries/Components/LayoutConformance/LayoutConformance.js

@@ -12,7 +12,7 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import LayoutConformanceNativeComponent from './LayoutConformanceNativeComponent';
 import * as React from 'react';
 
-export type LayoutConformanceProps = $ReadOnly<{
+export type LayoutConformanceProps = Readonly<{
   /**
    * strict: Layout in accordance with W3C spec, even when breaking
    * compatibility: Layout with the same behavior as previous versions of React Native

package/Libraries/Components/LayoutConformance/LayoutConformanceNativeComponent.js

@@ -13,7 +13,7 @@ import type {ViewProps} from '../View/ViewPropTypes';
 
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   mode: 'strict' | 'compatibility',
   ...ViewProps,
 }>;

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

@@ -55,6 +55,11 @@ export interface PressableProps
    */
   onPressIn?: null | ((event: GestureResponderEvent) => void) | undefined;
 
+  /**
+   * Called when the press location moves.
+   */
+  onPressMove?: null | ((event: GestureResponderEvent) => void) | undefined;
+
   /**
    * Called when a touch is released before `onPress`.
    */

package/Libraries/Components/Pressable/Pressable.js

@@ -29,11 +29,11 @@ import {memo, useMemo, useRef, useState} from 'react';
 
 export type {PressableAndroidRippleConfig};
 
-export type PressableStateCallbackType = $ReadOnly<{
+export type PressableStateCallbackType = Readonly<{
   pressed: boolean,
 }>;
 
-type PressableBaseProps = $ReadOnly<{
+type PressableBaseProps = Readonly<{
   /**
    * Whether a press gesture can be interrupted by a parent gesture such as a
    * scroll event. Defaults to true.
@@ -156,7 +156,7 @@ type PressableBaseProps = $ReadOnly<{
   unstable_pressDelay?: ?number,
 }>;
 
-export type PressableProps = $ReadOnly<{
+export type PressableProps = Readonly<{
   // Pressability may override `onMouseEnter` and `onMouseLeave` to
   // implement `onHoverIn` and `onHoverOut` in a platform-agnostic way.
   // Hover events should be used instead of mouse events.

package/Libraries/Components/Pressable/Pressable.win32.js

@@ -36,11 +36,11 @@ import View from '../View/View';
 
 export type {PressableAndroidRippleConfig};
 
-export type PressableStateCallbackType = $ReadOnly<{
+export type PressableStateCallbackType = Readonly<{
   pressed: boolean,
 }>;
 
-type PressableBaseProps = $ReadOnly<{
+type PressableBaseProps = Readonly<{
   /**
    * Whether a press gesture can be interrupted by a parent gesture such as a
    * scroll event. Defaults to true.
@@ -203,7 +203,7 @@ type PressableBaseProps = $ReadOnly<{
   unstable_pressDelay?: ?number,
 }>;
 
-export type PressableProps = $ReadOnly<{
+export type PressableProps = Readonly<{
   // Pressability may override `onMouseEnter` and `onMouseLeave` to
   // implement `onHoverIn` and `onHoverOut` in a platform-agnostic way.
   // Hover events should be used instead of mouse events.

package/Libraries/Components/Pressable/useAndroidRippleForView.js

@@ -19,7 +19,7 @@ import invariant from 'invariant';
 import * as React from 'react';
 import {useMemo} from 'react';
 
-type NativeBackgroundProp = $ReadOnly<{
+type NativeBackgroundProp = Readonly<{
   type: 'RippleAndroid',
   color: ?number,
   borderless: boolean,
@@ -40,13 +40,13 @@ export type PressableAndroidRippleConfig = {
 export default function useAndroidRippleForView(
   rippleConfig: ?PressableAndroidRippleConfig,
   viewRef: {current: null | React.ElementRef<typeof View>},
-): ?$ReadOnly<{
+): ?Readonly<{
   onPressIn: (event: GestureResponderEvent) => void,
   onPressMove: (event: GestureResponderEvent) => void,
   onPressOut: (event: GestureResponderEvent) => void,
   viewProps:
-    | $ReadOnly<{nativeBackgroundAndroid: NativeBackgroundProp}>
-    | $ReadOnly<{nativeForegroundAndroid: NativeBackgroundProp}>,
+    | Readonly<{nativeBackgroundAndroid: NativeBackgroundProp}>
+    | Readonly<{nativeForegroundAndroid: NativeBackgroundProp}>,
 }> {
   const {color, borderless, radius, foreground} = rippleConfig ?? {};
 

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js

@@ -21,7 +21,7 @@ export type {ProgressBarAndroidProps};
 // of ProgressBarAndroidProps. TS's Omit does not distribute over unions, so
 // we define our own version which does. This does not affect Flow.
 // $FlowExpectedError[unclear-type]
-type Omit<T, K> = T extends any ? Pick<T, Exclude<$Keys<T>, K>> : T;
+type Omit<T, K> = T extends any ? Pick<T, Exclude<keyof T, K>> : T;
 
 /**
  * ProgressBarAndroid has been extracted from react-native core and will be removed in a future release.

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroidTypes.js

@@ -35,7 +35,7 @@ type IndeterminateProgressBarAndroidStyleAttrProp = {
   indeterminate: true,
 };
 
-type ProgressBarAndroidBaseProps = $ReadOnly<{
+type ProgressBarAndroidBaseProps = Readonly<{
   /**
    * Whether to show the ProgressBar (true, the default) or hide it (false).
    */
@@ -51,12 +51,12 @@ type ProgressBarAndroidBaseProps = $ReadOnly<{
 }>;
 
 export type ProgressBarAndroidProps =
-  | $ReadOnly<{
+  | Readonly<{
       ...ViewProps,
       ...ProgressBarAndroidBaseProps,
       ...DeterminateProgressBarAndroidStyleAttrProp,
     }>
-  | $ReadOnly<{
+  | Readonly<{
       ...ViewProps,
       ...ProgressBarAndroidBaseProps,
       ...IndeterminateProgressBarAndroidStyleAttrProp,

package/Libraries/Components/RefreshControl/RefreshControl.js

@@ -21,7 +21,7 @@ import * as React from 'react';
 
 const Platform = require('../../Utilities/Platform').default;
 
-export type RefreshControlPropsIOS = $ReadOnly<{
+export type RefreshControlPropsIOS = Readonly<{
   /**
    * The color of the refresh indicator.
    */
@@ -36,7 +36,7 @@ export type RefreshControlPropsIOS = $ReadOnly<{
   title?: ?string,
 }>;
 
-export type RefreshControlPropsAndroid = $ReadOnly<{
+export type RefreshControlPropsAndroid = Readonly<{
   /**
    * Whether the pull to refresh functionality is enabled.
    */
@@ -44,7 +44,7 @@ export type RefreshControlPropsAndroid = $ReadOnly<{
   /**
    * The colors (at least one) that will be used to draw the refresh indicator.
    */
-  colors?: ?$ReadOnlyArray<ColorValue>,
+  colors?: ?ReadonlyArray<ColorValue>,
   /**
    * The background color of the refresh indicator.
    */
@@ -55,7 +55,7 @@ export type RefreshControlPropsAndroid = $ReadOnly<{
   size?: ?('default' | 'large'),
 }>;
 
-type RefreshControlBaseProps = $ReadOnly<{
+type RefreshControlBaseProps = Readonly<{
   /**
    * Called when the view starts refreshing.
    */
@@ -72,7 +72,7 @@ type RefreshControlBaseProps = $ReadOnly<{
   progressViewOffset?: ?number,
 }>;
 
-export type RefreshControlProps = $ReadOnly<{
+export type RefreshControlProps = Readonly<{
   ...ViewProps,
   ...RefreshControlPropsIOS,
   ...RefreshControlPropsAndroid,

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -13,6 +13,7 @@ import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
 
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
+import {colorAttribute} from '../View/ReactNativeStyleAttributes';
 
 export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   uiViewClassName: 'AndroidHorizontalScrollView',
@@ -22,7 +23,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     decelerationRate: true,
     disableIntervalMomentum: true,
     maintainVisibleContentPosition: true,
-    endFillColor: {process: require('../../StyleSheet/processColor').default},
+    endFillColor: colorAttribute,
     fadingEdgeLength: true,
     nestedScrollEnabled: true,
     overScrollMode: true,
@@ -44,21 +45,16 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     borderBottomRightRadius: true,
     borderRadius: true,
     borderStyle: true,
-    borderRightColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
-    borderColor: {process: require('../../StyleSheet/processColor').default},
-    borderBottomColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
+    borderRightColor: colorAttribute,
+    borderColor: colorAttribute,
+    borderBottomColor: colorAttribute,
     borderTopLeftRadius: true,
-    borderTopColor: {process: require('../../StyleSheet/processColor').default},
+    borderTopColor: colorAttribute,
     removeClippedSubviews: true,
     borderTopRightRadius: true,
-    borderLeftColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
+    borderLeftColor: colorAttribute,
     pointerEvents: true,
+    scrollsChildToFocus: true,
   },
 };
 

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

@@ -586,6 +586,15 @@ export interface ScrollViewPropsAndroid {
    * Causes the scrollbars not to turn transparent when they are not in use. The default value is false.
    */
   persistentScrollbar?: boolean | undefined;
+
+  /**
+   * When false, the ScrollView will not automatically scroll to a focused child when
+   * the child requests focus. This can be useful when you want to control the scroll
+   * position programmatically. The default value is true.
+   *
+   * @platform android
+   */
+  scrollsChildToFocus?: boolean | undefined;
 }
 
 export interface ScrollViewProps

package/Libraries/Components/ScrollView/ScrollView.js

@@ -174,7 +174,7 @@ export interface PublicScrollViewInstance
 
 type InnerViewInstance = React.ElementRef<typeof View>;
 
-export type ScrollViewPropsIOS = $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
@@ -330,7 +330,7 @@ export type ScrollViewPropsIOS = $ReadOnly<{
   ),
 }>;
 
-export type ScrollViewPropsAndroid = $ReadOnly<{
+export type ScrollViewPropsAndroid = Readonly<{
   /**
    * Enables nested scrolling for Android API level 21+.
    * Nested scrolling is supported by default on iOS
@@ -388,14 +388,22 @@ export type ScrollViewPropsAndroid = $ReadOnly<{
    * @platform android
    */
   fadingEdgeLength?: ?number | {start: number, end: number},
+  /**
+   * When false, the ScrollView will not automatically scroll to a focused child when
+   * the child requests focus. This can be useful when you want to control the scroll
+   * position programmatically. The default value is true.
+   *
+   * @platform android
+   */
+  scrollsChildToFocus?: ?boolean,
 }>;
 
 type StickyHeaderComponentType = component(
-  ref?: React.RefSetter<$ReadOnly<interface {setNextHeaderY: number => void}>>,
+  ref?: React.RefSetter<Readonly<interface {setNextHeaderY: number => void}>>,
   ...ScrollViewStickyHeaderProps
 );
 
-type ScrollViewBaseProps = $ReadOnly<{
+type ScrollViewBaseProps = Readonly<{
   /**
    * These styles will be applied to the scroll view content container which
    * wraps all of the child views. Example:
@@ -514,7 +522,7 @@ type ScrollViewBaseProps = $ReadOnly<{
    * whether content is "visible" or not.
    *
    */
-  maintainVisibleContentPosition?: ?$ReadOnly<{
+  maintainVisibleContentPosition?: ?Readonly<{
     minIndexForVisible: number,
     autoscrollToTopThreshold?: ?number,
   }>,
@@ -591,7 +599,7 @@ type ScrollViewBaseProps = $ReadOnly<{
    * top of the scroll view. This property is not supported in conjunction
    * with `horizontal={true}`.
    */
-  stickyHeaderIndices?: ?$ReadOnlyArray<number>,
+  stickyHeaderIndices?: ?ReadonlyArray<number>,
   /**
    * A React Component that will be used to render sticky headers.
    * To be used together with `stickyHeaderIndices` or with `SectionList`, defaults to `ScrollViewStickyHeader`.
@@ -625,7 +633,7 @@ type ScrollViewBaseProps = $ReadOnly<{
    *
    * Overrides less configurable `pagingEnabled` and `snapToInterval` props.
    */
-  snapToOffsets?: ?$ReadOnlyArray<number>,
+  snapToOffsets?: ?ReadonlyArray<number>,
   /**
    * Use in conjunction with `snapToOffsets`. By default, the beginning
    * of the list counts as a snap offset. Set `snapToStart` to false to disable
@@ -673,7 +681,7 @@ type ScrollViewBaseProps = $ReadOnly<{
   scrollViewRef?: React.RefSetter<PublicScrollViewInstance>,
 }>;
 
-export type ScrollViewProps = $ReadOnly<{
+export type ScrollViewProps = Readonly<{
   ...Omit<ViewProps, 'experimental_accessibilityOrder'>,
   ...ScrollViewPropsIOS,
   ...ScrollViewPropsAndroid,
@@ -686,7 +694,7 @@ type ScrollViewState = {
 
 const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
 
-export type ScrollViewComponentStatics = $ReadOnly<{
+export type ScrollViewComponentStatics = Readonly<{
   Context: typeof ScrollViewContext,
 }>;
 
@@ -1850,6 +1858,8 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
           {style: StyleSheet.compose(baseStyle, outer)},
           <NativeScrollView
             {...props}
+            // Nested scroll should always be enabled to allow the child scroll view to handle events before passing them to the refresh control parent
+            nestedScrollEnabled={props.nestedScrollEnabled ?? true}
             style={StyleSheet.compose(baseStyle, inner)}
             // $FlowFixMe[incompatible-type] - Flow only knows element refs.
             ref={scrollViewRef}>

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -15,6 +15,7 @@ import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentTy
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfigIgnore';
 import Platform from '../../Utilities/Platform';
+import {colorAttribute} from '../View/ReactNativeStyleAttributes';
 
 export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
   Platform.OS === 'android'
@@ -60,34 +61,23 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           nestedScrollEnabled: true,
           scrollEventThrottle: true,
           borderStyle: true,
-          borderRightColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderBottomColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
+          borderRightColor: colorAttribute,
+          borderColor: colorAttribute,
+          borderBottomColor: colorAttribute,
           persistentScrollbar: true,
           horizontal: true,
-          endFillColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
+          endFillColor: colorAttribute,
           fadingEdgeLength: true,
           overScrollMode: true,
           borderTopLeftRadius: true,
           scrollPerfTag: true,
-          borderTopColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
+          borderTopColor: colorAttribute,
           removeClippedSubviews: true,
           borderTopRightRadius: true,
-          borderLeftColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
+          borderLeftColor: colorAttribute,
           pointerEvents: true,
           isInvertedVirtualizedList: true,
+          scrollsChildToFocus: true,
         },
       }
     : {

package/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js

@@ -19,7 +19,7 @@ import type {
 } from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
-export type ScrollViewNativeProps = $ReadOnly<{
+export type ScrollViewNativeProps = Readonly<{
   ...ViewProps,
   alwaysBounceHorizontal?: ?boolean,
   alwaysBounceVertical?: ?boolean,
@@ -46,7 +46,7 @@ export type ScrollViewNativeProps = $ReadOnly<{
   indicatorStyle?: ?('default' | 'black' | 'white'),
   isInvertedVirtualizedList?: ?boolean,
   keyboardDismissMode?: ?('none' | 'on-drag' | 'interactive'),
-  maintainVisibleContentPosition?: ?$ReadOnly<{
+  maintainVisibleContentPosition?: ?Readonly<{
     minIndexForVisible: number,
     autoscrollToTopThreshold?: ?number,
   }>,
@@ -69,13 +69,14 @@ export type ScrollViewNativeProps = $ReadOnly<{
   scrollPerfTag?: ?string,
   scrollToOverflowEnabled?: ?boolean,
   scrollsToTop?: ?boolean,
+  scrollsChildToFocus?: ?boolean,
   sendMomentumEvents?: ?boolean,
   showsHorizontalScrollIndicator?: ?boolean,
   showsVerticalScrollIndicator?: ?boolean,
   snapToAlignment?: ?('start' | 'center' | 'end'),
   snapToEnd?: ?boolean,
   snapToInterval?: ?number,
-  snapToOffsets?: ?$ReadOnlyArray<number>,
+  snapToOffsets?: ?ReadonlyArray<number>,
   snapToStart?: ?boolean,
   zoomScale?: ?number,
   // Overrides

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -25,7 +25,7 @@ import {
   useState,
 } from 'react';
 
-export type ScrollViewStickyHeaderProps = $ReadOnly<{
+export type ScrollViewStickyHeaderProps = Readonly<{
   children?: React.Node,
   nextHeaderLayoutY: ?number,
   onLayout: (event: LayoutChangeEvent) => void,

package/Libraries/Components/StaticRenderer.js

@@ -12,7 +12,7 @@
 
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   /**
    * Indicates whether the render function needs to be called again
    */

package/Libraries/Components/StatusBar/StatusBar.js

@@ -20,7 +20,7 @@ import * as React from 'react';
 /**
  * Status bar style
  */
-export type StatusBarStyle = $Keys<{
+export type StatusBarStyle = keyof {
   /**
    * Default status bar style (dark for iOS, light for Android)
    */
@@ -34,12 +34,12 @@ export type StatusBarStyle = $Keys<{
    */
   'dark-content': string,
   ...
-}>;
+};
 
 /**
  * Status bar animation
  */
-export type StatusBarAnimation = $Keys<{
+export type StatusBarAnimation = keyof {
   /**
    * No animation
    */
@@ -53,9 +53,9 @@ export type StatusBarAnimation = $Keys<{
    */
   slide: string,
   ...
-}>;
+};
 
-export type StatusBarPropsAndroid = $ReadOnly<{
+export type StatusBarPropsAndroid = Readonly<{
   /**
    * The background color of the status bar.
    *
@@ -76,7 +76,7 @@ export type StatusBarPropsAndroid = $ReadOnly<{
   translucent?: ?boolean,
 }>;
 
-export type StatusBarPropsIOS = $ReadOnly<{
+export type StatusBarPropsIOS = Readonly<{
   /**
    * If the network activity indicator should be visible.
    *
@@ -92,7 +92,7 @@ export type StatusBarPropsIOS = $ReadOnly<{
   showHideTransition?: ?('fade' | 'slide' | 'none'),
 }>;
 
-type StatusBarBaseProps = $ReadOnly<{
+type StatusBarBaseProps = Readonly<{
   /**
    * If the status bar is hidden.
    */
@@ -108,7 +108,7 @@ type StatusBarBaseProps = $ReadOnly<{
   barStyle?: ?('default' | 'light-content' | 'dark-content'),
 }>;
 
-export type StatusBarProps = $ReadOnly<{
+export type StatusBarProps = Readonly<{
   ...StatusBarPropsAndroid,
   ...StatusBarPropsIOS,
   ...StatusBarBaseProps,

package/Libraries/Components/Switch/Switch.js

@@ -48,7 +48,7 @@ export type SwitchPropsIOS = {
   tintColor?: ?ColorValue,
 };
 
-type SwitchChangeEventData = $ReadOnly<{
+type SwitchChangeEventData = Readonly<{
   target: number,
   value: boolean,
 }>;
@@ -82,7 +82,7 @@ type SwitchPropsBase = {
       color of the background exposed by the shrunken track, use
        [`ios_backgroundColor`](https://reactnative.dev/docs/switch#ios_backgroundColor).
      */
-  trackColor?: ?$ReadOnly<{
+  trackColor?: ?Readonly<{
     false?: ?ColorValue,
     true?: ?ColorValue,
   }>,
@@ -109,7 +109,7 @@ type SwitchPropsBase = {
   onValueChange?: ?(value: boolean) => Promise<void> | void,
 };
 
-export type SwitchProps = $ReadOnly<{
+export type SwitchProps = Readonly<{
   ...ViewProps,
   ...SwitchPropsIOS,
   ...SwitchPropsBase,