@office-iss/react-native-win32 0.66.4 → 0.67.0

package/Libraries/Animated/NativeAnimatedHelper.js

@@ -24,7 +24,7 @@ import invariant from 'invariant';
 
 // TODO T69437152 @petetheheat - Delete this fork when Fabric ships to 100%.
 const NativeAnimatedModule =
-  Platform.OS === 'ios' && global.RN$Bridgeless
+  Platform.OS === 'ios' && global.RN$Bridgeless === true
     ? NativeAnimatedTurboModule
     : NativeAnimatedNonTurboModule;
 
@@ -355,7 +355,7 @@ function shouldUseNativeDriver(
           'animated module is missing. Falling back to JS-based animation. To ' +
           'resolve this, add `RCTAnimation` module to this app, or remove ' +
           '`useNativeDriver`. ' +
-          'Make sure to run `pod install` first. Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md',
+          'Make sure to run `bundle exec pod install` first. Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md',
       );
       _warnedMissingNativeAnimated = true;
     }

package/Libraries/Animated/components/AnimatedImage.js

@@ -15,9 +15,9 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent((Image: $FlowFixMe), {
-  collapsable: false,
-}): AnimatedComponentType<
+module.exports = (createAnimatedComponent(
+  (Image: $FlowFixMe),
+): AnimatedComponentType<
   React.ElementConfig<typeof Image>,
   React.ElementRef<typeof Image>,
 >);

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -22,9 +22,9 @@ const ScrollViewWithEventThrottle = React.forwardRef((props, ref) => (
   <ScrollView scrollEventThrottle={0.0001} {...props} ref={ref} />
 ));
 
-module.exports = (createAnimatedComponent(ScrollViewWithEventThrottle, {
-  collapsable: false,
-}): AnimatedComponentType<
+module.exports = (createAnimatedComponent(
+  ScrollViewWithEventThrottle,
+): AnimatedComponentType<
   React.ElementConfig<typeof ScrollView>,
   React.ElementRef<typeof ScrollView>,
 >);

package/Libraries/Animated/components/AnimatedText.js

@@ -15,9 +15,9 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent((Text: $FlowFixMe), {
-  collapsable: false,
-}): AnimatedComponentType<
+module.exports = (createAnimatedComponent(
+  (Text: $FlowFixMe),
+): AnimatedComponentType<
   React.ElementConfig<typeof Text>,
   React.ElementRef<typeof Text>,
 >);

package/Libraries/Animated/components/AnimatedView.js

@@ -15,9 +15,7 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(View, {
-  collapsable: true,
-}): AnimatedComponentType<
+module.exports = (createAnimatedComponent(View): AnimatedComponentType<
   React.ElementConfig<typeof View>,
   React.ElementRef<typeof View>,
 >);

package/Libraries/Animated/createAnimatedComponent.js

@@ -39,13 +39,8 @@ export type AnimatedComponentType<
   Instance,
 >;
 
-type AnimatedComponentOptions = {
-  collapsable?: boolean,
-};
-
 function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
   Component: React.AbstractComponent<Props, Instance>,
-  options?: AnimatedComponentOptions,
 ): AnimatedComponentType<Props, Instance> {
   invariant(
     typeof Component !== 'function' ||
@@ -210,39 +205,13 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
         this.props.passthroughAnimatedPropExplicitValues || {};
       const mergedStyle = {...style, ...passthruStyle};
 
-      // On Fabric, we always want to ensure the container Animated View is *not*
-      // flattened.
-      // Because we do not get a host component ref immediately and thus cannot
-      // do a proper Fabric vs non-Fabric detection immediately, we default to assuming
-      // that Fabric *is* enabled until we know otherwise.
-      // Thus, in Fabric, this view will never be flattened. In non-Fabric, the view will
-      // not be flattened during the initial render but may be flattened in the second render
-      // and onwards.
-      const forceNativeIdFabric =
-        (this._component == null &&
-          (options?.collapsable === false || props.collapsable !== true)) ||
-        this._isFabric();
-
-      const forceNativeId =
-        props.collapsable ??
-        (this._propsAnimated.__isNative ||
-          forceNativeIdFabric ||
-          options?.collapsable === false);
-      // The native driver updates views directly through the UI thread so we
-      // have to make sure the view doesn't get optimized away because it cannot
-      // go through the NativeViewHierarchyManager since it operates on the shadow
-      // thread. TODO: T68258846
-      const collapsableProps = forceNativeId
-        ? {
-            nativeID: props.nativeID ?? 'animatedComponent',
-            collapsable: false,
-          }
-        : {};
+      // Force `collapsable` to be false so that native view is not flattened.
+      // Flattened views cannot be accurately referenced by a native driver.
       return (
         <Component
           {...props}
           {...passthruProps}
-          {...collapsableProps}
+          collapsable={false}
           style={mergedStyle}
           ref={this._setComponentRef}
         />

package/Libraries/Components/Button/ButtonWin32.js

@@ -76,8 +76,8 @@ class ButtonWin32 extends react_1.default.Component {
         if (this.props.color) {
             textProps.style = { color: this.props.color };
         }
-        return (react_1.default.createElement(ViewWin32_1.ViewWin32, Object.assign({}, viewProps),
-            react_1.default.createElement(TextWin32_1.TextWin32, Object.assign({}, textProps), this.props.title)));
+        return (react_1.default.createElement(ViewWin32_1.ViewWin32, { ...viewProps },
+            react_1.default.createElement(TextWin32_1.TextWin32, { ...textProps }, this.props.title)));
     }
 }
 exports.ButtonWin32 = ButtonWin32;

package/Libraries/Components/Button/ButtonWin32.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonWin32.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Button/ButtonWin32.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport RN = require('react-native');\nimport { ViewWin32 } from '../View/ViewWin32';\nimport { IViewWin32Props } from '../View/ViewWin32.Props';\nimport { TextWin32 } from '../Text/TextWin32';\nimport { ITextWin32Props } from '../Text/TextWin32.Props';\nimport { IButtonWin32Props } from './ButtonWin32.Props';\n\nconst enum SelectState {\n  NotSelected,\n  Selected\n}\n\ninterface IButtonWin32State {\n  accessibilityState: RN.AccessibilityState;\n}\n\n/**\n * React-native <Button> control with additional Win32-specific functionality.\n */\nexport class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32State> {\n  constructor(props: IButtonWin32Props) {\n    super(props);\n    this.state = this._makeState(SelectState.NotSelected);\n  }\n\n  public render() {\n    const viewProps: IViewWin32Props = {\n      accessible: true,\n      accessibilityLabel: this.props.accessibilityLabel || this.props.title,\n      accessibilityRole: 'button',\n      accessibilityState: this.state.accessibilityState,\n      focusable: true,\n      onFocus: this._onFocus,\n      onBlur: this._onBlur,\n      onMouseEnter: this.props.onMouseEnter,\n      onMouseLeave: this.props.onMouseLeave,\n      onTouchStart: this.props.onTouchStart,\n      onTouchEnd: this._onTouchEnd,\n      testID: this.props.testID,\n      style: this.props.style as RN.StyleProp<RN.ViewStyle>,\n    };\n\n    const textProps: ITextWin32Props = {\n      textStyle: 'None',\n    };\n    if (this.props.color) {\n      textProps.style = { color: this.props.color };\n    }\n\n    return (\n      <ViewWin32 {...viewProps}>\n        <TextWin32 {...textProps}>{this.props.title}</TextWin32>\n      </ViewWin32>\n    );\n  }\n\n  private readonly _makeState = (select: SelectState): IButtonWin32State => {\n    return {\n      accessibilityState: {\n        disabled: this.props.disabled,\n        selected: select === SelectState.Selected,\n      },\n    };\n  };\n\n  private readonly _setState = (select: SelectState): void => {\n    const state = this._makeState(select);\n    this.setState(state);\n  };\n\n  private readonly _onFocus = (): void => {\n    this._setState(SelectState.Selected);\n    if (this.props.onFocus) {\n      this.props.onFocus();\n    }\n  };\n\n  private readonly _onBlur = (): void => {\n    this._setState(SelectState.NotSelected);\n    if (this.props.onBlur) {\n      this.props.onBlur();\n    }\n  };\n\n  private readonly _onTouchEnd = (event: RN.GestureResponderEvent): void => {\n    if (!this.props.disabled) {\n      if (this.props.onPress) {\n        this.props.onPress(event);\n      }\n    }\n    if (this.props.onTouchEnd) {\n      this.props.onTouchEnd(event);\n    }\n  };\n}\n"]}
+{"version":3,"file":"ButtonWin32.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Button/ButtonWin32.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport RN = require('react-native');\nimport { ViewWin32 } from '../View/ViewWin32';\nimport { IViewWin32Props } from '../View/ViewWin32.Props';\nimport { TextWin32 } from '../Text/TextWin32';\nimport { ITextWin32Props } from '../Text/TextWin32.Props';\nimport { IButtonWin32Props } from './ButtonWin32.Props';\n\nconst enum SelectState {\n  NotSelected,\n  Selected\n}\n\ninterface IButtonWin32State {\n  accessibilityState: RN.AccessibilityState;\n}\n\n/**\n * React-native <Button> control with additional Win32-specific functionality.\n */\nexport class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32State> {\n  constructor(props: IButtonWin32Props) {\n    super(props);\n    this.state = this._makeState(SelectState.NotSelected);\n  }\n\n  public render() {\n    const viewProps: IViewWin32Props = {\n      accessible: true,\n      accessibilityLabel: this.props.accessibilityLabel || this.props.title,\n      accessibilityRole: 'button',\n      accessibilityState: this.state.accessibilityState,\n      focusable: true,\n      onFocus: this._onFocus,\n      onBlur: this._onBlur,\n      onMouseEnter: this.props.onMouseEnter,\n      onMouseLeave: this.props.onMouseLeave,\n      onTouchStart: this.props.onTouchStart,\n      onTouchEnd: this._onTouchEnd,\n      testID: this.props.testID,\n      style: this.props.style as RN.StyleProp<RN.ViewStyle>,\n    };\n\n    const textProps: ITextWin32Props = {\n      textStyle: 'None',\n    };\n    if (this.props.color) {\n      textProps.style = { color: this.props.color };\n    }\n\n    return (\n      <ViewWin32 {...viewProps}>\n        <TextWin32 {...textProps}>{this.props.title}</TextWin32>\n      </ViewWin32>\n    );\n  }\n\n  private readonly _makeState = (select: SelectState): IButtonWin32State => {\n    return {\n      accessibilityState: {\n        disabled: this.props.disabled,\n        selected: select === SelectState.Selected,\n      },\n    };\n  };\n\n  private readonly _setState = (select: SelectState): void => {\n    const state = this._makeState(select);\n    this.setState(state);\n  };\n\n  private readonly _onFocus = (): void => {\n    this._setState(SelectState.Selected);\n    if (this.props.onFocus) {\n      this.props.onFocus();\n    }\n  };\n\n  private readonly _onBlur = (): void => {\n    this._setState(SelectState.NotSelected);\n    if (this.props.onBlur) {\n      this.props.onBlur();\n    }\n  };\n\n  private readonly _onTouchEnd = (event: RN.GestureResponderEvent): void => {\n    if (!this.props.disabled) {\n      if (this.props.onPress) {\n        this.props.onPress(event);\n      }\n    }\n    if (this.props.onTouchEnd) {\n      this.props.onTouchEnd(event);\n    }\n  };\n}\n"]}

package/Libraries/Components/Button.js

@@ -145,6 +145,7 @@ type ButtonProps = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
+  accessibilityHint?: ?string,
 |}>;
 
 /**
@@ -275,6 +276,7 @@ class Button extends React.Component<ButtonProps> {
       testID,
       accessible,
       accessibilityActions,
+      accessibilityHint,
       onAccessibilityAction,
     } = this.props;
     const buttonStyles = [styles.button];
@@ -317,6 +319,7 @@ class Button extends React.Component<ButtonProps> {
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
         accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
         accessibilityRole="button"
         accessibilityState={accessibilityState}
         hasTVPreferredFocus={hasTVPreferredFocus}

package/Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -117,10 +117,6 @@ type Props = $ReadOnly<{|
  * source of truth.
  */
 class DatePickerIOS extends React.Component<Props> {
-  static DefaultProps: {|mode: $TEMPORARY$string<'datetime'>|} = {
-    mode: 'datetime',
-  };
-
   _picker: ?React.ElementRef<typeof RCTDatePickerNativeComponent> = null;
 
   componentDidUpdate() {
@@ -142,6 +138,7 @@ class DatePickerIOS extends React.Component<Props> {
 
   render(): React.Node {
     const props = this.props;
+    const mode = props.mode ?? 'datetime';
     invariant(
       props.date || props.initialDate,
       'A selected date or initial date should be specified.',
@@ -153,7 +150,7 @@ class DatePickerIOS extends React.Component<Props> {
           ref={picker => {
             this._picker = picker;
           }}
-          style={getHeight(props.pickerStyle, props.mode)}
+          style={getHeight(props.pickerStyle, mode)}
           date={
             props.date
               ? props.date.getTime()
@@ -172,7 +169,7 @@ class DatePickerIOS extends React.Component<Props> {
           minimumDate={
             props.minimumDate ? props.minimumDate.getTime() : undefined
           }
-          mode={props.mode}
+          mode={mode}
           minuteInterval={props.minuteInterval}
           timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes}
           onChange={this._onChange}

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -56,7 +56,7 @@ type Props = $ReadOnly<{|
    * );
    * ```
    */
-  drawerBackgroundColor: ColorValue,
+  drawerBackgroundColor?: ?ColorValue,
 
   /**
    * Specifies the side of the screen from which the drawer will slide in.
@@ -161,11 +161,6 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
 
     return {Left: 'left', Right: 'right'};
   }
-  static defaultProps: {|
-    drawerBackgroundColor: 'white',
-  |} = {
-    drawerBackgroundColor: 'white',
-  };
 
   _nativeRef = React.createRef<
     React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
@@ -175,6 +170,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
 
   render(): React.Node {
     const {
+      drawerBackgroundColor = 'white',
       onDrawerStateChanged,
       renderNavigationView,
       onDrawerOpen,
@@ -189,7 +185,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
           styles.drawerSubview,
           {
             width: this.props.drawerWidth,
-            backgroundColor: this.props.drawerBackgroundColor,
+            backgroundColor: drawerBackgroundColor,
           },
         ]}
         collapsable={false}>
@@ -220,6 +216,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
       <AndroidDrawerLayoutNativeComponent
         {...props}
         ref={this._nativeRef}
+        drawerBackgroundColor={drawerBackgroundColor}
         drawerWidth={this.props.drawerWidth}
         drawerPosition={this.props.drawerPosition}
         drawerLockMode={this.props.drawerLockMode}

package/Libraries/Components/EnterString.win32.js

@@ -11,7 +11,7 @@ const react_1 = __importDefault(require("react"));
 const PropTypes = require("prop-types");
 class EnterStringNative extends react_1.default.Component {
     render() {
-        return react_1.default.createElement(RCTEnterString, Object.assign({}, this.props));
+        return react_1.default.createElement(RCTEnterString, { ...this.props });
     }
 }
 // mixins: [NativeMethodsMixin],
@@ -57,14 +57,14 @@ EnterStringNative.DefaultProps = {
     label: '',
     onChanged: null,
 };
-const RCTEnterString = react_native_1.requireNativeComponent('RCTEnterString');
+const RCTEnterString = (0, react_native_1.requireNativeComponent)('RCTEnterString');
 class EnterString extends react_1.default.Component {
     render() {
         const args = { ...this.props };
         if (args.onChanged) {
             args.onChanged = this._onChangedNative.bind(this);
         } // TODO how should this work without the cast
-        return react_1.default.createElement(EnterStringNative, Object.assign({}, args));
+        return react_1.default.createElement(EnterStringNative, { ...args });
     }
     _onChangedNative(event) {
         if (this.props.onChanged) {

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

@@ -1 +1 @@
-{"version":3,"file":"EnterString.win32.js","sourceRoot":"","sources":["../../src/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,oBAAK,IAAI,CAAC,KAAK,EAAI,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,qCAAsB,CAAC,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,oBAAM,IAAuC,EAAI,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;;AApBH,8BAqBC;AApBe,wBAAY,GAAsB;IAC9C,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC","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/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;;AApBH,8BAqBC;AApBe,wBAAY,GAAsB;IAC9C,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC","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"]}

package/Libraries/Components/Keyboard/Keyboard.js

@@ -141,9 +141,9 @@ class Keyboard {
   }
 
   /**
-   * @deprecated Use `remove` on the EventSubscription from `addEventListener`.
+   * @deprecated Use `remove` on the EventSubscription from `addListener`.
    */
-  removeEventListener<K: $Keys<KeyboardEventDefinitions>>(
+  removeListener<K: $Keys<KeyboardEventDefinitions>>(
     eventType: K,
     listener: (...$ElementType<KeyboardEventDefinitions, K>) => mixed,
   ): void {

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -31,6 +31,7 @@ const AndroidHorizontalScrollViewNativeComponent: HostComponent<Props> = NativeC
       scrollPerfTag: true,
       sendMomentumEvents: true,
       showsHorizontalScrollIndicator: true,
+      snapToAlignment: true,
       snapToEnd: true,
       snapToInterval: true,
       snapToStart: true,

package/Libraries/Components/ScrollView/ScrollView.js

@@ -346,17 +346,6 @@ type IOSProps = $ReadOnly<{|
    * The default value is true.
    */
   showsHorizontalScrollIndicator?: ?boolean,
-  /**
-   * When `snapToInterval` is set, `snapToAlignment` will define the relationship
-   * of the snapping to the scroll view.
-   *
-   *   - `'start'` (the default) will align the snap at the left (horizontal) or top (vertical)
-   *   - `'center'` will align the snap in the center
-   *   - `'end'` will align the snap at the right (horizontal) or bottom (vertical)
-   *
-   * @platform ios
-   */
-  snapToAlignment?: ?('start' | 'center' | 'end'),
   /**
    * The current scale of the scroll view content. The default value is 1.0.
    * @platform ios
@@ -597,6 +586,15 @@ export type Props = $ReadOnly<{|
    * for example when you want your list to have an animated hidable header.
    */
   StickyHeaderComponent?: StickyHeaderComponentType,
+  /**
+   * When `snapToInterval` is set, `snapToAlignment` will define the relationship
+   * of the snapping to the scroll view.
+   *
+   *   - `'start'` (the default) will align the snap at the left (horizontal) or top (vertical)
+   *   - `'center'` will align the snap in the center
+   *   - `'end'` will align the snap at the right (horizontal) or bottom (vertical)
+   */
+  snapToAlignment?: ?('start' | 'center' | 'end'),
   /**
    * When set, causes the scroll view to stop at multiples of the value of
    * `snapToInterval`. This can be used for paginating through children
@@ -1178,11 +1176,6 @@ class ScrollView extends React.Component<Props, State> {
         );
       }
     }
-    if (Platform.OS === 'android') {
-      if (this.props.keyboardDismissMode === 'on-drag' && this._isTouching) {
-        dismissKeyboard();
-      }
-    }
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
   };
@@ -1299,6 +1292,14 @@ class ScrollView extends React.Component<Props, State> {
    */
   _handleScrollBeginDrag: (e: ScrollEvent) => void = (e: ScrollEvent) => {
     FrameRateLogger.beginScroll(); // TODO: track all scrolls after implementing onScrollEndAnimation
+
+    if (
+      Platform.OS === 'android' &&
+      this.props.keyboardDismissMode === 'on-drag'
+    ) {
+      dismissKeyboard();
+    }
+
     this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
   };