diff --git a/packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js b/packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js index 761a357fe2f..8cc136961bc 100644 --- a/packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js +++ b/packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js @@ -63,7 +63,7 @@ export type ReturnKeyType = export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline'; -export type NativeProps = $ReadOnly<{ +export type AndroidTextInputNativeProps = $ReadOnly<{ // This allows us to inherit everything from ViewProps except for style (see below) // This must be commented for Fabric codegen to work. ...Omit, @@ -606,7 +606,7 @@ export type NativeProps = $ReadOnly<{ text?: ?string, }>; -type NativeType = HostComponent; +type NativeType = HostComponent; type NativeCommands = TextInputNativeCommands; @@ -725,10 +725,11 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = { }, }; -let AndroidTextInputNativeComponent = NativeComponentRegistry.get( - 'AndroidTextInput', - () => __INTERNAL_VIEW_CONFIG, -); +let AndroidTextInputNativeComponent = + NativeComponentRegistry.get( + 'AndroidTextInput', + () => __INTERNAL_VIEW_CONFIG, + ); // flowlint-next-line unclear-type:off -export default ((AndroidTextInputNativeComponent: any): HostComponent); +export default ((AndroidTextInputNativeComponent: any): HostComponent); diff --git a/packages/react-native/Libraries/Image/TextInlineImageNativeComponent.js b/packages/react-native/Libraries/Image/TextInlineImageNativeComponent.js index dd842a48c90..3bcdb390522 100644 --- a/packages/react-native/Libraries/Image/TextInlineImageNativeComponent.js +++ b/packages/react-native/Libraries/Image/TextInlineImageNativeComponent.js @@ -18,7 +18,7 @@ import type {ImageResizeMode} from './ImageResizeMode'; import * as NativeComponentRegistry from '../NativeComponent/NativeComponentRegistry'; -type NativeProps = $ReadOnly<{ +type RCTTextInlineImageNativeProps = $ReadOnly<{ ...ViewProps, resizeMode?: ?ImageResizeMode, src?: ?$ReadOnlyArray>, @@ -40,8 +40,8 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = { }, }; -const TextInlineImage: HostComponent = - NativeComponentRegistry.get( +const TextInlineImage: HostComponent = + NativeComponentRegistry.get( 'RCTTextInlineImage', () => __INTERNAL_VIEW_CONFIG, ); 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 977a1b8244c..b70bb3cfa63 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 @@ -2436,7 +2436,7 @@ export type ReturnKeyType = | \\"route\\" | \\"yahoo\\"; export type SubmitBehavior = \\"submit\\" | \\"blurAndSubmit\\" | \\"newline\\"; -export type NativeProps = $ReadOnly<{ +export type AndroidTextInputNativeProps = $ReadOnly<{ ...Omit, autoComplete?: WithDefault< | \\"birthdate-day\\" @@ -2594,11 +2594,11 @@ export type NativeProps = $ReadOnly<{ mostRecentEventCount: Int32, text?: ?string, }>; -type NativeType = HostComponent; +type NativeType = HostComponent; type NativeCommands = TextInputNativeCommands; declare export const Commands: NativeCommands; declare export const __INTERNAL_VIEW_CONFIG: PartialViewConfig; -declare export default HostComponent; +declare export default HostComponent; " `; @@ -4616,7 +4616,7 @@ declare module.exports: typeof RelativeImageStub; `; exports[`public API should not change unintentionally Libraries/Image/TextInlineImageNativeComponent.js 1`] = ` -"type NativeProps = $ReadOnly<{ +"type RCTTextInlineImageNativeProps = $ReadOnly<{ ...ViewProps, resizeMode?: ?ImageResizeMode, src?: ?$ReadOnlyArray>, @@ -4624,7 +4624,7 @@ exports[`public API should not change unintentionally Libraries/Image/TextInline headers?: ?{ [string]: string }, }>; declare export const __INTERNAL_VIEW_CONFIG: PartialViewConfig; -declare const TextInlineImage: HostComponent; +declare const TextInlineImage: HostComponent; declare export default typeof TextInlineImage; " `; diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/ActivityIndicatorViewNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/ActivityIndicatorViewNativeComponent.js index cd6908d1e3f..90337c992bb 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/ActivityIndicatorViewNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/ActivityIndicatorViewNativeComponent.js @@ -15,7 +15,7 @@ import type {HostComponent} from '../../types/HostComponent'; import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent'; -type NativeProps = $ReadOnly<{ +type RCTActivityIndicatorViewNativeProps = $ReadOnly<{ ...ViewProps, /** @@ -48,6 +48,9 @@ type NativeProps = $ReadOnly<{ size?: WithDefault<'small' | 'large', 'small'>, }>; -export default (codegenNativeComponent('ActivityIndicatorView', { - paperComponentName: 'RCTActivityIndicatorView', -}): HostComponent); +export default (codegenNativeComponent( + 'ActivityIndicatorView', + { + paperComponentName: 'RCTActivityIndicatorView', + }, +): HostComponent); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/AndroidDrawerLayoutNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/AndroidDrawerLayoutNativeComponent.js index 2c7058cfbb3..d6352f7ebed 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/AndroidDrawerLayoutNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/AndroidDrawerLayoutNativeComponent.js @@ -30,7 +30,7 @@ type DrawerSlideEvent = $ReadOnly<{ offset: Float, }>; -type NativeProps = $ReadOnly<{ +type AndroidDrawerLayoutNativeProps = $ReadOnly<{ ...ViewProps, /** * Determines whether the keyboard gets dismissed in response to a drag. @@ -108,7 +108,7 @@ type NativeProps = $ReadOnly<{ statusBarBackgroundColor?: ?ColorValue, }>; -type NativeType = HostComponent; +type NativeType = HostComponent; interface NativeCommands { +openDrawer: (viewRef: React.ElementRef) => void; @@ -119,6 +119,6 @@ export const Commands: NativeCommands = codegenNativeCommands({ supportedCommands: ['openDrawer', 'closeDrawer'], }); -export default (codegenNativeComponent( +export default (codegenNativeComponent( 'AndroidDrawerLayout', ): NativeType); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/AndroidHorizontalScrollContentViewNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/AndroidHorizontalScrollContentViewNativeComponent.js index 1ee15543a17..f005b30a41e 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/AndroidHorizontalScrollContentViewNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/AndroidHorizontalScrollContentViewNativeComponent.js @@ -13,15 +13,15 @@ import type {HostComponent} from '../../types/HostComponent'; import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent'; -type NativeProps = $ReadOnly<{ +type AndroidHorizontalScrollContentViewNativeProps = $ReadOnly<{ ...ViewProps, removeClippedSubviews?: ?boolean, }>; -type NativeType = HostComponent; +type NativeType = HostComponent; -export default (codegenNativeComponent( +export default (codegenNativeComponent( 'AndroidHorizontalScrollContentView', {interfaceOnly: true}, ): NativeType); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/AndroidSwipeRefreshLayoutNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/AndroidSwipeRefreshLayoutNativeComponent.js index 40b6f5d0a0f..4a2d5d1ea3b 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/AndroidSwipeRefreshLayoutNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/AndroidSwipeRefreshLayoutNativeComponent.js @@ -21,7 +21,7 @@ import codegenNativeCommands from '../../../../Libraries/Utilities/codegenNative import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent'; import * as React from 'react'; -type NativeProps = $ReadOnly<{ +type AndroidSwipeRefreshLayoutNativeProps = $ReadOnly<{ ...ViewProps, /** @@ -56,7 +56,7 @@ type NativeProps = $ReadOnly<{ refreshing: boolean, }>; -type NativeType = HostComponent; +type NativeType = HostComponent; interface NativeCommands { +setNativeRefreshing: ( @@ -69,6 +69,6 @@ export const Commands: NativeCommands = codegenNativeCommands({ supportedCommands: ['setNativeRefreshing'], }); -export default (codegenNativeComponent( +export default (codegenNativeComponent( 'AndroidSwipeRefreshLayout', ): NativeType); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/AndroidSwitchNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/AndroidSwitchNativeComponent.js index 61a4fe98bd2..1a51ca259f5 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/AndroidSwitchNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/AndroidSwitchNativeComponent.js @@ -21,12 +21,12 @@ import codegenNativeCommands from '../../../../Libraries/Utilities/codegenNative import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent'; import * as React from 'react'; -type SwitchChangeEvent = $ReadOnly<{ +type AndroidSwitchChangeEvent = $ReadOnly<{ value: boolean, target: Int32, }>; -type NativeProps = $ReadOnly<{ +type AndroidSwitchNativeProps = $ReadOnly<{ ...ViewProps, // Props @@ -41,10 +41,10 @@ type NativeProps = $ReadOnly<{ trackTintColor?: ?ColorValue, // Events - onChange?: BubblingEventHandler, + onChange?: BubblingEventHandler, }>; -type NativeType = HostComponent; +type NativeType = HostComponent; interface NativeCommands { +setNativeValue: ( @@ -57,6 +57,9 @@ export const Commands: NativeCommands = codegenNativeCommands({ supportedCommands: ['setNativeValue'], }); -export default (codegenNativeComponent('AndroidSwitch', { - interfaceOnly: true, -}): NativeType); +export default (codegenNativeComponent( + 'AndroidSwitch', + { + interfaceOnly: true, + }, +): NativeType); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/DebuggingOverlayNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/DebuggingOverlayNativeComponent.js index 7e4a11809b3..ce08555c326 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/DebuggingOverlayNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/DebuggingOverlayNativeComponent.js @@ -16,10 +16,11 @@ import codegenNativeCommands from '../../../../Libraries/Utilities/codegenNative import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent'; import * as React from 'react'; -type NativeProps = $ReadOnly<{ +type DebuggingOverlayNativeProps = $ReadOnly<{ ...ViewProps, }>; -export type DebuggingOverlayNativeComponentType = HostComponent; +export type DebuggingOverlayNativeComponentType = + HostComponent; export type TraceUpdate = { id: number, @@ -56,6 +57,6 @@ export const Commands: NativeCommands = codegenNativeCommands({ ], }); -export default (codegenNativeComponent( +export default (codegenNativeComponent( 'DebuggingOverlay', -): HostComponent); +): HostComponent); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/ProgressBarAndroidNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/ProgressBarAndroidNativeComponent.js index 5d448b9a8ab..31fdceda6cf 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/ProgressBarAndroidNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/ProgressBarAndroidNativeComponent.js @@ -18,7 +18,7 @@ import type {HostComponent} from '../../types/HostComponent'; import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent'; -type NativeProps = $ReadOnly<{ +type AndroidProgressBarNativeProps = $ReadOnly<{ ...ViewProps, //Props @@ -31,6 +31,9 @@ type NativeProps = $ReadOnly<{ testID?: WithDefault, }>; -export default (codegenNativeComponent('AndroidProgressBar', { - interfaceOnly: true, -}): HostComponent); +export default (codegenNativeComponent( + 'AndroidProgressBar', + { + interfaceOnly: true, + }, +): HostComponent); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/PullToRefreshViewNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/PullToRefreshViewNativeComponent.js index fca82306b39..64b0110470b 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/PullToRefreshViewNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/PullToRefreshViewNativeComponent.js @@ -21,7 +21,7 @@ import codegenNativeCommands from '../../../../Libraries/Utilities/codegenNative import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent'; import * as React from 'react'; -type NativeProps = $ReadOnly<{ +type PullToRefreshNativeProps = $ReadOnly<{ ...ViewProps, /** @@ -52,7 +52,7 @@ type NativeProps = $ReadOnly<{ refreshing: boolean, }>; -type ComponentType = HostComponent; +type ComponentType = HostComponent; interface NativeCommands { +setNativeRefreshing: ( @@ -65,7 +65,10 @@ export const Commands: NativeCommands = codegenNativeCommands({ supportedCommands: ['setNativeRefreshing'], }); -export default (codegenNativeComponent('PullToRefreshView', { - paperComponentName: 'RCTRefreshControl', - excludedPlatforms: ['android'], -}): HostComponent); +export default (codegenNativeComponent( + 'PullToRefreshView', + { + paperComponentName: 'RCTRefreshControl', + excludedPlatforms: ['android'], + }, +): HostComponent); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/RCTInputAccessoryViewNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/RCTInputAccessoryViewNativeComponent.js index 0157a3188af..c205ba09744 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/RCTInputAccessoryViewNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/RCTInputAccessoryViewNativeComponent.js @@ -14,13 +14,16 @@ import type {HostComponent} from '../../types/HostComponent'; import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent'; -type NativeProps = $ReadOnly<{ +type InputAccessoryNativeProps = $ReadOnly<{ ...ViewProps, backgroundColor?: ?ColorValue, }>; -export default (codegenNativeComponent('InputAccessory', { - interfaceOnly: true, - paperComponentName: 'RCTInputAccessoryView', - excludedPlatforms: ['android'], -}): HostComponent); +export default (codegenNativeComponent( + 'InputAccessory', + { + interfaceOnly: true, + paperComponentName: 'RCTInputAccessoryView', + excludedPlatforms: ['android'], + }, +): HostComponent); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/RCTModalHostViewNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/RCTModalHostViewNativeComponent.js index 2be22d99104..98338f87a0f 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/RCTModalHostViewNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/RCTModalHostViewNativeComponent.js @@ -22,7 +22,7 @@ type OrientationChangeEvent = $ReadOnly<{ orientation: 'portrait' | 'landscape', }>; -type NativeProps = $ReadOnly<{ +type RCTModalHostViewNativeProps = $ReadOnly<{ ...ViewProps, /** @@ -141,7 +141,10 @@ type NativeProps = $ReadOnly<{ identifier?: WithDefault, }>; -export default (codegenNativeComponent('ModalHostView', { - interfaceOnly: true, - paperComponentName: 'RCTModalHostView', -}): HostComponent); +export default (codegenNativeComponent( + 'ModalHostView', + { + interfaceOnly: true, + paperComponentName: 'RCTModalHostView', + }, +): HostComponent); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent.js index 762b2beaa46..e78c7222e28 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent.js @@ -13,13 +13,16 @@ import type {HostComponent} from '../../types/HostComponent'; import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent'; -type NativeProps = $ReadOnly<{ +type RCTSafeAreaViewNativeProps = $ReadOnly<{ ...ViewProps, // No props }>; -export default (codegenNativeComponent('SafeAreaView', { - paperComponentName: 'RCTSafeAreaView', - interfaceOnly: true, -}): HostComponent); +export default (codegenNativeComponent( + 'SafeAreaView', + { + paperComponentName: 'RCTSafeAreaView', + interfaceOnly: true, + }, +): HostComponent); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/SwitchNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/SwitchNativeComponent.js index 63491492179..5d5d784d6bc 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/SwitchNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/SwitchNativeComponent.js @@ -26,7 +26,7 @@ type SwitchChangeEvent = $ReadOnly<{ target: Int32, }>; -type NativeProps = $ReadOnly<{ +type SwitchNativeProps = $ReadOnly<{ ...ViewProps, // Props @@ -45,7 +45,7 @@ type NativeProps = $ReadOnly<{ onChange?: ?BubblingEventHandler, }>; -type ComponentType = HostComponent; +type ComponentType = HostComponent; interface NativeCommands { +setValue: (viewRef: React.ElementRef, value: boolean) => void; @@ -55,7 +55,7 @@ export const Commands: NativeCommands = codegenNativeCommands({ supportedCommands: ['setValue'], }); -export default (codegenNativeComponent('Switch', { +export default (codegenNativeComponent('Switch', { paperComponentName: 'RCTSwitch', excludedPlatforms: ['android'], }): ComponentType); diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent.js index 1d64f8c1bb4..00415eb5f31 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent.js @@ -14,13 +14,13 @@ import type {HostComponent} from '../../types/HostComponent'; import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent'; -type NativeProps = $ReadOnly<{ +type UnimplementedNativeViewNativeProps = $ReadOnly<{ ...ViewProps, name?: WithDefault, }>; // NOTE: This component is not implemented in paper // Do not require this file in paper builds -export default (codegenNativeComponent( +export default (codegenNativeComponent( 'UnimplementedNativeView', -): HostComponent); +): HostComponent); diff --git a/scripts/build-types/transforms/__tests__/ensureNoUnprefixedProps-test.js b/scripts/build-types/transforms/__tests__/ensureNoUnprefixedProps-test.js index 8a2e94a4925..8cf27a94bc1 100644 --- a/scripts/build-types/transforms/__tests__/ensureNoUnprefixedProps-test.js +++ b/scripts/build-types/transforms/__tests__/ensureNoUnprefixedProps-test.js @@ -30,6 +30,16 @@ describe('ensureNoUnprefixedProps', () => { await expect(translate(code)).rejects.toThrow(); }); + test('should throw when encountering unprefixed NativeProps type', async () => { + const code = `type NativeProps = {}`; + await expect(translate(code)).rejects.toThrow(); + }); + + test('should throw when encountering unprefixed NativeProps interface', async () => { + const code = `interface NativeProps {}`; + await expect(translate(code)).rejects.toThrow(); + }); + test('should not throw when encountering prefixed Props type', async () => { const code = `type ViewProps = {}`; await expect(translate(code)).resolves.toBeDefined(); diff --git a/scripts/build-types/transforms/ensureNoUnprefixedProps.js b/scripts/build-types/transforms/ensureNoUnprefixedProps.js index c70838f1cb4..01455ee987c 100644 --- a/scripts/build-types/transforms/ensureNoUnprefixedProps.js +++ b/scripts/build-types/transforms/ensureNoUnprefixedProps.js @@ -16,25 +16,24 @@ const {transformAST} = require('hermes-transform/dist/transform/transformAST'); const visitors: TransformVisitor = context => ({ TypeAlias(node): void { - if (node.id.name === 'Props') { + if (node.id.name === 'Props' || node.id.name === 'NativeProps') { throw new Error( - `Type alias 'Props' is not allowed. Use more descriptive name.`, + `Type aliases 'Props' and 'NativeProps' are not allowed. Use more descriptive name.`, ); } }, InterfaceDeclaration(node): void { - if (node.id.name === 'Props') { + if (node.id.name === 'Props' || node.id.name === 'NativeProps') { throw new Error( - `Type alias 'Props' is not allowed. Use more descriptive name.`, + `Type aliases 'Props' and 'NativeProps' are not allowed. Use more descriptive name.`, ); } }, }); /** - * flow-api-translator doesn't translate empty type to never due to difference - * in semantics between the two. This is desirable behavtior in this case, - * as it's the closest approximation of the empty type. + * Prevents the usage of 'Props' and 'NativeProps' type aliases across the + * public API of React Native. */ async function ensureNoUnprefixedProps( source: ParseResult,