react-native-windows 0.83.0-preview.2 → 0.84.0-preview.2

package/Libraries/Components/TextInput/TextInput.flow.windows.js

@@ -15,7 +15,8 @@ import type {
   GestureResponderEvent,
   NativeSyntheticEvent,
   ScrollEvent,
-  KeyEvent, // Windows
+  KeyUpEvent, // Windows
+  KeyDownEvent, // Windows
   MouseEvent, // Windows
 } from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
@@ -564,10 +565,10 @@ export type TextInputWindowsProps = $ReadOnly<{|
    */
   onMouseEnter?: (args: MouseEvent) => void,
 
-  onKeyDown?: (args: KeyEvent) => void,
-  onKeyDownCapture?: (args: KeyEvent) => void,
-  onKeyUp?: (args: KeyEvent) => void,
-  onKeyUpCapture?: (args: KeyEvent) => void,
+  onKeyDown?: (args: KeyDownEvent) => void,
+  onKeyDownCapture?: (args: KeyDownEvent) => void,
+  onKeyUp?: (args: KeyUpEvent) => void,
+  onKeyUpCapture?: (args: KeyDownEvent) => void,
 
   keyDownEvents?: ?$ReadOnlyArray<HandledKeyboardEvent>,
   keyUpEvents?: ?$ReadOnlyArray<HandledKeyboardEvent>,
@@ -879,18 +880,18 @@ type TextInputBaseProps = $ReadOnly<{
   /**
    * Callback that is called when the text input is blurred.
    */
-  onBlur?: ?(e: TextInputBlurEvent) => mixed,
+  onBlur?: ?(e: TextInputBlurEvent) => unknown,
 
   /**
    * Callback that is called when the text input's text changes.
    */
-  onChange?: ?(e: TextInputChangeEvent) => mixed,
+  onChange?: ?(e: TextInputChangeEvent) => unknown,
 
   /**
    * Callback that is called when the text input's text changes.
    * Changed text is passed as an argument to the callback handler.
    */
-  onChangeText?: ?(text: string) => mixed,
+  onChangeText?: ?(text: string) => unknown,
 
   /**
    * Callback that is called when the text input's content size changes.
@@ -899,17 +900,17 @@ type TextInputBaseProps = $ReadOnly<{
    *
    * Only called for multiline text inputs.
    */
-  onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => mixed,
+  onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => unknown,
 
   /**
    * Callback that is called when text input ends.
    */
-  onEndEditing?: ?(e: TextInputEndEditingEvent) => mixed,
+  onEndEditing?: ?(e: TextInputEndEditingEvent) => unknown,
 
   /**
    * Callback that is called when the text input is focused.
    */
-  onFocus?: ?(e: TextInputFocusEvent) => mixed,
+  onFocus?: ?(e: TextInputFocusEvent) => unknown,
 
   /**
    * Callback that is called when a key is pressed.
@@ -918,42 +919,42 @@ type TextInputBaseProps = $ReadOnly<{
    * the typed-in character otherwise including `' '` for space.
    * Fires before `onChange` callbacks.
    */
-  onKeyPress?: ?(e: TextInputKeyPressEvent) => mixed,
+  onKeyPress?: ?(e: TextInputKeyPressEvent) => unknown,
 
   /**
    * Called when a single tap gesture is detected.
    */
-  onPress?: ?(event: GestureResponderEvent) => mixed,
+  onPress?: ?(event: GestureResponderEvent) => unknown,
 
   /**
    * Called when a touch is engaged.
    */
-  onPressIn?: ?(event: GestureResponderEvent) => mixed,
+  onPressIn?: ?(event: GestureResponderEvent) => unknown,
 
   /**
    * Called when a touch is released.
    */
-  onPressOut?: ?(event: GestureResponderEvent) => mixed,
+  onPressOut?: ?(event: GestureResponderEvent) => unknown,
 
   /**
    * Callback that is called when the text input selection is changed.
    * This will be called with
    * `{ nativeEvent: { selection: { start, end } } }`.
    */
-  onSelectionChange?: ?(e: TextInputSelectionChangeEvent) => mixed,
+  onSelectionChange?: ?(e: TextInputSelectionChangeEvent) => unknown,
 
   /**
    * Callback that is called when the text input's submit button is pressed.
    * Invalid if `multiline={true}` is specified.
    */
-  onSubmitEditing?: ?(e: TextInputSubmitEditingEvent) => mixed,
+  onSubmitEditing?: ?(e: TextInputSubmitEditingEvent) => unknown,
 
   /**
    * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
    * May also contain other properties from ScrollEvent but on Android contentSize
    * is not provided for performance reasons.
    */
-  onScroll?: ?(e: ScrollEvent) => mixed,
+  onScroll?: ?(e: ScrollEvent) => unknown,
 
   /**
    * The string that will be rendered before text input has been entered.

package/Libraries/Components/TextInput/TextInput.js

@@ -149,7 +149,7 @@ type TextInputStateType = $ReadOnly<{
   blurTextInput: (textField: ?HostInstance) => void,
 }>;
 
-type ViewCommands = $NonMaybeType<
+type ViewCommands = NonNullable<
   | typeof AndroidTextInputCommands
   | typeof RCTMultilineTextInputNativeCommands
   | typeof RCTSinglelineTextInputNativeCommands,
@@ -188,8 +188,8 @@ function useTextInputStateSynchronization({
   const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
   const [lastNativeSelectionState, setLastNativeSelection] =
     useState<LastNativeSelection>({
-      selection: {start: -1, end: -1},
-      mostRecentEventCount: mostRecentEventCount,
+      mostRecentEventCount,
+      selection: {end: -1, start: -1},
     });
 
   const lastNativeSelection = lastNativeSelectionState.selection;
@@ -212,7 +212,7 @@ function useTextInputStateSynchronization({
         lastNativeSelection.end !== selection.end)
     ) {
       nativeUpdate.selection = selection;
-      setLastNativeSelection({selection, mostRecentEventCount});
+      setLastNativeSelection({mostRecentEventCount, selection});
     }
 
     if (Object.keys(nativeUpdate).length === 0) {
@@ -240,7 +240,7 @@ function useTextInputStateSynchronization({
     viewCommands,
   ]);
 
-  return {setLastNativeText, setLastNativeSelection};
+  return {setLastNativeSelection, setLastNativeText};
 }
 
 /**
@@ -377,8 +377,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
     propsSelection == null
       ? null
       : {
-          start: propsSelection.start,
           end: propsSelection.end ?? propsSelection.start,
+          start: propsSelection.start,
         };
 
   const text =
@@ -397,9 +397,9 @@ function InternalTextInput(props: TextInputProps): React.Node {
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
   const {setLastNativeText, setLastNativeSelection} =
     useTextInputStateSynchronization({
-      props,
       inputRef,
       mostRecentEventCount,
+      props,
       selection,
       text,
       viewCommands,
@@ -469,13 +469,13 @@ function InternalTextInput(props: TextInputProps): React.Node {
               );
             }
           },
+          getNativeRef(): ?TextInputInstance {
+            return inputRef.current;
+          },
           // TODO: Fix this returning true on null === null, when no input is focused
           isFocused(): boolean {
             return TextInputState.currentlyFocusedInput() === inputRef.current;
           },
-          getNativeRef(): ?TextInputInstance {
-            return inputRef.current;
-          },
           setSelection(start: number, end: number): void {
             if (inputRef.current != null) {
               viewCommands.setTextAndSelection(
@@ -525,8 +525,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
     }
 
     setLastNativeSelection({
-      selection: event.nativeEvent.selection,
       mostRecentEventCount,
+      selection: event.nativeEvent.selection,
     });
   };
 
@@ -590,6 +590,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
 
   const config = useMemo(
     () => ({
+      cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
       hitSlop,
       onPress: (event: GestureResponderEvent) => {
         onPress?.(event);
@@ -599,9 +600,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
           }
         }
       },
-      onPressIn: onPressIn,
-      onPressOut: onPressOut,
-      cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
+      onPressIn,
+      onPressOut,
     }),
     [
       editable,
@@ -740,12 +740,12 @@ function InternalTextInput(props: TextInputProps): React.Node {
     }
     // For consistency with iOS set cursor/selectionHandle color as selectionColor
     const colorProps = {
+      cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
       selectionColor,
       selectionHandleColor:
         selectionHandleColor === undefined
           ? selectionColor
           : selectionHandleColor,
-      cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
     };
     textInput = (
       /* $FlowFixMe[prop-missing] the types for AndroidTextInput don't match up
@@ -799,8 +799,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
 }
 
 const enterKeyHintToReturnTypeMap = {
-  enter: 'default',
   done: 'done',
+  enter: 'default',
   go: 'go',
   next: 'next',
   previous: 'previous',
@@ -809,19 +809,20 @@ const enterKeyHintToReturnTypeMap = {
 } as const;
 
 const inputModeToKeyboardTypeMap = {
-  none: 'default',
-  text: 'default',
   decimal: 'decimal-pad',
+  email: 'email-address',
+  none: 'default',
   numeric: 'number-pad',
-  tel: 'phone-pad',
   search:
     Platform.OS === 'ios' ? ('web-search' as const) : ('default' as const),
-  email: 'email-address',
+  tel: 'phone-pad',
+  text: 'default',
   url: 'url',
 } as const;
 
 // Map HTML autocomplete values to Android autoComplete values
 const autoCompleteWebToAutoCompleteAndroidMap = {
+  'additional-name': 'name-middle',
   'address-line1': 'postal-address-region',
   'address-line2': 'postal-address-locality',
   bday: 'birthdate-full',
@@ -836,12 +837,11 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
   country: 'postal-address-country',
   'current-password': 'password',
   email: 'email',
+  'family-name': 'name-family',
+  'given-name': 'name-given',
   'honorific-prefix': 'name-prefix',
   'honorific-suffix': 'name-suffix',
   name: 'name',
-  'additional-name': 'name-middle',
-  'family-name': 'name-family',
-  'given-name': 'name-given',
   'new-password': 'password-new',
   off: 'off',
   'one-time-code': 'sms-otp',
@@ -856,33 +856,33 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
 
 // Map HTML autocomplete values to iOS textContentType values
 const autoCompleteWebToTextContentTypeMap = {
+  'additional-name': 'middleName',
   'address-line1': 'streetAddressLine1',
   'address-line2': 'streetAddressLine2',
   bday: 'birthdate',
   'bday-day': 'birthdateDay',
   'bday-month': 'birthdateMonth',
   'bday-year': 'birthdateYear',
+  'cc-additional-name': 'creditCardMiddleName',
   'cc-csc': 'creditCardSecurityCode',
+  'cc-exp': 'creditCardExpiration',
   'cc-exp-month': 'creditCardExpirationMonth',
   'cc-exp-year': 'creditCardExpirationYear',
-  'cc-exp': 'creditCardExpiration',
-  'cc-given-name': 'creditCardGivenName',
-  'cc-additional-name': 'creditCardMiddleName',
   'cc-family-name': 'creditCardFamilyName',
+  'cc-given-name': 'creditCardGivenName',
   'cc-name': 'creditCardName',
   'cc-number': 'creditCardNumber',
   'cc-type': 'creditCardType',
-  'current-password': 'password',
   country: 'countryName',
+  'current-password': 'password',
   email: 'emailAddress',
-  name: 'name',
-  'additional-name': 'middleName',
   'family-name': 'familyName',
   'given-name': 'givenName',
-  nickname: 'nickname',
   'honorific-prefix': 'namePrefix',
   'honorific-suffix': 'nameSuffix',
+  name: 'name',
   'new-password': 'newPassword',
+  nickname: 'nickname',
   off: 'none',
   'one-time-code': 'oneTimeCode',
   organization: 'organizationName',
@@ -959,11 +959,10 @@ TextInput.displayName = 'TextInput';
 
 // $FlowFixMe[prop-missing]
 TextInput.State = {
-  currentlyFocusedInput: TextInputState.currentlyFocusedInput,
-
+  blurTextInput: TextInputState.blurTextInput,
   currentlyFocusedField: TextInputState.currentlyFocusedField,
+  currentlyFocusedInput: TextInputState.currentlyFocusedInput,
   focusTextInput: TextInputState.focusTextInput,
-  blurTextInput: TextInputState.blurTextInput,
 };
 
 export type TextInputComponentStatics = $ReadOnly<{
@@ -981,9 +980,9 @@ const styles = StyleSheet.create({
 
 const verticalAlignToTextAlignVerticalMap = {
   auto: 'auto',
-  top: 'top',
   bottom: 'bottom',
   middle: 'center',
+  top: 'top',
 } as const;
 
 // $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.

package/Libraries/Components/TextInput/TextInput.windows.js

@@ -13,7 +13,8 @@ import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet
 import type {
   BlurEvent,
   FocusEvent,
-  KeyEvent, // Windows
+  KeyUpEvent, // Windows
+  KeyDownEvent, // Windows
   MouseEvent, // Windows
   GestureResponderEvent,
   ScrollEvent,
@@ -164,7 +165,7 @@ type TextInputStateType = $ReadOnly<{
   blurTextInput: (textField: ?HostInstance) => void,
 }>;
 
-type ViewCommands = $NonMaybeType<
+type ViewCommands = NonNullable<
   | typeof AndroidTextInputCommands
   | typeof RCTMultilineTextInputNativeCommands
   | typeof RCTSinglelineTextInputNativeCommands,
@@ -203,8 +204,8 @@ function useTextInputStateSynchronization({
   const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
   const [lastNativeSelectionState, setLastNativeSelection] =
     useState<LastNativeSelection>({
-      selection: {start: -1, end: -1},
-      mostRecentEventCount: mostRecentEventCount,
+      mostRecentEventCount,
+      selection: {end: -1, start: -1},
     });
 
   const lastNativeSelection = lastNativeSelectionState.selection;
@@ -227,7 +228,7 @@ function useTextInputStateSynchronization({
         lastNativeSelection.end !== selection.end)
     ) {
       nativeUpdate.selection = selection;
-      setLastNativeSelection({selection, mostRecentEventCount});
+      setLastNativeSelection({mostRecentEventCount, selection});
     }
 
     if (Object.keys(nativeUpdate).length === 0) {
@@ -255,7 +256,7 @@ function useTextInputStateSynchronization({
     viewCommands,
   ]);
 
-  return {setLastNativeText, setLastNativeSelection};
+  return {setLastNativeSelection, setLastNativeText};
 }
 
 /**
@@ -401,8 +402,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
     propsSelection == null
       ? null
       : {
-          start: propsSelection.start,
           end: propsSelection.end ?? propsSelection.start,
+          start: propsSelection.start,
         };
 
   const text =
@@ -422,9 +423,9 @@ function InternalTextInput(props: TextInputProps): React.Node {
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
   const {setLastNativeText, setLastNativeSelection} =
     useTextInputStateSynchronization({
-      props,
       inputRef,
       mostRecentEventCount,
+      props,
       selection,
       text,
       // $FlowFixMe[incompatible-call]
@@ -496,6 +497,10 @@ function InternalTextInput(props: TextInputProps): React.Node {
               );
             }
           },
+          getNativeRef(): ?TextInputInstance {
+            return inputRef.current;
+          },
+          // TODO: Fix this returning true on null === null, when no input is focused
           isFocused(): boolean {
             const currentlyFocusedInput =
               TextInputState.currentlyFocusedInput();
@@ -504,9 +509,6 @@ function InternalTextInput(props: TextInputProps): React.Node {
               currentlyFocusedInput === inputRef.current
             );
           },
-          getNativeRef(): ?TextInputInstance {
-            return inputRef.current;
-          },
           setSelection(start: number, end: number): void {
             if (inputRef.current != null) {
               viewCommands.setTextAndSelection(
@@ -556,8 +558,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
     }
 
     setLastNativeSelection({
-      selection: event.nativeEvent.selection,
       mostRecentEventCount,
+      selection: event.nativeEvent.selection,
     });
   };
 
@@ -627,6 +629,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
 
   const config = useMemo(
     () => ({
+      cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
       hitSlop,
       onPress: (event: GestureResponderEvent) => {
         onPress?.(event);
@@ -636,9 +639,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
           }
         }
       },
-      onPressIn: onPressIn,
-      onPressOut: onPressOut,
-      cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
+      onPressIn,
+      onPressOut,
     }),
     [
       editable,
@@ -661,7 +663,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
   // so omitting onBlur and onFocus pressability handlers here.
   const {onBlur, onFocus, ...eventHandlers} = usePressability(config);
   const eventPhase = Object.freeze({Capturing: 1, Bubbling: 3});
-  const _keyDown = (event: KeyEvent) => {
+  const _keyDown = (event: KeyDownEvent) => {
     if (props.keyDownEvents && event.isPropagationStopped() !== true) {
       // $FlowFixMe[incompatible-type] - keyDownEvents was already checked to not be undefined
       for (const el of props.keyDownEvents) {
@@ -680,7 +682,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     props.onKeyDown && props.onKeyDown(event);
   };
 
-  const _keyUp = (event: KeyEvent) => {
+  const _keyUp = (event: KeyUpEvent) => {
     if (props.keyUpEvents && event.isPropagationStopped() !== true) {
       // $FlowFixMe[incompatible-type] - keyUpEvents was already checked to not be undefined
       for (const el of props.keyUpEvents) {
@@ -699,7 +701,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     props.onKeyUp && props.onKeyUp(event);
   };
 
-  const _keyDownCapture = (event: KeyEvent) => {
+  const _keyDownCapture = (event: KeyDownEvent) => {
     if (props.keyDownEvents && event.isPropagationStopped() !== true) {
       // $FlowFixMe[incompatible-type] - keyDownEvents was already checked to not be undefined
       for (const el of props.keyDownEvents) {
@@ -718,7 +720,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     props.onKeyDownCapture && props.onKeyDownCapture(event);
   };
 
-  const _keyUpCapture = (event: KeyEvent) => {
+  const _keyUpCapture = (event: KeyUpEvent) => {
     if (props.keyUpEvents && event.isPropagationStopped() !== true) {
       // $FlowFixMe[incompatible-type] - keyUpEvents was already checked to not be undefined
       for (const el of props.keyUpEvents) {
@@ -864,12 +866,12 @@ function InternalTextInput(props: TextInputProps): React.Node {
     }
     // For consistency with iOS set cursor/selectionHandle color as selectionColor
     const colorProps = {
+      cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
       selectionColor,
       selectionHandleColor:
         selectionHandleColor === undefined
           ? selectionColor
           : selectionHandleColor,
-      cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
     };
     textInput = (
       /* $FlowFixMe[prop-missing] the types for AndroidTextInput don't match up
@@ -974,8 +976,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
 }
 
 const enterKeyHintToReturnTypeMap = {
-  enter: 'default',
   done: 'done',
+  enter: 'default',
   go: 'go',
   next: 'next',
   previous: 'previous',
@@ -984,19 +986,20 @@ const enterKeyHintToReturnTypeMap = {
 } as const;
 
 const inputModeToKeyboardTypeMap = {
-  none: 'default',
-  text: 'default',
   decimal: 'decimal-pad',
+  email: 'email-address',
+  none: 'default',
   numeric: 'number-pad',
-  tel: 'phone-pad',
   search:
     Platform.OS === 'ios' ? ('web-search' as const) : ('default' as const),
-  email: 'email-address',
+  tel: 'phone-pad',
+  text: 'default',
   url: 'url',
 } as const;
 
 // Map HTML autocomplete values to Android autoComplete values
 const autoCompleteWebToAutoCompleteAndroidMap = {
+  'additional-name': 'name-middle',
   'address-line1': 'postal-address-region',
   'address-line2': 'postal-address-locality',
   bday: 'birthdate-full',
@@ -1011,12 +1014,11 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
   country: 'postal-address-country',
   'current-password': 'password',
   email: 'email',
+  'family-name': 'name-family',
+  'given-name': 'name-given',
   'honorific-prefix': 'name-prefix',
   'honorific-suffix': 'name-suffix',
   name: 'name',
-  'additional-name': 'name-middle',
-  'family-name': 'name-family',
-  'given-name': 'name-given',
   'new-password': 'password-new',
   off: 'off',
   'one-time-code': 'sms-otp',
@@ -1031,33 +1033,33 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
 
 // Map HTML autocomplete values to iOS textContentType values
 const autoCompleteWebToTextContentTypeMap = {
+  'additional-name': 'middleName',
   'address-line1': 'streetAddressLine1',
   'address-line2': 'streetAddressLine2',
   bday: 'birthdate',
   'bday-day': 'birthdateDay',
   'bday-month': 'birthdateMonth',
   'bday-year': 'birthdateYear',
+  'cc-additional-name': 'creditCardMiddleName',
   'cc-csc': 'creditCardSecurityCode',
+  'cc-exp': 'creditCardExpiration',
   'cc-exp-month': 'creditCardExpirationMonth',
   'cc-exp-year': 'creditCardExpirationYear',
-  'cc-exp': 'creditCardExpiration',
-  'cc-given-name': 'creditCardGivenName',
-  'cc-additional-name': 'creditCardMiddleName',
   'cc-family-name': 'creditCardFamilyName',
+  'cc-given-name': 'creditCardGivenName',
   'cc-name': 'creditCardName',
   'cc-number': 'creditCardNumber',
   'cc-type': 'creditCardType',
-  'current-password': 'password',
   country: 'countryName',
+  'current-password': 'password',
   email: 'emailAddress',
-  name: 'name',
-  'additional-name': 'middleName',
   'family-name': 'familyName',
   'given-name': 'givenName',
-  nickname: 'nickname',
   'honorific-prefix': 'namePrefix',
   'honorific-suffix': 'nameSuffix',
+  name: 'name',
   'new-password': 'newPassword',
+  nickname: 'nickname',
   off: 'none',
   'one-time-code': 'oneTimeCode',
   organization: 'organizationName',
@@ -1134,11 +1136,10 @@ TextInput.displayName = 'TextInput';
 
 // $FlowFixMe[prop-missing]
 TextInput.State = {
-  currentlyFocusedInput: TextInputState.currentlyFocusedInput,
-
+  blurTextInput: TextInputState.blurTextInput,
   currentlyFocusedField: TextInputState.currentlyFocusedField,
+  currentlyFocusedInput: TextInputState.currentlyFocusedInput,
   focusTextInput: TextInputState.focusTextInput,
-  blurTextInput: TextInputState.blurTextInput,
 };
 
 export type TextInputComponentStatics = $ReadOnly<{
@@ -1156,9 +1157,9 @@ const styles = StyleSheet.create({
 
 const verticalAlignToTextAlignVerticalMap = {
   auto: 'auto',
-  top: 'top',
   bottom: 'bottom',
   middle: 'center',
+  top: 'top',
 } as const;
 
 // $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.

package/Libraries/Components/Touchable/PooledClass.js

@@ -105,9 +105,9 @@ const addPoolingTo = function <T>(
   pooler: Pooler,
 ): Class<T> & {
   getPooled(
-    ...args: $ReadOnlyArray<mixed>
+    ...args: $ReadOnlyArray<unknown>
   ): /* arguments of the constructor */ T,
-  release(instance: mixed): void,
+  release(instance: unknown): void,
   ...
 } {
   // Casting as any so that flow ignores the actual implementation and trusts

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -211,7 +211,7 @@ class TouchableBounce extends React.Component<
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
-  componentDidMount(): mixed {
+  componentDidMount(): unknown {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
@@ -225,11 +225,11 @@ export default (function TouchableBounceWrapper({
   ref: hostRef,
   ...props
 }: {
-  ref: React.RefSetter<mixed>,
+  ref: React.RefSetter<unknown>,
   ...$ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>,
 }) {
   return <TouchableBounce {...props} hostRef={hostRef} />;
 } as component(
-  ref?: React.RefSetter<mixed>,
+  ref?: React.RefSetter<unknown>,
   ...props: $ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>
 ));

package/Libraries/Components/Touchable/TouchableBounce.windows.js

@@ -218,7 +218,7 @@ class TouchableBounce extends React.Component<
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
-  componentDidMount(): mixed {
+  componentDidMount(): unknown {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
@@ -232,11 +232,11 @@ export default (function TouchableBounceWrapper({
   ref: hostRef,
   ...props
 }: {
-  ref: React.RefSetter<mixed>,
+  ref: React.RefSetter<unknown>,
   ...$ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>,
 }) {
   return <TouchableBounce {...props} hostRef={hostRef} />;
 } as component(
-  ref?: React.RefSetter<mixed>,
+  ref?: React.RefSetter<unknown>,
   ...props: $ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>
 ));