diff --git a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js index d0fb5c4be14..df1fe0a47ec 100644 --- a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/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}); diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollView.js b/packages/react-native/Libraries/Components/ScrollView/ScrollView.js index 3d54c9e1d0d..d6e2a27dfbd 100644 --- a/packages/react-native/Libraries/Components/ScrollView/ScrollView.js +++ b/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; +type InnerViewInstance = React.ElementRef; export type ScrollViewPropsIOS = $ReadOnly<{ /** @@ -655,7 +655,7 @@ export type ScrollViewProps = $ReadOnly<{ scrollViewRef?: React.RefSetter, }>; -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 { +class ScrollView extends React.Component { static Context: typeof ScrollViewContext = ScrollViewContext; constructor(props: ScrollViewProps) { @@ -742,7 +742,7 @@ class ScrollView extends React.Component { _subscriptionKeyboardDidShow: ?EventSubscription = null; _subscriptionKeyboardDidHide: ?EventSubscription = null; - state: State = { + state: ScrollViewState = { layoutHeight: null, }; diff --git a/packages/react-native/Libraries/Components/Touchable/Touchable.js b/packages/react-native/Libraries/Components/Touchable/Touchable.js index f4f66bf4651..0e81a0b1559 100644 --- a/packages/react-native/Libraries/Components/Touchable/Touchable.js +++ b/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, ) { diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js b/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js index 9b669f88f6b..40d6db22047 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js +++ b/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, onPressAnimationComplete?: ?() => void, @@ -31,13 +31,16 @@ type Props = $ReadOnly<{ hostRef: React.RefSetter>, }>; -type State = $ReadOnly<{ +type TouchableBounceState = $ReadOnly<{ pressability: Pressability, scale: Animated.Value, }>; -class TouchableBounce extends React.Component { - 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 { ); } - 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) => ( )): component( ref: React.RefSetter, - ...props: $ReadOnly<$Diff> + ...props: $ReadOnly<$Diff> )); diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js index d7a5b96df4f..87cb8e5e546 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js +++ b/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()); } diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js b/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js index fc4d18ea8b0..1cc6533cd9e 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js +++ b/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()); } diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js index a71e6ca982e..2909a54c508 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js +++ b/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 { - 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 { ); } - componentDidUpdate(prevProps: TouchableOpacityProps, prevState: State) { + componentDidUpdate( + prevProps: TouchableOpacityProps, + prevState: TouchableOpacityState, + ) { this.state.pressability.configure(this._createPressabilityConfig()); if ( this.props.disabled !== prevProps.disabled || diff --git a/packages/react-native/Libraries/Image/Image.js.flow b/packages/react-native/Libraries/Image/Image.js.flow index 2bc8666634d..c87b797d099 100644 --- a/packages/react-native/Libraries/Image/Image.js.flow +++ b/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; diff --git a/packages/react-native/Libraries/Image/ImageInjection.js b/packages/react-native/Libraries/Image/ImageInjection.js index 072ac69fd35..b73b3064dc3 100644 --- a/packages/react-native/Libraries/Image/ImageInjection.js +++ b/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'; diff --git a/packages/react-native/Libraries/Image/ImageProps.js b/packages/react-native/Libraries/Image/ImageProps.js index a8293465547..f473de497f7 100644 --- a/packages/react-native/Libraries/Image/ImageProps.js +++ b/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>, + imageRef?: RefSetter>, }>; diff --git a/packages/react-native/Libraries/Image/ImageTypes.flow.js b/packages/react-native/Libraries/Image/ImageTypes.flow.js index 8a80a05f442..5de921b19d8 100644 --- a/packages/react-native/Libraries/Image/ImageTypes.flow.js +++ b/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'; diff --git a/packages/react-native/Libraries/Modal/Modal.js b/packages/react-native/Libraries/Modal/Modal.js index cae3aaca9df..0073eeb3d2a 100644 --- a/packages/react-native/Libraries/Modal/Modal.js +++ b/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 { +class Modal extends React.Component { static defaultProps: {hardwareAccelerated: boolean, visible: boolean} = { visible: true, hardwareAccelerated: false, diff --git a/packages/react-native/Libraries/Text/Text.js b/packages/react-native/Libraries/Text/Text.js index 52bf37fd3c8..aef37d83b35 100644 --- a/packages/react-native/Libraries/Text/Text.js +++ b/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, ...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; diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index d54ab130f4d..ec2ce846e6d 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/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 + extends React.Component { viewRef: { current: React.ElementRef | 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; +type InnerViewInstance = React.ElementRef; export type ScrollViewPropsIOS = $ReadOnly<{ automaticallyAdjustContentInsets?: ?boolean, automaticallyAdjustKeyboardInsets?: ?boolean, @@ -2049,16 +2052,18 @@ export type ScrollViewProps = $ReadOnly<{ innerViewRef?: React.RefSetter, scrollViewRef?: React.RefSetter, }>; -type State = { +type ScrollViewState = { layoutHeight: ?number, }; export type ScrollViewComponentStatics = $ReadOnly<{ Context: typeof ScrollViewContext, }>; -declare class ScrollView extends React.Component { +declare class ScrollView + extends React.Component +{ 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, 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, - ...props: $ReadOnly<$Diff> + ...props: $ReadOnly<$Diff> ); " `; @@ -3315,11 +3320,12 @@ export type TouchableNativeFeedbackProps = $ReadOnly<{ ), useForeground?: ?boolean, }>; -type State = $ReadOnly<{ +type TouchableNativeFeedbackState = $ReadOnly<{ pressability: Pressability, }>; declare class TouchableNativeFeedback - extends React.Component + extends + React.Component { 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>, + imageRef?: RefSetter>, }>; " `; @@ -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, ...props: TextProps ); -declare export default typeof Text; +declare export default typeof TextImpl; " `;