@office-iss/react-native-win32 0.76.2 → 0.77.0-preview.1

package/Libraries/Components/TextInput/TextInput.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   PressEvent,
@@ -37,10 +37,10 @@ import * as React from 'react';
 import {useCallback, useLayoutEffect, useRef, useState} from 'react';
 
 type ReactRefSetter<T> = {current: null | T, ...} | ((ref: null | T) => mixed);
-type TextInputInstance = React.ElementRef<HostComponent<mixed>> & {
+type TextInputInstance = HostInstance & {
   +clear: () => void,
   +isFocused: () => boolean,
-  +getNativeRef: () => ?React.ElementRef<HostComponent<mixed>>,
+  +getNativeRef: () => ?HostInstance,
   +setSelection: (start: number, end: number) => void,
 };
 
@@ -238,7 +238,12 @@ export type TextContentType =
   | 'birthdate'
   | 'birthdateDay'
   | 'birthdateMonth'
-  | 'birthdateYear';
+  | 'birthdateYear'
+  | 'cellularEID'
+  | 'cellularIMEI'
+  | 'dateTime'
+  | 'flightNumber'
+  | 'shipmentTrackingNumber';
 
 export type enterKeyHintType =
   // Cross Platform
@@ -305,6 +310,12 @@ type IOSProps = $ReadOnly<{|
    */
   inputAccessoryViewID?: ?string,
 
+  /**
+   * An optional label that overrides the default input accessory view button label.
+   * @platform ios
+   */
+  inputAccessoryViewButtonLabel?: ?string,
+
   /**
    * Determines the color of the keyboard.
    * @platform ios
@@ -358,6 +369,19 @@ type IOSProps = $ReadOnly<{|
    */
   lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
 
+  /**
+   * Set line break mode on iOS.
+   * @platform ios
+   */
+  lineBreakModeIOS?: ?(
+    | 'wordWrapping'
+    | 'char'
+    | 'clip'
+    | 'head'
+    | 'middle'
+    | 'tail'
+  ),
+
   /**
    * If `false`, the iOS system will not insert an extra space after a paste operation
    * neither delete one or two spaces after a cut or delete operation.
@@ -988,7 +1012,7 @@ function useTextInputStateSynchronization_STATE({
   props: Props,
   mostRecentEventCount: number,
   selection: ?Selection,
-  inputRef: React.RefObject<null | React.ElementRef<HostComponent<mixed>>>,
+  inputRef: React.RefObject<null | HostInstance>,
   text: string,
   viewCommands: ViewCommands,
 }): {
@@ -1069,7 +1093,7 @@ function useTextInputStateSynchronization_REFS({
   props: Props,
   mostRecentEventCount: number,
   selection: ?Selection,
-  inputRef: React.RefObject<null | React.ElementRef<HostComponent<mixed>>>,
+  inputRef: React.RefObject<null | HostInstance>,
   text: string,
   viewCommands: ViewCommands,
 }): {
@@ -1269,7 +1293,7 @@ function InternalTextInput(props: Props): React.Node {
     ...otherProps
   } = props;
 
-  const inputRef = useRef<null | React.ElementRef<HostComponent<mixed>>>(null);
+  const inputRef = useRef<null | HostInstance>(null);
 
   const selection: ?Selection =
     propsSelection == null
@@ -1367,7 +1391,7 @@ function InternalTextInput(props: Props): React.Node {
           isFocused(): boolean {
             return TextInputState.currentlyFocusedInput() === inputRef.current;
           },
-          getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
+          getNativeRef(): ?HostInstance {
             return inputRef.current;
           },
           setSelection(start: number, end: number): void {
@@ -1515,7 +1539,7 @@ function InternalTextInput(props: Props): React.Node {
 
   // TextInput handles onBlur and onFocus events
   // so omitting onBlur and onFocus pressability handlers here.
-  const {onBlur, onFocus, ...eventHandlers} = usePressability(config) || {};
+  const {onBlur, onFocus, ...eventHandlers} = usePressability(config);
 
   let _accessibilityState;
   if (
@@ -1771,11 +1795,11 @@ const autoCompleteWebToTextContentTypeMap = {
   username: 'username',
 };
 
-const ExportedForwardRef: React.AbstractComponent<
-  React.ElementConfig<typeof InternalTextInput>,
-  TextInputInstance,
+const ExportedForwardRef: component(
+  ref: React.RefSetter<TextInputInstance>,
+  ...props: React.ElementConfig<typeof InternalTextInput>
   // $FlowFixMe[incompatible-call]
-> = React.forwardRef(function TextInput(
+) = React.forwardRef(function TextInput(
   {
     allowFontScaling = true,
     rejectResponderTermination = true,

package/Libraries/Components/TextInput/TextInput.win32.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   PressEvent,
@@ -37,10 +37,10 @@ import * as React from 'react';
 import {useCallback, useLayoutEffect, useRef, useState} from 'react';
 
 type ReactRefSetter<T> = {current: null | T, ...} | ((ref: null | T) => mixed);
-type TextInputInstance = React.ElementRef<HostComponent<mixed>> & {
+type TextInputInstance = HostInstance & {
   +clear: () => void,
   +isFocused: () => boolean,
-  +getNativeRef: () => ?React.ElementRef<HostComponent<mixed>>,
+  +getNativeRef: () => ?HostInstance,
   +setSelection: (start: number, end: number) => void,
 };
 
@@ -249,7 +249,12 @@ export type TextContentType =
   | 'birthdate'
   | 'birthdateDay'
   | 'birthdateMonth'
-  | 'birthdateYear';
+  | 'birthdateYear'
+  | 'cellularEID'
+  | 'cellularIMEI'
+  | 'dateTime'
+  | 'flightNumber'
+  | 'shipmentTrackingNumber';
 
 export type enterKeyHintType =
   // Cross Platform
@@ -316,6 +321,12 @@ type IOSProps = $ReadOnly<{|
    */
   inputAccessoryViewID?: ?string,
 
+  /**
+   * An optional label that overrides the default input accessory view button label.
+   * @platform ios
+   */
+  inputAccessoryViewButtonLabel?: ?string,
+
   /**
    * Determines the color of the keyboard.
    * @platform ios
@@ -366,6 +377,19 @@ type IOSProps = $ReadOnly<{|
    */
   lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
 
+  /**
+   * Set line break mode on iOS.
+   * @platform ios
+   */
+  lineBreakModeIOS?: ?(
+    | 'wordWrapping'
+    | 'char'
+    | 'clip'
+    | 'head'
+    | 'middle'
+    | 'tail'
+  ),
+
   /**
    * If `false`, the iOS system will not insert an extra space after a paste operation
    * neither delete one or two spaces after a cut or delete operation.
@@ -1031,7 +1055,7 @@ function useTextInputStateSynchronization_STATE({
   props: Props,
   mostRecentEventCount: number,
   selection: ?Selection,
-  inputRef: React.RefObject<null | React.ElementRef<HostComponent<mixed>>>,
+  inputRef: React.RefObject<null | HostInstance>,
   text: string,
   viewCommands: ViewCommands,
 }): {
@@ -1112,7 +1136,7 @@ function useTextInputStateSynchronization_REFS({
   props: Props,
   mostRecentEventCount: number,
   selection: ?Selection,
-  inputRef: React.RefObject<null | React.ElementRef<HostComponent<mixed>>>,
+  inputRef: React.RefObject<null | HostInstance>,
   text: string,
   viewCommands: ViewCommands,
 }): {
@@ -1314,7 +1338,7 @@ function InternalTextInput(props: Props): React.Node {
     ...otherProps
   } = props;
 
-  const inputRef = useRef<null | React.ElementRef<HostComponent<mixed>>>(null);
+  const inputRef = useRef<null | HostInstance>(null);
 
   const selection: ?Selection =
     propsSelection == null
@@ -1332,8 +1356,8 @@ function InternalTextInput(props: Props): React.Node {
         : '';
 
   const viewCommands =
-    WindowsTextInputCommands ||
-    AndroidTextInputCommands || // [Windows]
+    WindowsTextInputCommands || // [Windows]
+    AndroidTextInputCommands ||
     (props.multiline === true
       ? RCTMultilineTextInputNativeCommands
       : RCTSinglelineTextInputNativeCommands);
@@ -1350,6 +1374,7 @@ function InternalTextInput(props: Props): React.Node {
       mostRecentEventCount,
       selection,
       text,
+      // $FlowFixMe[incompatible-call]
       viewCommands,
     });
 
@@ -1417,7 +1442,7 @@ function InternalTextInput(props: Props): React.Node {
               currentlyFocusedInput === inputRef.current
             );
           },
-          getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
+          getNativeRef(): ?HostInstance {
             return inputRef.current;
           },
           setSelection(start: number, end: number): void {
@@ -1571,7 +1596,7 @@ function InternalTextInput(props: Props): React.Node {
 
   // TextInput handles onBlur and onFocus events
   // so omitting onBlur and onFocus pressability handlers here.
-  const {onBlur, onFocus, ...eventHandlers} = usePressability(config) || {};
+  const {onBlur, onFocus, ...eventHandlers} = usePressability(config);
   const eventPhase = Object.freeze({Capturing: 1, Bubbling: 3});
   const _keyDown = (event: KeyEvent) => {
     if (props.keyDownEvents && event.isPropagationStopped() !== true) {
@@ -1911,11 +1936,11 @@ const autoCompleteWebToTextContentTypeMap = {
   username: 'username',
 };
 
-const ExportedForwardRef: React.AbstractComponent<
-  React.ElementConfig<typeof InternalTextInput>,
-  TextInputInstance,
+const ExportedForwardRef: component(
+  ref: React.RefSetter<TextInputInstance>,
+  ...props: React.ElementConfig<typeof InternalTextInput>
   // $FlowFixMe[incompatible-call]
-> = React.forwardRef(function TextInput(
+) = React.forwardRef(function TextInput(
   {
     allowFontScaling = true,
     rejectResponderTermination = true,

package/Libraries/Components/TextInput/TextInputState.js

@@ -13,7 +13,7 @@
 // through here.
 
 import type {
-  HostComponent,
+  HostInstance,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
@@ -24,24 +24,22 @@ import {Commands as iOSTextInputCommands} from '../../Components/TextInput/RCTSi
 
 const {findNodeHandle} = require('../../ReactNative/RendererProxy');
 const Platform = require('../../Utilities/Platform');
-const React = require('react');
-type ComponentRef = React.ElementRef<HostComponent<mixed>>;
 
-let currentlyFocusedInputRef: ?ComponentRef = null;
+let currentlyFocusedInputRef: ?HostInstance = null;
 const inputs = new Set<{
   blur(): void,
   focus(): void,
   measure(callback: MeasureOnSuccessCallback): void,
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
   measureLayout(
-    relativeToNativeNode: number | React.ElementRef<HostComponent<mixed>>,
+    relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: {...}): void,
 }>();
 
-function currentlyFocusedInput(): ?ComponentRef {
+function currentlyFocusedInput(): ?HostInstance {
   return currentlyFocusedInputRef;
 }
 
@@ -59,13 +57,13 @@ function currentlyFocusedField(): ?number {
   return findNodeHandle(currentlyFocusedInputRef);
 }
 
-function focusInput(textField: ?ComponentRef): void {
+function focusInput(textField: ?HostInstance): void {
   if (currentlyFocusedInputRef !== textField && textField != null) {
     currentlyFocusedInputRef = textField;
   }
 }
 
-function blurInput(textField: ?ComponentRef): void {
+function blurInput(textField: ?HostInstance): void {
   if (currentlyFocusedInputRef === textField && textField != null) {
     currentlyFocusedInputRef = null;
   }
@@ -92,7 +90,7 @@ function blurField(textFieldID: ?number) {
  * Focuses the specified text field
  * noop if the text field was already focused or if the field is not editable
  */
-function focusTextInput(textField: ?ComponentRef) {
+function focusTextInput(textField: ?HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -131,7 +129,7 @@ function focusTextInput(textField: ?ComponentRef) {
  * Unfocuses the specified text field
  * noop if it wasn't focused
  */
-function blurTextInput(textField: ?ComponentRef) {
+function blurTextInput(textField: ?HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -157,7 +155,7 @@ function blurTextInput(textField: ?ComponentRef) {
   }
 }
 
-function registerInput(textField: ComponentRef) {
+function registerInput(textField: HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -171,7 +169,7 @@ function registerInput(textField: ComponentRef) {
   inputs.add(textField);
 }
 
-function unregisterInput(textField: ComponentRef) {
+function unregisterInput(textField: HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -184,7 +182,7 @@ function unregisterInput(textField: ComponentRef) {
   inputs.delete(textField);
 }
 
-function isTextInput(textField: ComponentRef): boolean {
+function isTextInput(textField: HostInstance): boolean {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(

package/Libraries/Components/TextInput/TextInputState.win32.js

@@ -13,7 +13,7 @@
 // through here.
 
 import type {
-  HostComponent,
+  HostInstance,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
@@ -25,25 +25,22 @@ import {Commands as Win32TextInputCommands} from '../../Components/TextInput/Win
 
 const {findNodeHandle} = require('../../ReactNative/RendererProxy');
 const Platform = require('../../Utilities/Platform');
-const React = require('react');
 
-type ComponentRef = React.ElementRef<HostComponent<mixed>>;
-
-let currentlyFocusedInputRef: ?ComponentRef = null;
+let currentlyFocusedInputRef: ?HostInstance = null;
 const inputs = new Set<{
   blur(): void,
   focus(): void,
   measure(callback: MeasureOnSuccessCallback): void,
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
   measureLayout(
-    relativeToNativeNode: number | React.ElementRef<HostComponent<mixed>>,
+    relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: {...}): void,
 }>();
 
-function currentlyFocusedInput(): ?ComponentRef {
+function currentlyFocusedInput(): ?HostInstance {
   return currentlyFocusedInputRef;
 }
 
@@ -61,13 +58,13 @@ function currentlyFocusedField(): ?number {
   return findNodeHandle(currentlyFocusedInputRef);
 }
 
-function focusInput(textField: ?ComponentRef): void {
+function focusInput(textField: ?HostInstance): void {
   if (currentlyFocusedInputRef !== textField && textField != null) {
     currentlyFocusedInputRef = textField;
   }
 }
 
-function blurInput(textField: ?ComponentRef): void {
+function blurInput(textField: ?HostInstance): void {
   if (currentlyFocusedInputRef === textField && textField != null) {
     currentlyFocusedInputRef = null;
   }
@@ -94,7 +91,7 @@ function blurField(textFieldID: ?number) {
  * Focuses the specified text field
  * noop if the text field was already focused or if the field is not editable
  */
-function focusTextInput(textField: ?ComponentRef) {
+function focusTextInput(textField: ?HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -142,7 +139,7 @@ function focusTextInput(textField: ?ComponentRef) {
  * Unfocuses the specified text field
  * noop if it wasn't focused
  */
-function blurTextInput(textField: ?ComponentRef) {
+function blurTextInput(textField: ?HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -179,7 +176,7 @@ function blurTextInput(textField: ?ComponentRef) {
  * Should be called after the view has received focus and fired the onFocus event
  * noop if the focused text field is same
  */
-function setFocusedTextInput(textField: ComponentRef) {
+function setFocusedTextInput(textField: HostInstance) {
   if (currentlyFocusedInputRef !== textField && textField !== null) {
     currentlyFocusedInputRef = textField;
   }
@@ -190,14 +187,14 @@ function setFocusedTextInput(textField: ComponentRef) {
  * Should be called after the view has cleared focus and fired the onFocus event
  * noop if the focused text field is not same
  */
-function clearFocusedTextInput(textField: ComponentRef) {
+function clearFocusedTextInput(textField: HostInstance) {
   if (currentlyFocusedInputRef === textField && textField !== null) {
     currentlyFocusedInputRef = null;
   }
 }
 // Win32]
 
-function registerInput(textField: ComponentRef) {
+function registerInput(textField: HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -211,7 +208,7 @@ function registerInput(textField: ComponentRef) {
   inputs.add(textField);
 }
 
-function unregisterInput(textField: ComponentRef) {
+function unregisterInput(textField: HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -224,7 +221,7 @@ function unregisterInput(textField: ComponentRef) {
   inputs.delete(textField);
 }
 
-function isTextInput(textField: ComponentRef): boolean {
+function isTextInput(textField: HostInstance): boolean {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(

package/Libraries/Components/TextInput/Win32TextInputNativeComponent.js

@@ -8,6 +8,8 @@ import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import requireNativeComponent from '../../ReactNative/requireNativeComponent';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
+
+// $FlowFixMe[incompatible-type-arg]
 type NativeType = HostComponent<mixed>;
 
 type NativeCommands = TextInputNativeCommands<NativeType>;
@@ -17,6 +19,7 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
 });
 
 const WindowsTextInputComponent: NativeType =
+  // $FlowFixMe[incompatible-call]
   requireNativeComponent<mixed>('RCTTextInput');
 
 export default WindowsTextInputComponent;

package/Libraries/Components/Touchable/BoundingDimensions.js

@@ -5,9 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
 'use strict';
+
 import PooledClass from './PooledClass';
 
 const twoArgumentPooler = PooledClass.twoArgumentPooler;
@@ -19,11 +21,14 @@ const twoArgumentPooler = PooledClass.twoArgumentPooler;
  * @param {number} height Height of bounding rectangle.
  * @constructor BoundingDimensions
  */
-function BoundingDimensions(width, height) {
+// $FlowFixMe[missing-this-annot]
+function BoundingDimensions(width: number, height: number) {
   this.width = width;
   this.height = height;
 }
 
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[missing-this-annot]
 BoundingDimensions.prototype.destructor = function () {
   this.width = null;
   this.height = null;
@@ -33,13 +38,16 @@ BoundingDimensions.prototype.destructor = function () {
  * @param {HTMLElement} element Element to return `BoundingDimensions` for.
  * @return {BoundingDimensions} Bounding dimensions of `element`.
  */
-BoundingDimensions.getPooledFromElement = function (element) {
+BoundingDimensions.getPooledFromElement = function (
+  element: HTMLElement,
+): typeof BoundingDimensions {
+  // $FlowFixMe[prop-missing]
   return BoundingDimensions.getPooled(
     element.offsetWidth,
     element.offsetHeight,
   );
 };
 
-PooledClass.addPoolingTo(BoundingDimensions, twoArgumentPooler);
+PooledClass.addPoolingTo(BoundingDimensions as $FlowFixMe, twoArgumentPooler);
 
 module.exports = BoundingDimensions;

package/Libraries/Components/Touchable/Position.js

@@ -5,9 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
 'use strict';
+
 import PooledClass from './PooledClass';
 
 const twoArgumentPooler = PooledClass.twoArgumentPooler;
@@ -20,16 +22,19 @@ const twoArgumentPooler = PooledClass.twoArgumentPooler;
  * @param {number} windowStartKey Key that window starts at.
  * @param {number} windowEndKey Key that window ends at.
  */
-function Position(left, top) {
+// $FlowFixMe[missing-this-annot]
+function Position(left: number, top: number) {
   this.left = left;
   this.top = top;
 }
 
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[missing-this-annot]
 Position.prototype.destructor = function () {
   this.left = null;
   this.top = null;
 };
 
-PooledClass.addPoolingTo(Position, twoArgumentPooler);
+PooledClass.addPoolingTo(Position as $FlowFixMe, twoArgumentPooler);
 
 module.exports = Position;

package/Libraries/Components/Touchable/Touchable.js

@@ -713,13 +713,17 @@ const TouchableMixin = {
       return;
     }
     this.state.touchable.positionOnActivate &&
+      // $FlowFixMe[prop-missing]
       Position.release(this.state.touchable.positionOnActivate);
     this.state.touchable.dimensionsOnActivate &&
+      // $FlowFixMe[prop-missing]
       BoundingDimensions.release(this.state.touchable.dimensionsOnActivate);
+    // $FlowFixMe[prop-missing]
     this.state.touchable.positionOnActivate = Position.getPooled(
       globalX,
       globalY,
     );
+    // $FlowFixMe[prop-missing]
     this.state.touchable.dimensionsOnActivate = BoundingDimensions.getPooled(
       w,
       h,

package/Libraries/Components/Touchable/Touchable.win32.js

@@ -718,13 +718,17 @@ const TouchableMixin = {
       return;
     }
     this.state.touchable.positionOnActivate &&
+      // $FlowFixMe[prop-missing]
       Position.release(this.state.touchable.positionOnActivate);
     this.state.touchable.dimensionsOnActivate &&
+      // $FlowFixMe[prop-missing]
       BoundingDimensions.release(this.state.touchable.dimensionsOnActivate);
+    // $FlowFixMe[prop-missing]
     this.state.touchable.positionOnActivate = Position.getPooled(
       globalX,
       globalY,
     );
+    // $FlowFixMe[prop-missing]
     this.state.touchable.dimensionsOnActivate = BoundingDimensions.getPooled(
       w,
       h,

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -28,7 +28,7 @@ type Props = $ReadOnly<{|
   releaseVelocity?: ?number,
   style?: ?ViewStyleProp,
 
-  hostRef: React.Ref<typeof Animated.View>,
+  hostRef: React.RefSetter<React.ElementRef<typeof Animated.View>>,
 |}>;
 
 type State = $ReadOnly<{|
@@ -189,6 +189,7 @@ class TouchableBounce extends React.Component<Props, State> {
           this.props.onPress !== undefined &&
           !this.props.disabled
         }
+        // $FlowFixMe[prop-missing]
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}>
         {this.props.children}
@@ -215,4 +216,7 @@ class TouchableBounce extends React.Component<Props, State> {
 
 module.exports = (React.forwardRef((props, hostRef) => (
   <TouchableBounce {...props} hostRef={hostRef} />
-)): React.AbstractComponent<$ReadOnly<$Diff<Props, {|hostRef: mixed|}>>>);
+)): component(
+  ref: React.RefSetter<mixed>,
+  ...props: $ReadOnly<$Diff<Props, {|hostRef: mixed|}>>
+));

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -44,7 +44,7 @@ type Props = $ReadOnly<{|
   onHideUnderlay?: ?() => void,
   testOnly_pressed?: ?boolean,
 
-  hostRef: React.Ref<typeof View>,
+  hostRef: React.RefSetter<React.ElementRef<typeof View>>,
 |}>;
 
 type ExtraStyles = $ReadOnly<{|
@@ -381,10 +381,10 @@ class TouchableHighlight extends React.Component<Props, State> {
   }
 }
 
-const Touchable: React.AbstractComponent<
-  $ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
-  React.ElementRef<typeof View>,
-> = React.forwardRef((props, hostRef) => (
+const Touchable: component(
+  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: $ReadOnly<$Diff<Props, {|+hostRef: mixed|}>>
+) = React.forwardRef((props, hostRef) => (
   <TouchableHighlight {...props} hostRef={hostRef} />
 ));