Wolewicki/scrollview perf improvements

package.json

@@ -37,6 +37,7 @@
     "test-generated-typescript": "tsc -p packages/react-native/types_generated/tsconfig.test.json",
     "test": "jest",
     "fantom": "./scripts/fantom.sh",
+    "fantom-cli": "./scripts/fantom-cli.sh",
     "trigger-react-native-release": "node ./scripts/releases-local/trigger-react-native-release.js",
     "update-lock": "npx yarn-deduplicate"
   },

packages/community-cli-plugin/package.json

@@ -35,8 +35,6 @@
     "debug": "^4.4.0",
     "invariant": "^2.2.4",
     "metro": "^0.85.0",
-    "metro-config": "^0.85.0",
-    "metro-core": "^0.85.0",
     "semver": "^7.1.3"
   },
   "devDependencies": {

packages/community-cli-plugin/src/commands/bundle/buildBundle.js

@@ -10,7 +10,6 @@
 
 import type {Config} from '@react-native-community/cli-types';
 import type {RunBuildOptions} from 'metro';
-import type {ConfigT} from 'metro-config';
 
 import loadMetroConfig from '../../utils/loadMetroConfig';
 import parseKeyValueParamArray from '../../utils/parseKeyValueParamArray';
@@ -20,6 +19,8 @@ import {runBuild} from 'metro';
 import path from 'path';
 import {styleText} from 'util';
 
+type HydratedMetroConfig = Awaited<ReturnType<typeof loadMetroConfig>>;
+
 export type BundleCommandArgs = {
   assetsDest?: string,
   assetCatalogDest?: string,
@@ -60,7 +61,7 @@ async function buildBundle(
 
 async function buildBundleWithConfig(
   args: BundleCommandArgs,
-  config: ConfigT,
+  config: HydratedMetroConfig,
   bundleImpl?: RunBuildOptions['output'],
 ): Promise<void> {
   const customResolverOptions = parseKeyValueParamArray(

packages/community-cli-plugin/src/commands/start/runServer.js

@@ -18,8 +18,7 @@ import * as version from '../../utils/version';
 import attachKeyHandlers from './attachKeyHandlers';
 import {createDevServerMiddleware} from './middleware';
 import {createDevMiddleware} from '@react-native/dev-middleware';
-import Metro from 'metro';
-import {Terminal} from 'metro-core';
+import * as Metro from 'metro';
 import path from 'path';
 import url from 'url';
 import {styleText} from 'util';
@@ -104,7 +103,7 @@ async function runServer(
   }
 
   let reportEvent: (event: TerminalReportableEvent) => void;
-  const terminal = new Terminal(process.stdout);
+  const terminal = new Metro.Terminal(process.stdout);
   const ReporterImpl = getReporterImpl(args.customLogReporterPath);
   const terminalReporter = new ReporterImpl(terminal);
 

packages/community-cli-plugin/src/utils/loadMetroConfig.js

@@ -9,15 +9,18 @@
  */
 
 import type {Config} from '@react-native-community/cli-types';
-import type {ConfigT, InputConfigT, YargArguments} from 'metro-config';
+import type {MetroConfig} from 'metro';
 
 import {CLIError} from './errors';
 import {reactNativePlatformResolver} from './metroPlatformResolver';
-import {loadConfig, resolveConfig} from 'metro-config';
+import {loadConfig, resolveConfig} from 'metro';
 import path from 'path';
 
 const debug = require('debug')('ReactNative:CommunityCliPlugin');
 
+type HydratedMetroConfig = Awaited<ReturnType<typeof loadConfig>>;
+type ArgvInput = Parameters<typeof loadConfig>[0];
+
 export type {Config};
 
 export type ConfigLoadingContext = Readonly<{
@@ -32,12 +35,12 @@ export type ConfigLoadingContext = Readonly<{
  */
 function getCommunityCliDefaultConfig(
   ctx: ConfigLoadingContext,
-  config: ConfigT,
-): InputConfigT {
+  config: HydratedMetroConfig,
+): MetroConfig {
   const outOfTreePlatforms = Object.keys(ctx.platforms).filter(
     platform => ctx.platforms[platform].npmPackageName,
   );
-  const resolver: Partial<{...ConfigT['resolver']}> = {
+  const resolver: Partial<{...HydratedMetroConfig['resolver']}> = {
     platforms: [...Object.keys(ctx.platforms), 'native'],
   };
 
@@ -83,8 +86,8 @@ function getCommunityCliDefaultConfig(
  */
 export default async function loadMetroConfig(
   ctx: ConfigLoadingContext,
-  options: YargArguments = {},
-): Promise<ConfigT> {
+  options: NonNullable<ArgvInput> = {},
+): Promise<HydratedMetroConfig> {
   let RNMetroConfig = null;
   try {
     RNMetroConfig = require('@react-native/metro-config');

packages/jest-preset/jest/mocks/NativeModules.js

@@ -186,15 +186,8 @@ const NativeModules = {
     },
   },
   StatusBarManager: {
-    setColor: jest.fn() as JestMockFn<$FlowFixMe, $FlowFixMe>,
     setStyle: jest.fn() as JestMockFn<$FlowFixMe, $FlowFixMe>,
     setHidden: jest.fn() as JestMockFn<$FlowFixMe, $FlowFixMe>,
-    setNetworkActivityIndicatorVisible: jest.fn() as JestMockFn<
-      $FlowFixMe,
-      $FlowFixMe,
-    >,
-    setBackgroundColor: jest.fn() as JestMockFn<$FlowFixMe, $FlowFixMe>,
-    setTranslucent: jest.fn() as JestMockFn<$FlowFixMe, $FlowFixMe>,
     getConstants: (): $FlowFixMe => ({
       HEIGHT: 42,
     }),

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

@@ -38,6 +38,10 @@ export type ShareActionSheetIOSOptions = Readonly<{
   tintColor?: ?number,
   cancelButtonTintColor?: ?number,
   disabledButtonTintColor?: ?number,
+  /**
+   * The activities to exclude from the ActionSheet.
+   * For example: ['com.apple.UIKit.activity.PostToTwitter']
+   */
   excludedActivityTypes?: ?Array<string>,
   userInterfaceStyle?: ?string,
 }>;
@@ -50,9 +54,10 @@ export type ShareActionSheetError = Readonly<{
 }>;
 
 /**
- * Display action sheets and share sheets on iOS.
+ * Displays native iOS action sheets and share sheets.
  *
- * See https://reactnative.dev/docs/actionsheetios
+ * @see https://reactnative.dev/docs/actionsheetios
+ * @platform ios
  */
 const ActionSheetIOS = {
   /**
@@ -62,15 +67,13 @@ const ActionSheetIOS = {
    *
    * - `options` (array of strings) - a list of button titles (required)
    * - `cancelButtonIndex` (int) - index of cancel button in `options`
-   * - `destructiveButtonIndex` (int or array of ints) - index or indices of destructive buttons in `options`
+   * - `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
    * - `title` (string) - a title to show above the action sheet
    * - `message` (string) - a message to show below the title
    * - `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
    *
-   * The 'callback' function takes one parameter, the zero-based index
-   * of the selected item.
-   *
-   * See https://reactnative.dev/docs/actionsheetios#showactionsheetwithoptions
+   * The `callback` function receives the zero-based index of the selected
+   * item.
    */
   showActionSheetWithOptions(
     options: ActionSheetIOSOptions,
@@ -136,27 +139,19 @@ const ActionSheetIOS = {
   },
 
   /**
-   * Display the iOS share sheet. The `options` object should contain
-   * one or both of `message` and `url` and can additionally have
-   * a `subject` or `excludedActivityTypes`:
+   * Display the iOS share sheet. The `options` object should contain one or
+   * both of `message` and `url` and can additionally have a `subject` or
+   * `excludedActivityTypes`:
    *
    * - `url` (string) - a URL to share
    * - `message` (string) - a message to share
    * - `subject` (string) - a subject for the message
-   * - `excludedActivityTypes` (array) - the activities to exclude from
-   *   the ActionSheet
+   * - `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
    * - `tintColor` (color) - tint color of the buttons
    *
-   * The 'failureCallback' function takes one parameter, an error object.
-   * The only property defined on this object is an optional `stack` property
-   * of type `string`.
-   *
-   * The 'successCallback' function takes two parameters:
-   *
-   * - a boolean value signifying success or failure
-   * - a string that, in the case of success, indicates the method of sharing
-   *
-   * See https://reactnative.dev/docs/actionsheetios#showshareactionsheetwithoptions
+   * The `failureCallback` function receives an error object. The
+   * `successCallback` function receives a boolean indicating success and a
+   * string describing the sharing method used.
    */
   showShareActionSheetWithOptions(
     options: ShareActionSheetIOSOptions,
@@ -186,8 +181,8 @@ const ActionSheetIOS = {
   },
 
   /**
-   * Dismisses the most upper iOS action sheet presented, if no action sheet is
-   * present a warning is displayed.
+   * Dismiss the most upper action sheet currently presented. Displays a
+   * warning if no action sheet is present.
    */
   dismissActionSheet: () => {
     invariant(RCTActionSheetManager, "ActionSheetManager doesn't exist");

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

@@ -57,9 +57,43 @@ export type AlertOptions = {
  * alerts. On iOS, you can show an alert that prompts the user to enter
  * some information.
  *
- * See https://reactnative.dev/docs/alert
+ * ## iOS
+ *
+ * On iOS you can specify any number of buttons. Each button can optionally
+ * specify a style, which is one of 'default', 'cancel' or 'destructive'.
+ *
+ * ## Android
+ *
+ * On Android at most three buttons can be specified. Android has a concept
+ * of a neutral, negative and a positive button:
+ *
+ *   - If you specify one button, it will be the 'positive' one (such as 'OK')
+ *   - Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
+ *   - Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
+ *
+ * Example:
+ *
+ * ```tsx
+ * // Works on both iOS and Android
+ * Alert.alert(
+ *   'Alert Title',
+ *   'My Alert Msg',
+ *   [
+ *     {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
+ *     {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
+ *     {text: 'OK', onPress: () => console.log('OK Pressed')},
+ *   ]
+ * )
+ * ```
+ *
+ * @see https://reactnative.dev/docs/alert
  */
 class Alert {
+  /**
+   * Display an alert dialog with the specified title, message, and buttons.
+   * On Android, at most three buttons can be specified. On iOS, any number of
+   * buttons can be used.
+   */
   static alert(
     title: ?string,
     message?: ?string,
@@ -140,6 +174,9 @@ class Alert {
   }
 
   /**
+   * Create and display a prompt to enter text. Accepts a title, message,
+   * callback or buttons, input type, default value, keyboard type, and options.
+   *
    * @platform ios
    */
   static prompt(

packages/react-native/Libraries/Animated/AnimatedExports.js

@@ -24,21 +24,43 @@ const Animated: typeof AnimatedImplementation = Platform.isDisableAnimations
   : AnimatedImplementation;
 
 export default {
+  /**
+   * FlatList and SectionList infer generic Type defined under their `data` and `section` props.
+   */
   get FlatList(): AnimatedFlatList<any> {
     return require('./components/AnimatedFlatList').default;
   },
+  /**
+   * Animated variants of the basic native views. Accepts Animated.Value for
+   * props and style.
+   */
   get Image(): AnimatedImage {
     return require('./components/AnimatedImage').default;
   },
+  /**
+   * Animated variants of the basic native views. Accepts Animated.Value for
+   * props and style.
+   */
   get ScrollView(): AnimatedScrollView {
     return require('./components/AnimatedScrollView').default;
   },
+  /**
+   * FlatList and SectionList infer generic Type defined under their `data` and `section` props.
+   */
   get SectionList(): AnimatedSectionList<any, any> {
     return require('./components/AnimatedSectionList').default;
   },
+  /**
+   * Animated variants of the basic native views. Accepts Animated.Value for
+   * props and style.
+   */
   get Text(): AnimatedText {
     return require('./components/AnimatedText').default;
   },
+  /**
+   * Animated variants of the basic native views. Accepts Animated.Value for
+   * props and style.
+   */
   get View(): AnimatedView {
     return require('./components/AnimatedView').default;
   },