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

package/Libraries/Components/ScrollView/ScrollView.js

@@ -8,11 +8,7 @@
  * @flow strict-local
  */
 
-import type {
-  TScrollViewNativeComponentInstance,
-  TScrollViewNativeImperativeHandle,
-} from '../../../src/private/components/useSyncOnScroll';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PointProp} from '../../StyleSheet/PointPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
@@ -46,7 +42,6 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Dimensions from '../../Utilities/Dimensions';
 import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
-import EventEmitter from '../../vendor/emitter/EventEmitter';
 import Keyboard from '../Keyboard/Keyboard';
 import TextInputState from '../TextInput/TextInputState';
 import processDecelerationRate from './processDecelerationRate';
@@ -152,7 +147,7 @@ export type DecelerationRateType = 'fast' | 'normal' | number;
 export type ScrollResponderType = ScrollViewImperativeMethods;
 
 type PublicScrollViewInstance = $ReadOnly<{|
-  ...$Exact<TScrollViewNativeComponentInstance>,
+  ...HostInstance,
   ...ScrollViewImperativeMethods,
 |}>;
 
@@ -371,10 +366,10 @@ type AndroidProps = $ReadOnly<{|
   fadingEdgeLength?: ?number,
 |}>;
 
-type StickyHeaderComponentType = React.AbstractComponent<
-  ScrollViewStickyHeaderProps,
-  $ReadOnly<interface {setNextHeaderY: number => void}>,
->;
+type StickyHeaderComponentType = component(
+  ref?: React.RefSetter<$ReadOnly<interface {setNextHeaderY: number => void}>>,
+  ...ScrollViewStickyHeaderProps
+);
 
 export type Props = $ReadOnly<{|
   ...ViewProps,
@@ -743,10 +738,6 @@ class ScrollView extends React.Component<Props, State> {
   _subscriptionKeyboardDidShow: ?EventSubscription = null;
   _subscriptionKeyboardDidHide: ?EventSubscription = null;
 
-  #onScrollEmitter: ?EventEmitter<{
-    scroll: [{x: number, y: number}],
-  }> = null;
-
   state: State = {
     layoutHeight: null,
   };
@@ -817,8 +808,6 @@ class ScrollView extends React.Component<Props, State> {
     if (this._scrollAnimatedValueAttachment) {
       this._scrollAnimatedValueAttachment.detach();
     }
-
-    this.#onScrollEmitter?.removeAllListeners();
   }
 
   /**
@@ -844,9 +833,8 @@ class ScrollView extends React.Component<Props, State> {
     return this._innerView.nativeInstance;
   };
 
-  getNativeScrollRef: () => TScrollViewNativeComponentInstance | null = () => {
-    const {nativeInstance} = this._scrollView;
-    return nativeInstance == null ? null : nativeInstance.componentRef.current;
+  getNativeScrollRef: () => HostInstance | null = () => {
+    return this._scrollView.nativeInstance;
   };
 
   /**
@@ -937,20 +925,6 @@ class ScrollView extends React.Component<Props, State> {
     Commands.flashScrollIndicators(component);
   };
 
-  _subscribeToOnScroll: (
-    callback: ({x: number, y: number}) => void,
-  ) => EventSubscription = callback => {
-    let onScrollEmitter = this.#onScrollEmitter;
-    if (onScrollEmitter == null) {
-      onScrollEmitter = new EventEmitter();
-      this.#onScrollEmitter = onScrollEmitter;
-      // This is the first subscription, so make sure the native component is
-      // also configured to output synchronous scroll events.
-      this._scrollView.nativeInstance?.unstable_setEnableSyncOnScroll(true);
-    }
-    return onScrollEmitter.addListener('scroll', callback);
-  };
-
   /**
    * This method should be used as the callback to onFocus in a TextInputs'
    * parent view. Note that any module using this mixin needs to return
@@ -961,12 +935,12 @@ class ScrollView extends React.Component<Props, State> {
    * @param {bool} preventNegativeScrolling Whether to allow pulling the content
    *        down to make it meet the keyboard's top. Default is false.
    */
-  scrollResponderScrollNativeHandleToKeyboard: <T>(
-    nodeHandle: number | React.ElementRef<HostComponent<T>>,
+  scrollResponderScrollNativeHandleToKeyboard: (
+    nodeHandle: number | HostInstance,
     additionalOffset?: number,
     preventNegativeScrollOffset?: boolean,
-  ) => void = <T>(
-    nodeHandle: number | React.ElementRef<HostComponent<T>>,
+  ) => void = (
+    nodeHandle: number | HostInstance,
     additionalOffset?: number,
     preventNegativeScrollOffset?: boolean,
   ) => {
@@ -1154,11 +1128,6 @@ class ScrollView extends React.Component<Props, State> {
   _handleScroll = (e: ScrollEvent) => {
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
-
-    this.#onScrollEmitter?.emit('scroll', {
-      x: e.nativeEvent.contentOffset.x,
-      y: e.nativeEvent.contentOffset.y,
-    });
   };
 
   _handleLayout = (e: LayoutEvent) => {
@@ -1181,45 +1150,36 @@ class ScrollView extends React.Component<Props, State> {
       (instance: InnerViewInstance): InnerViewInstance => instance,
     );
 
-  _scrollView: RefForwarder<
-    TScrollViewNativeImperativeHandle,
-    PublicScrollViewInstance | null,
-  > = createRefForwarder(nativeImperativeHandle => {
-    const nativeInstance = nativeImperativeHandle.componentRef.current;
-    if (nativeInstance == null) {
-      return null;
-    }
-
-    // This is a hack. Ideally we would forwardRef  to the underlying
-    // host component. However, since ScrollView has it's own methods that can be
-    // called as well, if we used the standard forwardRef then these
-    // methods wouldn't be accessible and thus be a breaking change.
-    //
-    // Therefore we edit ref to include ScrollView's public methods so that
-    // they are callable from the ref.
-
-    // $FlowFixMe[prop-missing] - Known issue with appending custom methods.
-    const publicInstance: PublicScrollViewInstance = Object.assign(
-      nativeInstance,
-      {
-        getScrollResponder: this.getScrollResponder,
-        getScrollableNode: this.getScrollableNode,
-        getInnerViewNode: this.getInnerViewNode,
-        getInnerViewRef: this.getInnerViewRef,
-        getNativeScrollRef: this.getNativeScrollRef,
-        scrollTo: this.scrollTo,
-        scrollToEnd: this.scrollToEnd,
-        flashScrollIndicators: this.flashScrollIndicators,
-        scrollResponderZoomTo: this.scrollResponderZoomTo,
-        // TODO: Replace unstable_subscribeToOnScroll once scrollView.addEventListener('scroll', (e: ScrollEvent) => {}, {passive: false});
-        unstable_subscribeToOnScroll: this._subscribeToOnScroll,
-        scrollResponderScrollNativeHandleToKeyboard:
-          this.scrollResponderScrollNativeHandleToKeyboard,
-      },
-    );
+  _scrollView: RefForwarder<HostInstance, PublicScrollViewInstance | null> =
+    createRefForwarder(nativeInstance => {
+      // This is a hack. Ideally we would forwardRef  to the underlying
+      // host component. However, since ScrollView has it's own methods that can be
+      // called as well, if we used the standard forwardRef then these
+      // methods wouldn't be accessible and thus be a breaking change.
+      //
+      // Therefore we edit ref to include ScrollView's public methods so that
+      // they are callable from the ref.
+
+      // $FlowFixMe[prop-missing] - Known issue with appending custom methods.
+      const publicInstance: PublicScrollViewInstance = Object.assign(
+        nativeInstance,
+        {
+          getScrollResponder: this.getScrollResponder,
+          getScrollableNode: this.getScrollableNode,
+          getInnerViewNode: this.getInnerViewNode,
+          getInnerViewRef: this.getInnerViewRef,
+          getNativeScrollRef: this.getNativeScrollRef,
+          scrollTo: this.scrollTo,
+          scrollToEnd: this.scrollToEnd,
+          flashScrollIndicators: this.flashScrollIndicators,
+          scrollResponderZoomTo: this.scrollResponderZoomTo,
+          scrollResponderScrollNativeHandleToKeyboard:
+            this.scrollResponderScrollNativeHandleToKeyboard,
+        },
+      );
 
-    return publicInstance;
-  });
+      return publicInstance;
+    });
 
   /**
    * Warning, this may be called several times for a single keyboard opening.
@@ -1829,8 +1789,9 @@ class ScrollView extends React.Component<Props, State> {
     }
 
     const refreshControl = this.props.refreshControl;
-    const scrollViewRef: React.RefSetter<TScrollViewNativeImperativeHandle | null> =
-      this._scrollView.getForwardingRef(this.props.scrollViewRef);
+    const scrollViewRef = this._scrollView.getForwardingRef(
+      this.props.scrollViewRef,
+    );
 
     if (refreshControl) {
       if (Platform.OS === 'ios') {
@@ -1935,7 +1896,10 @@ function createRefForwarder<TNativeInstance, TPublicInstance>(
 // NOTE: This wrapper component is necessary because `ScrollView` is a class
 // component and we need to map `ref` to a differently named prop. This can be
 // removed when `ScrollView` is a functional component.
-const Wrapper = React.forwardRef(function Wrapper(
+const Wrapper: component(
+  ref: React.RefSetter<PublicScrollViewInstance>,
+  ...props: Props
+) = React.forwardRef(function Wrapper(
   props: Props,
   ref: ?React.RefSetter<PublicScrollViewInstance>,
 ): React.Node {
@@ -1949,8 +1913,5 @@ Wrapper.displayName = 'ScrollView';
 // $FlowExpectedError[prop-missing]
 Wrapper.Context = ScrollViewContext;
 
-module.exports = ((Wrapper: $FlowFixMe): React.AbstractComponent<
-  React.ElementConfig<typeof ScrollView>,
-  PublicScrollViewInstance,
-> &
+module.exports = ((Wrapper: $FlowFixMe): typeof Wrapper &
   ScrollViewComponentStatics);

package/Libraries/Components/ScrollView/ScrollViewCommands.js

@@ -14,7 +14,7 @@ import type {Double} from '../../Types/CodegenTypes';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import * as React from 'react';
 
-type ScrollViewNativeComponentType = HostComponent<mixed>;
+type ScrollViewNativeComponentType = HostComponent<{...}>;
 interface NativeCommands {
   +flashScrollIndicators: (
     viewRef: React.ElementRef<ScrollViewNativeComponentType>,

package/Libraries/Components/ScrollView/ScrollViewContext.js

@@ -18,5 +18,7 @@ if (__DEV__) {
 }
 export default ScrollViewContext;
 
+// $FlowFixMe[incompatible-type] frozen objects are readonly
 export const HORIZONTAL: Value = Object.freeze({horizontal: true});
+// $FlowFixMe[incompatible-type] frozen objects are readonly
 export const VERTICAL: Value = Object.freeze({horizontal: false});

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -45,7 +45,6 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
             diff: require('../../Utilities/differ/pointsDiffer'),
           },
           decelerationRate: true,
-          enableSyncOnScroll: true, // Fabric only.
           disableIntervalMomentum: true,
           maintainVisibleContentPosition: true,
           pagingEnabled: true,
@@ -135,7 +134,6 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           contentInsetAdjustmentBehavior: true,
           decelerationRate: true,
           endDraggingSensitivityMultiplier: true,
-          enableSyncOnScroll: true, // Fabric only.
           directionalLockEnabled: true,
           disableIntervalMomentum: true,
           indicatorStyle: true,

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -38,10 +38,10 @@ type Instance = {
   ...
 };
 
-const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
-  Props,
-  Instance,
-> = React.forwardRef(function ScrollViewStickyHeader(props, forwardedRef) {
+const ScrollViewStickyHeaderWithForwardedRef: component(
+  ref: React.RefSetter<Instance>,
+  ...props: Props
+) = React.forwardRef(function ScrollViewStickyHeader(props, forwardedRef) {
   const {
     inverted,
     scrollViewHeight,
@@ -65,8 +65,8 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
     ref.setNextHeaderY = setNextHeaderLayoutY;
     setIsFabric(isFabricPublicInstance(ref));
   }, []);
-  const ref: (React.ElementRef<typeof Animated.View> | null) => void =
-    // $FlowFixMe[incompatible-type] - Ref is mutated by `callbackRef`.
+  const ref: React.RefSetter<React.ElementRef<typeof Animated.View>> =
+    // $FlowFixMe[prop-missing] - Instance is mutated to have `setNextHeaderY`.
     useMergeRefs<Instance>(callbackRef, forwardedRef);
 
   const offset = useMemo(
@@ -275,12 +275,12 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
       : null;
 
   return (
-    /* $FlowFixMe[prop-missing] passthroughAnimatedPropExplicitValues isn't properly
-       included in the Animated.View flow type. */
     <Animated.View
       collapsable={false}
       nativeID={props.nativeID}
       onLayout={_onLayout}
+      /* $FlowFixMe[prop-missing] passthroughAnimatedPropExplicitValues isn't properly
+         included in the Animated.View flow type. */
       ref={ref}
       style={[
         child.props.style,
@@ -301,7 +301,6 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
 const styles = StyleSheet.create({
   header: {
     zIndex: 10,
-    position: 'relative',
   },
   fill: {
     flex: 1,

package/Libraries/Components/Switch/Switch.js

@@ -130,12 +130,14 @@ const returnsTrue = () => true;
   ```
  */
 
-const SwitchWithForwardedRef: React.AbstractComponent<
-  Props,
-  React.ElementRef<
-    typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
-  >,
-> = React.forwardRef(function Switch(props, forwardedRef): React.Node {
+type SwitchRef = React.ElementRef<
+  typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
+>;
+
+const SwitchWithForwardedRef: component(
+  ref: React.RefSetter<SwitchRef>,
+  ...props: Props
+) = React.forwardRef(function Switch(props, forwardedRef): React.Node {
   const {
     disabled,
     ios_backgroundColor,

package/Libraries/Components/TextInput/InputAccessoryView.js

@@ -87,7 +87,7 @@ type Props = $ReadOnly<{|
   backgroundColor?: ?ColorValue,
 |}>;
 
-const InputAccessoryView: React.AbstractComponent<Props> = (props: Props) => {
+const InputAccessoryView: React.ComponentType<Props> = (props: Props) => {
   const {width} = useWindowDimensions();
 
   if (Platform.OS === 'ios') {

package/Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent.js

@@ -18,7 +18,7 @@ import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentR
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import RCTTextInputViewConfig from './RCTTextInputViewConfig';
 
-type NativeType = HostComponent<mixed>;
+type NativeType = HostComponent<{...}>;
 
 type NativeCommands = TextInputNativeCommands<NativeType>;
 
@@ -35,11 +35,11 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   },
 };
 
-const MultilineTextInputNativeComponent: HostComponent<mixed> =
-  NativeComponentRegistry.get<mixed>(
+const MultilineTextInputNativeComponent: HostComponent<{...}> =
+  NativeComponentRegistry.get<{...}>(
     'RCTMultilineTextInputView',
     () => __INTERNAL_VIEW_CONFIG,
   );
 
 // flowlint-next-line unclear-type:off
-export default ((MultilineTextInputNativeComponent: any): HostComponent<mixed>);
+export default ((MultilineTextInputNativeComponent: any): HostComponent<{...}>);

package/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js

@@ -18,7 +18,7 @@ import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentR
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import RCTTextInputViewConfig from './RCTTextInputViewConfig';
 
-type NativeType = HostComponent<mixed>;
+type NativeType = HostComponent<{...}>;
 
 type NativeCommands = TextInputNativeCommands<NativeType>;
 
@@ -31,11 +31,13 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   ...RCTTextInputViewConfig,
 };
 
-const SinglelineTextInputNativeComponent: HostComponent<mixed> =
-  NativeComponentRegistry.get<mixed>(
+const SinglelineTextInputNativeComponent: HostComponent<{...}> =
+  NativeComponentRegistry.get<{...}>(
     'RCTSinglelineTextInputView',
     () => __INTERNAL_VIEW_CONFIG,
   );
 
 // flowlint-next-line unclear-type:off
-export default ((SinglelineTextInputNativeComponent: any): HostComponent<mixed>);
+export default ((SinglelineTextInputNativeComponent: any): HostComponent<{
+  ...
+}>);

package/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -104,7 +104,6 @@ const RCTTextInputViewConfig = {
     textTransform: true,
     textAlign: true,
     fontFamily: true,
-    lineBreakModeIOS: true,
     lineHeight: true,
     isHighlighted: true,
     writingDirection: true,
@@ -122,6 +121,7 @@ const RCTTextInputViewConfig = {
     },
     editable: true,
     inputAccessoryViewID: true,
+    inputAccessoryViewButtonLabel: true,
     caretHidden: true,
     enablesReturnKeyAutomatically: true,
     placeholderTextColor: {
@@ -152,6 +152,7 @@ const RCTTextInputViewConfig = {
     showSoftInputOnFocus: true,
     autoFocus: true,
     lineBreakStrategyIOS: true,
+    lineBreakModeIOS: true,
     smartInsertDelete: true,
     ...ConditionallyIgnoredEventHandlers({
       onChange: true,

package/Libraries/Components/TextInput/TextInput.d.ts

@@ -11,7 +11,7 @@ import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
 import {TimerMixin} from '../../../types/private/TimerMixin';
 import {
-  HostComponent,
+  HostInstance,
   NativeMethods,
 } from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
@@ -255,6 +255,11 @@ export interface TextInputIOSProps {
    *  - `'birthdateDay'` (iOS 17+)
    *  - `'birthdateMonth'` (iOS 17+)
    *  - `'birthdateYear'` (iOS 17+)
+   *  - `'cellularEID'` (iOS 17.4+)
+   *  - `'cellularIMEI'` (iOS 17.4+)
+   *  - `'dateTime'` (iOS 15+)
+   *  - `'flightNumber'` (iOS 15+)
+   *  - `'shipmentTrackingNumber'` (iOS 15+)
    *
    */
   textContentType?:
@@ -299,6 +304,11 @@ export interface TextInputIOSProps {
     | 'birthdateDay'
     | 'birthdateMonth'
     | 'birthdateYear'
+    | 'cellularEID'
+    | 'cellularIMEI'
+    | 'dateTime'
+    | 'flightNumber'
+    | 'shipmentTrackingNumber'
     | undefined;
 
   /**
@@ -316,6 +326,19 @@ export interface TextInputIOSProps {
     | 'push-out'
     | undefined;
 
+  /**
+   * Set line break mode on iOS.
+   * @platform ios
+   */
+  lineBreakModeIOS?:
+    | 'wordWrapping'
+    | 'char'
+    | 'clip'
+    | 'head'
+    | 'middle'
+    | 'tail'
+    | undefined;
+
   /**
    * 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.
@@ -937,21 +960,21 @@ interface TextInputState {
    * Returns the ref of the currently focused text field, if one exists
    * If no text field is focused it returns null
    */
-  currentlyFocusedInput(): React.ElementRef<HostComponent<unknown>>;
+  currentlyFocusedInput(): HostInstance;
 
   /**
    * @param textField ref of the text field to focus
    * Focuses the specified text field
    * noop if the text field was already focused
    */
-  focusTextInput(textField?: React.ElementRef<HostComponent<unknown>>): void;
+  focusTextInput(textField?: HostInstance): void;
 
   /**
    * @param textField ref of the text field to focus
    * Unfocuses the specified text field
    * noop if it wasn't focused
    */
-  blurTextInput(textField?: React.ElementRef<HostComponent<unknown>>): void;
+  blurTextInput(textField?: HostInstance): void;
 }
 
 /**

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

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {
   PressEvent,
   ScrollEvent,
@@ -22,7 +22,6 @@ import {
   type ViewStyleProp,
 } from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
-type ComponentRef = React.ElementRef<HostComponent<mixed>>;
 
 type ReactRefSetter<T> = {current: null | T, ...} | ((ref: null | T) => mixed);
 
@@ -198,7 +197,12 @@ export type TextContentType =
   | 'birthdate'
   | 'birthdateDay'
   | 'birthdateMonth'
-  | 'birthdateYear';
+  | 'birthdateYear'
+  | 'cellularEID'
+  | 'cellularIMEI'
+  | 'dateTime'
+  | 'flightNumber'
+  | 'shipmentTrackingNumber';
 
 export type enterKeyHintType =
   | 'enter'
@@ -262,6 +266,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
@@ -312,6 +322,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.
@@ -608,9 +631,7 @@ export type Props = $ReadOnly<{|
    */
   editable?: ?boolean,
 
-  forwardedRef?: ?ReactRefSetter<
-    React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
-  >,
+  forwardedRef?: ?ReactRefSetter<HostInstance & ImperativeMethods>,
 
   /**
    * `enterKeyHint` defines what action label (or icon) to present for the enter key on virtual keyboards.
@@ -956,7 +977,7 @@ export type Props = $ReadOnly<{|
 type ImperativeMethods = $ReadOnly<{|
   clear: () => void,
   isFocused: () => boolean,
-  getNativeRef: () => ?React.ElementRef<HostComponent<mixed>>,
+  getNativeRef: () => ?HostInstance,
   setSelection: (start: number, end: number) => void,
 |}>;
 
@@ -1071,22 +1092,18 @@ type ImperativeMethods = $ReadOnly<{|
  * or control this param programmatically with native code.
  *
  */
-type InternalTextInput = (props: Props) => React.Node;
+type InternalTextInput = component(
+  ref: React.RefSetter<$ReadOnly<{...HostInstance, ...ImperativeMethods}>>,
+  ...Props
+);
 
 export type TextInputComponentStatics = $ReadOnly<{|
   State: $ReadOnly<{|
-    currentlyFocusedInput: () => ?ComponentRef,
+    currentlyFocusedInput: () => ?HostInstance,
     currentlyFocusedField: () => ?number,
-    focusTextInput: (textField: ?ComponentRef) => void,
-    blurTextInput: (textField: ?ComponentRef) => void,
+    focusTextInput: (textField: ?HostInstance) => void,
+    blurTextInput: (textField: ?HostInstance) => void,
   |}>,
 |}>;
 
-export type TextInputType = React.AbstractComponent<
-  React.ElementConfig<InternalTextInput>,
-  $ReadOnly<{|
-    ...React.ElementRef<HostComponent<mixed>>,
-    ...ImperativeMethods,
-  |}>,
-> &
-  TextInputComponentStatics;
+export type TextInputType = InternalTextInput & TextInputComponentStatics;