Update type names to reduce symbol duplication (#50443)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50443

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D72298410

fbshipit-source-id: dd1b0fdfe63f64e97cc5001b8e7baeaf37c0d5d9

packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -51,7 +51,7 @@ export type KeyboardAvoidingViewProps = $ReadOnly<{
   keyboardVerticalOffset?: number,
 }>;
 
-type State = {
+type KeyboardAvoidingViewState = {
   bottom: number,
 };
 
@@ -61,7 +61,7 @@ type State = {
  */
 class KeyboardAvoidingView extends React.Component<
   KeyboardAvoidingViewProps,
-  State,
+  KeyboardAvoidingViewState,
 > {
   _frame: ?ViewLayout = null;
   _keyboardEvent: ?KeyboardEvent = null;
@@ -178,7 +178,10 @@ class KeyboardAvoidingView extends React.Component<
     }
   };
 
-  componentDidUpdate(_: KeyboardAvoidingViewProps, prevState: State): void {
+  componentDidUpdate(
+    _: KeyboardAvoidingViewProps,
+    prevState: KeyboardAvoidingViewState,
+  ): void {
     const enabled = this.props.enabled ?? true;
     if (enabled && this._bottom !== prevState.bottom) {
       this.setState({bottom: this._bottom});

packages/react-native/Libraries/Components/ScrollView/ScrollView.js

@@ -20,7 +20,6 @@ import type {
 } from '../../Types/CoreEventTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 import type {KeyboardEvent, KeyboardMetrics} from '../Keyboard/Keyboard';
-import typeof View from '../View/View';
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {ScrollViewStickyHeaderProps} from './ScrollViewStickyHeader';
 
@@ -44,6 +43,7 @@ import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
 import Keyboard from '../Keyboard/Keyboard';
 import TextInputState from '../TextInput/TextInputState';
+import View from '../View/View';
 import processDecelerationRate from './processDecelerationRate';
 import Commands from './ScrollViewCommands';
 import ScrollViewContext, {HORIZONTAL, VERTICAL} from './ScrollViewContext';
@@ -153,7 +153,7 @@ export interface PublicScrollViewInstance
   extends HostInstance,
     ScrollViewImperativeMethods {}
 
-type InnerViewInstance = React.ElementRef<View>;
+type InnerViewInstance = React.ElementRef<typeof View>;
 
 export type ScrollViewPropsIOS = $ReadOnly<{
   /**
@@ -655,7 +655,7 @@ export type ScrollViewProps = $ReadOnly<{
   scrollViewRef?: React.RefSetter<PublicScrollViewInstance>,
 }>;
 
-type State = {
+type ScrollViewState = {
   layoutHeight: ?number,
 };
 
@@ -700,7 +700,7 @@ export type ScrollViewComponentStatics = $ReadOnly<{
  * multiple columns, infinite scroll loading, or any number of other features it
  * supports out of the box.
  */
-class ScrollView extends React.Component<ScrollViewProps, State> {
+class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
   static Context: typeof ScrollViewContext = ScrollViewContext;
 
   constructor(props: ScrollViewProps) {
@@ -742,7 +742,7 @@ class ScrollView extends React.Component<ScrollViewProps, State> {
   _subscriptionKeyboardDidShow: ?EventSubscription = null;
   _subscriptionKeyboardDidHide: ?EventSubscription = null;
 
-  state: State = {
+  state: ScrollViewState = {
     layoutHeight: null,
   };
 

packages/react-native/Libraries/Components/Touchable/Touchable.js

@@ -144,7 +144,7 @@ const States = {
   ERROR: 'ERROR',
 };
 
-type State =
+type TouchableState =
   | typeof States.NOT_RESPONDER
   | typeof States.RESPONDER_INACTIVE_PRESS_IN
   | typeof States.RESPONDER_INACTIVE_PRESS_OUT
@@ -397,7 +397,7 @@ const TouchableMixinImpl = {
    */
   touchableGetInitialState: function (): {
     touchable: {
-      touchState: ?State,
+      touchState: ?TouchableState,
       responderID: ?GestureResponderEvent['currentTarget'],
     },
   } {
@@ -806,7 +806,7 @@ const TouchableMixinImpl = {
     this.longPressDelayTimeout = null;
   },
 
-  _isHighlight: function (state: State): boolean {
+  _isHighlight: function (state: TouchableState): boolean {
     return (
       state === States.RESPONDER_ACTIVE_PRESS_IN ||
       state === States.RESPONDER_ACTIVE_LONG_PRESS_IN
@@ -849,8 +849,8 @@ const TouchableMixinImpl = {
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
   _performSideEffectsForTransition: function (
-    curState: State,
-    nextState: State,
+    curState: TouchableState,
+    nextState: TouchableState,
     signal: Signal,
     e: GestureResponderEvent,
   ) {

packages/react-native/Libraries/Components/Touchable/TouchableBounce.js

@@ -19,7 +19,7 @@ import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+type TouchableBounceProps = $ReadOnly<{
   ...React.ElementConfig<TouchableWithoutFeedback>,
 
   onPressAnimationComplete?: ?() => void,
@@ -31,13 +31,16 @@ type Props = $ReadOnly<{
   hostRef: React.RefSetter<React.ElementRef<typeof Animated.View>>,
 }>;
 
-type State = $ReadOnly<{
+type TouchableBounceState = $ReadOnly<{
   pressability: Pressability,
   scale: Animated.Value,
 }>;
 
-class TouchableBounce extends React.Component<Props, State> {
-  state: State = {
+class TouchableBounce extends React.Component<
+  TouchableBounceProps,
+  TouchableBounceState,
+> {
+  state: TouchableBounceState = {
     pressability: new Pressability(this._createPressabilityConfig()),
     scale: new Animated.Value(1),
   };
@@ -201,7 +204,10 @@ class TouchableBounce extends React.Component<Props, State> {
     );
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidUpdate(
+    prevProps: TouchableBounceProps,
+    prevState: TouchableBounceState,
+  ) {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
@@ -219,5 +225,5 @@ export default (React.forwardRef((props, hostRef: React.RefSetter<mixed>) => (
   <TouchableBounce {...props} hostRef={hostRef} />
 )): component(
   ref: React.RefSetter<mixed>,
-  ...props: $ReadOnly<$Diff<Props, {hostRef: mixed}>>
+  ...props: $ReadOnly<$Diff<TouchableBounceProps, {hostRef: mixed}>>
 ));

packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js

@@ -70,7 +70,7 @@ type ExtraStyles = $ReadOnly<{
   underlay: ViewStyleProp,
 }>;
 
-type State = $ReadOnly<{
+type TouchableHighlightState = $ReadOnly<{
   pressability: Pressability,
   extraStyles: ?ExtraStyles,
 }>;
@@ -173,12 +173,12 @@ type State = $ReadOnly<{
  */
 class TouchableHighlightImpl extends React.Component<
   TouchableHighlightProps,
-  State,
+  TouchableHighlightState,
 > {
   _hideTimeout: ?TimeoutID;
   _isMounted: boolean = false;
 
-  state: State = {
+  state: TouchableHighlightState = {
     pressability: new Pressability(this._createPressabilityConfig()),
     extraStyles:
       this.props.testOnly_pressed === true ? this._createExtraStyles() : null,
@@ -389,7 +389,10 @@ class TouchableHighlightImpl extends React.Component<
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
-  componentDidUpdate(prevProps: TouchableHighlightProps, prevState: State) {
+  componentDidUpdate(
+    prevProps: TouchableHighlightProps,
+    prevState: TouchableHighlightState,
+  ) {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 

packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -112,7 +112,7 @@ export type TouchableNativeFeedbackProps = $ReadOnly<{
   useForeground?: ?boolean,
 }>;
 
-type State = $ReadOnly<{
+type TouchableNativeFeedbackState = $ReadOnly<{
   pressability: Pressability,
 }>;
 
@@ -128,7 +128,7 @@ type State = $ReadOnly<{
  */
 class TouchableNativeFeedback extends React.Component<
   TouchableNativeFeedbackProps,
-  State,
+  TouchableNativeFeedbackState,
 > {
   /**
    * Creates an object that represents android theme's default background for
@@ -204,7 +204,7 @@ class TouchableNativeFeedback extends React.Component<
   static canUseNativeForeground: () => boolean = () =>
     Platform.OS === 'android';
 
-  state: State = {
+  state: TouchableNativeFeedbackState = {
     pressability: new Pressability(this._createPressabilityConfig()),
   };
 
@@ -383,7 +383,7 @@ class TouchableNativeFeedback extends React.Component<
 
   componentDidUpdate(
     prevProps: TouchableNativeFeedbackProps,
-    prevState: State,
+    prevState: TouchableNativeFeedbackState,
   ) {
     this.state.pressability.configure(this._createPressabilityConfig());
   }

packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js

@@ -82,7 +82,7 @@ export type TouchableOpacityProps = $ReadOnly<{
   ...TouchableOpacityBaseProps,
 }>;
 
-type State = $ReadOnly<{
+type TouchableOpacityState = $ReadOnly<{
   anim: Animated.Value,
   pressability: Pressability,
 }>;
@@ -171,8 +171,11 @@ type State = $ReadOnly<{
  * ```
  *
  */
-class TouchableOpacity extends React.Component<TouchableOpacityProps, State> {
-  state: State = {
+class TouchableOpacity extends React.Component<
+  TouchableOpacityProps,
+  TouchableOpacityState,
+> {
+  state: TouchableOpacityState = {
     anim: new Animated.Value(this._getChildStyleOpacityWithDefault()),
     pressability: new Pressability(this._createPressabilityConfig()),
   };
@@ -345,7 +348,10 @@ class TouchableOpacity extends React.Component<TouchableOpacityProps, State> {
     );
   }
 
-  componentDidUpdate(prevProps: TouchableOpacityProps, prevState: State) {
+  componentDidUpdate(
+    prevProps: TouchableOpacityProps,
+    prevState: TouchableOpacityState,
+  ) {
     this.state.pressability.configure(this._createPressabilityConfig());
     if (
       this.props.disabled !== prevProps.disabled ||

packages/react-native/Libraries/Image/Image.js.flow

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {Image} from './ImageTypes.flow';
+import type {ImageType} from './ImageTypes.flow';
 
 export type {
   ImageProgressEventIOS,
@@ -24,4 +24,4 @@ export type {
 
 export type {ImageResolvedAssetSource, ImageSize} from './ImageTypes.flow';
 
-declare export default Image;
+declare export default ImageType;

packages/react-native/Libraries/Image/ImageInjection.js

@@ -11,7 +11,7 @@
 import type {
   AbstractImageAndroid,
   AbstractImageIOS,
-  Image as ImageComponent,
+  ImageType as ImageComponent,
 } from './ImageTypes.flow';
 
 import useMergeRefs from '../Utilities/useMergeRefs';

packages/react-native/Libraries/Image/ImageProps.js

@@ -21,7 +21,7 @@ import type {
   LayoutChangeEvent,
   NativeSyntheticEvent,
 } from '../Types/CoreEventTypes';
-import typeof Image from './Image';
+import type {ImageType} from './ImageTypes.flow';
 import type {ImageResizeMode} from './ImageResizeMode';
 import type {ImageSource, ImageURISource} from './ImageSource';
 import type React from 'react';
@@ -367,5 +367,5 @@ export type ImageBackgroundProps = $ReadOnly<{
    *
    * See https://reactnative.dev/docs/imagebackground#imageref
    */
-  imageRef?: RefSetter<ElementRef<Image>>,
+  imageRef?: RefSetter<ElementRef<ImageType>>,
 }>;

packages/react-native/Libraries/Image/ImageTypes.flow.js

@@ -83,6 +83,6 @@ export type AbstractImageIOS = component(
 
 export type ImageIOS = AbstractImageIOS & ImageComponentStaticsIOS;
 
-export type Image = ImageIOS | ImageAndroid;
+export type ImageType = ImageIOS | ImageAndroid;
 
 export type {ImageProps} from './ImageProps';

packages/react-native/Libraries/Modal/Modal.js

@@ -197,11 +197,11 @@ function confirmProps(props: ModalProps) {
 
 // Create a state to track whether the Modal is rendering or not.
 // This is the only prop that controls whether the modal is rendered or not.
-type State = {
+type ModalState = {
   isRendered: boolean,
 };
 
-class Modal extends React.Component<ModalProps, State> {
+class Modal extends React.Component<ModalProps, ModalState> {
   static defaultProps: {hardwareAccelerated: boolean, visible: boolean} = {
     visible: true,
     hardwareAccelerated: false,

packages/react-native/Libraries/Text/Text.js

@@ -35,7 +35,7 @@ type TextForwardRef = React.ElementRef<
  *
  * @see https://reactnative.dev/docs/text
  */
-const Text: component(
+const TextImpl: component(
   ref?: React.RefSetter<TextForwardRef>,
   ...props: TextProps
 ) = React.forwardRef(
@@ -330,7 +330,7 @@ const Text: component(
   },
 );
 
-Text.displayName = 'Text';
+TextImpl.displayName = 'Text';
 
 type TextPressabilityProps = $ReadOnly<{
   onLongPress?: ?(event: GestureResponderEvent) => mixed,
@@ -536,4 +536,4 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
-export default Text;
+export default TextImpl;

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -1700,15 +1700,18 @@ exports[`public API should not change unintentionally Libraries/Components/Keybo
   enabled?: ?boolean,
   keyboardVerticalOffset?: number,
 }>;
-type State = {
+type KeyboardAvoidingViewState = {
   bottom: number,
 };
 declare class KeyboardAvoidingView
-  extends React.Component<KeyboardAvoidingViewProps, State>
+  extends React.Component<KeyboardAvoidingViewProps, KeyboardAvoidingViewState>
 {
   viewRef: { current: React.ElementRef<typeof View> | null, ... };
   constructor(props: KeyboardAvoidingViewProps): void;
-  componentDidUpdate(_: KeyboardAvoidingViewProps, prevState: State): void;
+  componentDidUpdate(
+    _: KeyboardAvoidingViewProps,
+    prevState: KeyboardAvoidingViewState
+  ): void;
   componentDidMount(): void;
   componentWillUnmount(): void;
   render(): React.Node;
@@ -1959,7 +1962,7 @@ export type ScrollResponderType = ScrollViewImperativeMethods;
 export interface PublicScrollViewInstance
   extends HostInstance,
     ScrollViewImperativeMethods {}
-type InnerViewInstance = React.ElementRef<View>;
+type InnerViewInstance = React.ElementRef<typeof View>;
 export type ScrollViewPropsIOS = $ReadOnly<{
   automaticallyAdjustContentInsets?: ?boolean,
   automaticallyAdjustKeyboardInsets?: ?boolean,
@@ -2049,16 +2052,18 @@ export type ScrollViewProps = $ReadOnly<{
   innerViewRef?: React.RefSetter<InnerViewInstance>,
   scrollViewRef?: React.RefSetter<PublicScrollViewInstance>,
 }>;
-type State = {
+type ScrollViewState = {
   layoutHeight: ?number,
 };
 export type ScrollViewComponentStatics = $ReadOnly<{
   Context: typeof ScrollViewContext,
 }>;
-declare class ScrollView extends React.Component<ScrollViewProps, State> {
+declare class ScrollView
+  extends React.Component<ScrollViewProps, ScrollViewState>
+{
   static Context: typeof ScrollViewContext;
   constructor(props: ScrollViewProps): void;
-  state: State;
+  state: ScrollViewState;
   componentDidMount(): void;
   componentDidUpdate(prevProps: ScrollViewProps): void;
   componentWillUnmount(): void;
@@ -3177,7 +3182,7 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
   RESPONDER_ACTIVE_LONG_PRESS_OUT: \\"RESPONDER_ACTIVE_LONG_PRESS_OUT\\",
   ERROR: \\"ERROR\\",
 };
-type State =
+type TouchableState =
   | typeof States.NOT_RESPONDER
   | typeof States.RESPONDER_INACTIVE_PRESS_IN
   | typeof States.RESPONDER_INACTIVE_PRESS_OUT
@@ -3208,7 +3213,7 @@ declare const TouchableMixinImpl: {
   componentWillUnmount: () => void,
   touchableGetInitialState: () => {
     touchable: {
-      touchState: ?State,
+      touchState: ?TouchableState,
       responderID: ?GestureResponderEvent[\\"currentTarget\\"],
     },
   },
@@ -3236,7 +3241,7 @@ declare export default typeof TouchableImpl;
 `;
 
 exports[`public API should not change unintentionally Libraries/Components/Touchable/TouchableBounce.js 1`] = `
-"type Props = $ReadOnly<{
+"type TouchableBounceProps = $ReadOnly<{
   ...React.ElementConfig<TouchableWithoutFeedback>,
   onPressAnimationComplete?: ?() => void,
   onPressWithCompletion?: ?(callback: () => void) => void,
@@ -3247,7 +3252,7 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
 }>;
 declare export default component(
   ref: React.RefSetter<mixed>,
-  ...props: $ReadOnly<$Diff<Props, { hostRef: mixed }>>
+  ...props: $ReadOnly<$Diff<TouchableBounceProps, { hostRef: mixed }>>
 );
 "
 `;
@@ -3315,11 +3320,12 @@ export type TouchableNativeFeedbackProps = $ReadOnly<{
   ),
   useForeground?: ?boolean,
 }>;
-type State = $ReadOnly<{
+type TouchableNativeFeedbackState = $ReadOnly<{
   pressability: Pressability,
 }>;
 declare class TouchableNativeFeedback
-  extends React.Component<TouchableNativeFeedbackProps, State>
+  extends
+    React.Component<TouchableNativeFeedbackProps, TouchableNativeFeedbackState>
 {
   static SelectableBackground: (rippleRadius?: ?number) => $ReadOnly<{
     attribute: \\"selectableItemBackground\\",
@@ -3342,11 +3348,11 @@ declare class TouchableNativeFeedback
     type: \\"RippleAndroid\\",
   }>;
   static canUseNativeForeground: () => boolean;
-  state: State;
+  state: TouchableNativeFeedbackState;
   render(): React.Node;
   componentDidUpdate(
     prevProps: TouchableNativeFeedbackProps,
-    prevState: State
+    prevState: TouchableNativeFeedbackState
   ): void;
   componentDidMount(): mixed;
   componentWillUnmount(): void;
@@ -4317,7 +4323,7 @@ exports[`public API should not change unintentionally Libraries/Image/Image.js.f
   ImageBackgroundProps,
 } from \\"./ImageProps\\";
 export type { ImageResolvedAssetSource, ImageSize } from \\"./ImageTypes.flow\\";
-declare export default Image;
+declare export default ImageType;
 "
 `;
 
@@ -4446,7 +4452,7 @@ export type ImageBackgroundProps = $ReadOnly<{
   children?: React.Node,
   style?: ?ViewStyleProp,
   imageStyle?: ?ImageStyleProp,
-  imageRef?: RefSetter<ElementRef<Image>>,
+  imageRef?: RefSetter<ElementRef<ImageType>>,
 }>;
 "
 `;
@@ -4554,7 +4560,7 @@ export type AbstractImageIOS = component(
   ...props: ImagePropsType
 );
 export type ImageIOS = AbstractImageIOS & ImageComponentStaticsIOS;
-export type Image = ImageIOS | ImageAndroid;
+export type ImageType = ImageIOS | ImageAndroid;
 export type { ImageProps } from \\"./ImageProps\\";
 "
 `;
@@ -7816,11 +7822,11 @@ exports[`public API should not change unintentionally Libraries/Text/Text.js 1`]
 type TextForwardRef = React.ElementRef<
   typeof NativeText | typeof NativeVirtualText,
 >;
-declare const Text: component(
+declare const TextImpl: component(
   ref?: React.RefSetter<TextForwardRef>,
   ...props: TextProps
 );
-declare export default typeof Text;
+declare export default typeof TextImpl;
 "
 `;