From 4b974846501305ffe988e1fa5fdab1decd408a14 Mon Sep 17 00:00:00 2001 From: Sam Zhou Date: Thu, 24 Aug 2023 09:54:15 -0700 Subject: [PATCH] Rollout support for multiplatform react-native project (#39131) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/39131 Docs on the new behavior: https://flow.org/en/docs/react/multiplatform Changelog: [Internal] Reviewed By: samwgoldman Differential Revision: D48085422 fbshipit-source-id: daaa5a7d7d04871ab3da1ad47c6b88ef4226bdfd --- .flowconfig | 11 +-- .flowconfig.android | 11 +-- .../Libraries/Alert/RCTAlertManager.js.flow | 18 ++++ .../legacySendAccessibilityEvent.js.flow | 20 +++++ .../ProgressBarAndroid/ProgressBarAndroid.js | 9 +- .../DevToolsSettingsManager.js.flow | 19 ++++ .../Libraries/Image/Image.js.flow | 40 +++++++++ .../NativeComponent/BaseViewConfig.js.flow | 14 +++ .../Libraries/Network/RCTNetworking.js.flow | 88 +++++++++++++++++++ .../PlatformColorValueTypes.js.flow | 22 +++++ .../Libraries/Utilities/BackHandler.js.flow | 27 ++++++ .../Libraries/Utilities/Platform.js.flow | 13 +++ packages/rn-tester/js/RNTesterApp.js.flow | 13 +++ .../js/examples/Text/TextExample.js.flow | 15 ++++ .../TextInput/TextInputExample.js.flow | 15 ++++ .../rn-tester/js/utils/RNTesterList.js.flow | 19 ++++ 16 files changed, 339 insertions(+), 15 deletions(-) create mode 100644 packages/react-native/Libraries/Alert/RCTAlertManager.js.flow create mode 100644 packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.js.flow create mode 100644 packages/react-native/Libraries/DevToolsSettings/DevToolsSettingsManager.js.flow create mode 100644 packages/react-native/Libraries/Image/Image.js.flow create mode 100644 packages/react-native/Libraries/NativeComponent/BaseViewConfig.js.flow create mode 100644 packages/react-native/Libraries/Network/RCTNetworking.js.flow create mode 100644 packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.js.flow create mode 100644 packages/react-native/Libraries/Utilities/BackHandler.js.flow create mode 100644 packages/react-native/Libraries/Utilities/Platform.js.flow create mode 100644 packages/rn-tester/js/RNTesterApp.js.flow create mode 100644 packages/rn-tester/js/examples/Text/TextExample.js.flow create mode 100644 packages/rn-tester/js/examples/TextInput/TextInputExample.js.flow create mode 100644 packages/rn-tester/js/utils/RNTesterList.js.flow diff --git a/.flowconfig b/.flowconfig index 5fb2d86ef20..02be160e293 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,7 +1,4 @@ [ignore] -; Ignore other platform suffixes -.*\.android\.js$ - ; Ignore templates for 'react-native init' /packages/react-native/template/.* @@ -11,9 +8,6 @@ ; Ignore "BUCK" generated dirs /\.buckd/ -; Flow doesn't support platforms -.*/packages/react-native/Libraries/Utilities/LoadingView.js - .*/node_modules/resolve/test/resolver/malformed_package_json/package\.json$ [untyped] @@ -41,7 +35,10 @@ format.bracket_spacing=false module.file_ext=.js module.file_ext=.json -module.file_ext=.ios.js + +experimental.multi_platform=true +experimental.multi_platform.extensions=.ios +experimental.multi_platform.extensions=.android munge_underscores=true diff --git a/.flowconfig.android b/.flowconfig.android index 3ccf571e15f..02be160e293 100644 --- a/.flowconfig.android +++ b/.flowconfig.android @@ -1,7 +1,4 @@ [ignore] -; Ignore other platform suffixes -.*\.ios\.js$ - ; Ignore templates for 'react-native init' /packages/react-native/template/.* @@ -11,9 +8,6 @@ ; Ignore "BUCK" generated dirs /\.buckd/ -; Flow doesn't support platforms -.*/packages/react-native/Libraries/Utilities/LoadingView.js - .*/node_modules/resolve/test/resolver/malformed_package_json/package\.json$ [untyped] @@ -41,7 +35,10 @@ format.bracket_spacing=false module.file_ext=.js module.file_ext=.json -module.file_ext=.android.js + +experimental.multi_platform=true +experimental.multi_platform.extensions=.ios +experimental.multi_platform.extensions=.android munge_underscores=true diff --git a/packages/react-native/Libraries/Alert/RCTAlertManager.js.flow b/packages/react-native/Libraries/Alert/RCTAlertManager.js.flow new file mode 100644 index 00000000000..6f2eddaefcf --- /dev/null +++ b/packages/react-native/Libraries/Alert/RCTAlertManager.js.flow @@ -0,0 +1,18 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow strict-local + */ + +import type {Args} from './NativeAlertManager'; + +declare module.exports: { + alertWithArgs( + args: Args, + callback: (id: number, value: string) => void, + ): void, +}; diff --git a/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.js.flow b/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.js.flow new file mode 100644 index 00000000000..14e63dddeac --- /dev/null +++ b/packages/react-native/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.js.flow @@ -0,0 +1,20 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow strict-local + */ + +/** + * This is a function exposed to the React Renderer that can be used by the + * pre-Fabric renderer to emit accessibility events to pre-Fabric nodes. + */ +declare function legacySendAccessibilityEvent( + reactTag: number, + eventType: string, +): void; + +module.exports = legacySendAccessibilityEvent; diff --git a/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js b/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js index d9faa8e64e6..da21a4c57af 100644 --- a/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js +++ b/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js @@ -10,4 +10,11 @@ 'use strict'; -module.exports = require('../UnimplementedViews/UnimplementedView'); +import typeof UnimplementedViewType from '../UnimplementedViews/UnimplementedView'; +import typeof ProgressBarAndroidNativeComponentType from './ProgressBarAndroidNativeComponent'; + +export type {ProgressBarAndroidProps} from './ProgressBarAndroid.android'; + +module.exports = (require('../UnimplementedViews/UnimplementedView'): + | UnimplementedViewType + | ProgressBarAndroidNativeComponentType); diff --git a/packages/react-native/Libraries/DevToolsSettings/DevToolsSettingsManager.js.flow b/packages/react-native/Libraries/DevToolsSettings/DevToolsSettingsManager.js.flow new file mode 100644 index 00000000000..0650524eb35 --- /dev/null +++ b/packages/react-native/Libraries/DevToolsSettings/DevToolsSettingsManager.js.flow @@ -0,0 +1,19 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict-local + * @format + */ + +declare const DevToolsSettingsManager: { + setConsolePatchSettings(newConsolePatchSettings: string): void, + getConsolePatchSettings(): ?string, + setProfilingSettings(newProfilingSettings: string): void, + getProfilingSettings(): ?string, + reload(): void, +}; + +module.exports = DevToolsSettingsManager; diff --git a/packages/react-native/Libraries/Image/Image.js.flow b/packages/react-native/Libraries/Image/Image.js.flow new file mode 100644 index 00000000000..9575ff199e9 --- /dev/null +++ b/packages/react-native/Libraries/Image/Image.js.flow @@ -0,0 +1,40 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + * @format + */ + +import type {RootTag} from '../Types/RootTagTypes'; +import type {ResolvedAssetSource} from './AssetSourceResolver'; +import type {ImageIOS, ImageAndroid} from './Image.flow'; + +export type ImageComponentStatics = $ReadOnly<{ + getSize: ( + uri: string, + success: (width: number, height: number) => void, + failure?: (error: any) => void, + ) => void, + getSizeWithHeaders: ( + uri: string, + headers: {[string]: string}, + success: (width: number, height: number) => void, + failure?: (error: any) => void, + ) => any, + prefetch: (url: string) => any, + abortPrefetch?: number => void, + prefetchWithMetadata: ( + url: string, + queryRootName: string, + rootTag?: ?RootTag, + ) => any, + queryCache: ( + urls: Array, + ) => Promise<{[string]: 'memory' | 'disk' | 'disk/memory'}>, + resolveAssetSource: (source: any) => ?ResolvedAssetSource, +}>; + +declare module.exports: ImageIOS | ImageAndroid; diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.js.flow b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.js.flow new file mode 100644 index 00000000000..efb38696fe6 --- /dev/null +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.js.flow @@ -0,0 +1,14 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow strict-local + */ + +import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig'; + +declare const PlatformBaseViewConfig: PartialViewConfigWithoutName; +export default PlatformBaseViewConfig; diff --git a/packages/react-native/Libraries/Network/RCTNetworking.js.flow b/packages/react-native/Libraries/Network/RCTNetworking.js.flow new file mode 100644 index 00000000000..668e802386a --- /dev/null +++ b/packages/react-native/Libraries/Network/RCTNetworking.js.flow @@ -0,0 +1,88 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict-local + * @format + */ + +'use strict'; + +import type {EventSubscription} from '../vendor/emitter/EventEmitter'; +import type {RequestBody} from './convertRequestBody'; +import type {NativeResponseType} from './XMLHttpRequest'; + +type RCTNetworkingEventDefinitions = $ReadOnly<{ + didSendNetworkData: [ + [ + number, // requestId + number, // progress + number, // total + ], + ], + didReceiveNetworkResponse: [ + [ + number, // requestId + number, // status + ?{[string]: string}, // responseHeaders + ?string, // responseURL + ], + ], + didReceiveNetworkData: [ + [ + number, // requestId + string, // response + ], + ], + didReceiveNetworkIncrementalData: [ + [ + number, // requestId + string, // responseText + number, // progress + number, // total + ], + ], + didReceiveNetworkDataProgress: [ + [ + number, // requestId + number, // loaded + number, // total + ], + ], + didCompleteNetworkResponse: [ + [ + number, // requestId + string, // error + boolean, // timeOutError + ], + ], +}>; + +declare const RCTNetworking: interface { + addListener>( + eventType: K, + listener: (...$ElementType) => mixed, + context?: mixed, + ): EventSubscription, + + sendRequest( + method: string, + trackingName: string, + url: string, + headers: {...}, + data: RequestBody, + responseType: NativeResponseType, + incrementalUpdates: boolean, + timeout: number, + callback: (requestId: number) => void, + withCredentials: boolean, + ): void, + + abortRequest(requestId: number): void, + + clearCookies(callback: (result: boolean) => void): void, +}; + +export default RCTNetworking; diff --git a/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.js.flow b/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.js.flow new file mode 100644 index 00000000000..bcdca526855 --- /dev/null +++ b/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.js.flow @@ -0,0 +1,22 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow strict-local + */ + +import type {ProcessedColorValue} from './processColor'; +import type {ColorValue, NativeColorValue} from './StyleSheet'; + +declare export function PlatformColor(...names: Array): ColorValue; + +declare export function normalizeColorObject( + color: NativeColorValue, +): ?ProcessedColorValue; + +declare export function processColorObject( + color: NativeColorValue, +): ?NativeColorValue; diff --git a/packages/react-native/Libraries/Utilities/BackHandler.js.flow b/packages/react-native/Libraries/Utilities/BackHandler.js.flow new file mode 100644 index 00000000000..a966ffd6183 --- /dev/null +++ b/packages/react-native/Libraries/Utilities/BackHandler.js.flow @@ -0,0 +1,27 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +'use strict'; + +type BackPressEventName = 'backPress' | 'hardwareBackPress'; + +type TBackHandler = {| + +exitApp: () => void, + +addEventListener: ( + eventName: BackPressEventName, + handler: () => ?boolean, + ) => {remove: () => void, ...}, + +removeEventListener: ( + eventName: BackPressEventName, + handler: () => ?boolean, + ) => void, +|}; + +declare module.exports: TBackHandler; diff --git a/packages/react-native/Libraries/Utilities/Platform.js.flow b/packages/react-native/Libraries/Utilities/Platform.js.flow new file mode 100644 index 00000000000..fb04b1c0dcf --- /dev/null +++ b/packages/react-native/Libraries/Utilities/Platform.js.flow @@ -0,0 +1,13 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict + * @format + */ + +import type {Platform} from './Platform.flow'; + +declare module.exports: Platform; diff --git a/packages/rn-tester/js/RNTesterApp.js.flow b/packages/rn-tester/js/RNTesterApp.js.flow new file mode 100644 index 00000000000..10629ba3aeb --- /dev/null +++ b/packages/rn-tester/js/RNTesterApp.js.flow @@ -0,0 +1,13 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +import typeof RNTesterApp from './RNTesterAppShared'; + +declare module.exports: RNTesterApp; diff --git a/packages/rn-tester/js/examples/Text/TextExample.js.flow b/packages/rn-tester/js/examples/Text/TextExample.js.flow new file mode 100644 index 00000000000..08e4217a5ac --- /dev/null +++ b/packages/rn-tester/js/examples/Text/TextExample.js.flow @@ -0,0 +1,15 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +'use strict'; + +import type {RNTesterModule} from '../../types/RNTesterTypes'; + +declare module.exports: RNTesterModule; diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.js.flow b/packages/rn-tester/js/examples/TextInput/TextInputExample.js.flow new file mode 100644 index 00000000000..08e4217a5ac --- /dev/null +++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.js.flow @@ -0,0 +1,15 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +'use strict'; + +import type {RNTesterModule} from '../../types/RNTesterTypes'; + +declare module.exports: RNTesterModule; diff --git a/packages/rn-tester/js/utils/RNTesterList.js.flow b/packages/rn-tester/js/utils/RNTesterList.js.flow new file mode 100644 index 00000000000..70d7ed59fac --- /dev/null +++ b/packages/rn-tester/js/utils/RNTesterList.js.flow @@ -0,0 +1,19 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +'use strict'; + +import type {RNTesterModuleInfo} from '../types/RNTesterTypes'; + +declare const APIs: Array; +declare const Components: Array; +declare const Modules: {...}; + +module.exports = {APIs, Components, Modules};