Pre-suppress unsafe string key access errors in xplat/js (#44221)

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

This diff pre-suppresses errors of the following pattern, to prepare for the next Flow release.

```
declare const obj: {foo: string};
declare const key: string;
obj[key]; // error: invalid-computed-prop
```

Changelog: [Internal]

Reviewed By: alexmckenley

Differential Revision: D56477899

fbshipit-source-id: 5676b8685bd3157a519fe433cfce0fa28e003502

packages/assets/path-support.js

@@ -29,6 +29,7 @@ const ANDROID_BASE_DENSITY = 160;
  */
 function getAndroidAssetSuffix(scale: number): string {
   if (scale.toString() in androidScaleSuffix) {
+    // $FlowFixMe[invalid-computed-prop]
     return androidScaleSuffix[scale.toString()];
   }
   // NOTE: Android Gradle Plugin does not fully support the nnndpi format.

packages/react-native-codegen/src/generators/TypeUtils/Java/index.js

@@ -19,7 +19,8 @@ const objectTypeForPrimitiveType = {
 function wrapOptional(type: string, isRequired: boolean): string {
   return isRequired
     ? type
-    : `@Nullable ${objectTypeForPrimitiveType[type] ?? type}`;
+    : // $FlowFixMe[invalid-computed-prop]
+      `@Nullable ${objectTypeForPrimitiveType[type] ?? type}`;
 }
 
 module.exports = {

packages/react-native-codegen/src/generators/__tests__/RNCodegen-test.js

@@ -54,6 +54,7 @@ describe('RNCodegen.generate', () => {
 
         let expectedPath = path.join(
           outputDirectory,
+          // $FlowFixMe[invalid-computed-prop]
           expectedPaths[receivedBasename],
         );
         expect(receivedDir).toEqual(expectedPath);

packages/react-native-codegen/src/generators/components/ComponentsProviderUtils.js

@@ -39,6 +39,7 @@ function generateSupportedApplePlatformsMacro(
   const compilerMacroString = Object.keys(supportedPlatformsMap)
     .reduce((acc: string[], platform) => {
       if (!supportedPlatformsMap[platform]) {
+        // $FlowFixMe[invalid-computed-prop]
         return [...acc, `!${APPLE_PLATFORMS_MACRO_MAP[platform]}`];
       }
       return acc;

packages/react-native-codegen/src/parsers/error-utils.js

@@ -186,6 +186,7 @@ function throwIfPropertyValueTypeIsUnsupported(
   type: string,
 ) {
   const invalidPropertyValueType =
+    // $FlowFixMe[invalid-computed-prop]
     UnsupportedObjectPropertyTypeToInvalidPropertyValueTypeMap[type];
 
   throw new UnsupportedObjectPropertyValueTypeAnnotationParserError(
@@ -245,6 +246,7 @@ function throwIfArrayElementTypeAnnotationIsUnsupported(
       hasteModuleName,
       flowElementType,
       flowArrayType,
+      // $FlowFixMe[invalid-computed-prop]
       TypeMap[type],
     );
   }

packages/react-native-codegen/src/parsers/parsers-primitives.js

@@ -603,6 +603,7 @@ function emitCommonTypes(
     typeAnnotation.type,
   );
 
+  // $FlowFixMe[invalid-computed-prop]
   const simpleEmitter = typeMap[typeAnnotationName];
   if (simpleEmitter) {
     return simpleEmitter(nullable);
@@ -611,6 +612,7 @@ function emitCommonTypes(
   const genericTypeAnnotationName =
     parser.getTypeAnnotationName(typeAnnotation);
 
+  // $FlowFixMe[invalid-computed-prop]
   const emitter = typeMap[genericTypeAnnotationName];
   if (!emitter) {
     return null;

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

@@ -455,18 +455,22 @@ function addWhitelistedInterpolationParam(param: string): void {
 }
 
 function isSupportedColorStyleProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_COLOR_STYLES[prop] === true;
 }
 
 function isSupportedStyleProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_STYLES[prop] === true;
 }
 
 function isSupportedTransformProp(prop: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_TRANSFORMS[prop] === true;
 }
 
 function isSupportedInterpolationParam(param: string): boolean {
+  // $FlowFixMe[invalid-computed-prop]
   return SUPPORTED_INTERPOLATION_PARAMS[param] === true;
 }
 

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

@@ -141,6 +141,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
       const events = [];
 
       for (const propName in props) {
+        // $FlowFixMe[invalid-computed-prop]
         const propValue = props[propName];
         if (propValue instanceof AnimatedEvent && propValue.__isNative) {
           propValue.__attach(target, propName);

packages/react-native/Libraries/BatchedBridge/MessageQueue.js

@@ -424,6 +424,7 @@ class MessageQueue {
           A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`,
         );
       }
+      // $FlowFixMe[invalid-computed-prop]
       if (!moduleMethods[method]) {
         invariant(
           false,

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

@@ -17,5 +17,6 @@ export function convertObjectFitToResizeMode(objectFit: string): ResizeMode {
     fill: 'stretch',
     'scale-down': 'contain',
   };
+  // $FlowFixMe[invalid-computed-prop]
   return objectFitMap[objectFit];
 }

packages/react-native/Libraries/Inspector/ElementBox.js

@@ -121,13 +121,17 @@ function resolveSizeInPlace(
   direction: string,
   dimension: string,
 ) {
+  // $FlowFixMe[invalid-computed-prop]
   if (style[direction] !== null && typeof style[direction] === 'string') {
     if (style[direction].indexOf('%') !== -1) {
       // $FlowFixMe[prop-missing]
       style[direction] =
+        // $FlowFixMe[invalid-computed-prop]
         (parseFloat(style[direction]) / 100.0) *
+        // $FlowFixMe[invalid-computed-prop]
         Dimensions.get('window')[dimension];
     }
+    // $FlowFixMe[invalid-computed-prop]
     if (style[direction] === 'auto') {
       // Ignore auto sizing in frame drawing due to complexity of correctly rendering this
       // $FlowFixMe[prop-missing]

packages/react-native/Libraries/NativeComponent/StaticViewConfigValidator.js

@@ -105,6 +105,7 @@ function accumulateDifferences(
   staticObject: {...},
 ): void {
   for (const nativeKey in nativeObject) {
+    // $FlowFixMe[invalid-computed-prop]
     const nativeValue = nativeObject[nativeKey];
 
     if (!staticObject.hasOwnProperty(nativeKey)) {
@@ -116,6 +117,7 @@ function accumulateDifferences(
       continue;
     }
 
+    // $FlowFixMe[invalid-computed-prop]
     const staticValue = staticObject[nativeKey];
 
     const nativeValueIfObject = ifObject(nativeValue);
@@ -147,6 +149,7 @@ function accumulateDifferences(
   for (const staticKey in staticObject) {
     if (
       !nativeObject.hasOwnProperty(staticKey) &&
+      // $FlowFixMe[invalid-computed-prop]
       !isIgnored(staticObject[staticKey])
     ) {
       differences.push({

packages/react-native/Libraries/Network/XMLHttpRequest.js

@@ -630,6 +630,7 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
     this._lowerCaseResponseHeaders = Object.keys(headers).reduce<{
       [string]: any,
     }>((lcaseHeaders, headerName) => {
+      // $FlowFixMe[invalid-computed-prop]
       lcaseHeaders[headerName.toLowerCase()] = headers[headerName];
       return lcaseHeaders;
     }, {});

packages/react-native/Libraries/ReactNative/ReactFabricPublicInstance/warnForStyleProps.js

@@ -16,6 +16,7 @@ export default function warnForStyleProps(
 ): void {
   if (__DEV__) {
     for (const key in validAttributes.style) {
+      // $FlowFixMe[invalid-computed-prop]
       if (!(validAttributes[key] || props[key] === undefined)) {
         console.error(
           'You are setting the style `{ %s' +

packages/react-native/Libraries/StyleSheet/flattenStyle.js

@@ -34,6 +34,7 @@ function flattenStyle<TStyleProp: DangerouslyImpreciseStyleProp>(
       // $FlowFixMe[invalid-in-rhs]
       for (const key in computedStyle) {
         // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[invalid-computed-prop]
         result[key] = computedStyle[key];
       }
     }

packages/react-native/Libraries/Utilities/Dimensions.js

@@ -44,6 +44,7 @@ class Dimensions {
    * @returns {DisplayMetrics? | DisplayMetricsAndroid?} Value for the dimension.
    */
   static get(dim: string): DisplayMetrics | DisplayMetricsAndroid {
+    // $FlowFixMe[invalid-computed-prop]
     invariant(dimensions[dim], 'No dimension set for key ' + dim);
     return dimensions[dim];
   }

packages/react-native/Libraries/Utilities/RCTLog.js

@@ -38,6 +38,7 @@ const RCTLog = {
 
   // Log to console regardless of nativeLoggingHook
   logToConsole(level: string, ...args: Array<mixed>): void {
+    // $FlowFixMe[invalid-computed-prop]
     const logFn = levelsMap[level];
     invariant(
       logFn,

packages/react-native/Libraries/Utilities/verifyComponentAttributeEquivalence.js

@@ -104,16 +104,21 @@ export function getConfigWithoutViewProps(
   viewConfig: ViewConfig,
   propName: string,
 ): {...} {
+  // $FlowFixMe[invalid-computed-prop]
   if (!viewConfig[propName]) {
     return {};
   }
 
-  return Object.keys(viewConfig[propName])
-    .filter(prop => !PlatformBaseViewConfig[propName][prop])
-    .reduce<{[string]: any}>((obj, prop) => {
-      obj[prop] = viewConfig[propName][prop];
-      return obj;
-    }, {});
+  return (
+    Object.keys(viewConfig[propName])
+      // $FlowFixMe[invalid-computed-prop]
+      .filter(prop => !PlatformBaseViewConfig[propName][prop])
+      .reduce<{[string]: any}>((obj, prop) => {
+        // $FlowFixMe[invalid-computed-prop]
+        obj[prop] = viewConfig[propName][prop];
+        return obj;
+      }, {})
+  );
 }
 
 export function stringifyViewConfig(viewConfig: any): string {

packages/rn-tester/js/RNTesterAppShared.js

@@ -144,6 +144,7 @@ const RNTesterApp = ({
         rawModuleKey,
         `${rawModuleKey}Index`,
         `${rawModuleKey}Example`,
+        // $FlowFixMe[invalid-computed-prop]
       ].filter(k => RNTesterList.Modules[k] != null);
       if (validModuleKeys.length !== 1) {
         if (validModuleKeys.length === 0) {
@@ -159,6 +160,7 @@ const RNTesterApp = ({
       }
 
       const resolvedModuleKey = validModuleKeys[0];
+      // $FlowFixMe[invalid-computed-prop]
       const exampleModule = RNTesterList.Modules[resolvedModuleKey];
 
       if (exampleKey != null) {
@@ -208,6 +210,7 @@ const RNTesterApp = ({
   }
 
   const activeModule =
+    // $FlowFixMe[invalid-computed-prop]
     activeModuleKey != null ? RNTesterList.Modules[activeModuleKey] : null;
   const activeModuleExample =
     activeModuleExampleKey != null

packages/rn-tester/js/examples/Animated/TransformStylesExample.js

@@ -44,6 +44,7 @@ function AnimatedView({
   const transformStyles = properties.map(property => ({
     [property]: animatedValue.interpolate({
       inputRange: [0, 1],
+      // $FlowFixMe[invalid-computed-prop]
       outputRange: transformProperties[property].outputRange,
     }),
   }));
@@ -82,7 +83,9 @@ function AnimatedTransformStyleExample(): React.Node {
     setProperties({
       ...properties,
       [property]: {
+        // $FlowFixMe[invalid-computed-prop]
         ...properties[property],
+        // $FlowFixMe[invalid-computed-prop]
         selected: !properties[property].selected,
       },
     });

packages/rn-tester/js/examples/TurboModule/SampleLegacyModuleExample.js

@@ -55,6 +55,7 @@ function stringify(obj: mixed): string {
       return Object.keys(value ?? {})
         .sort()
         .reduce((sorted: {[key: string]: mixed}, key: string) => {
+          // $FlowFixMe[invalid-computed-prop]
           sorted[key] = (value ?? {})[key];
           return sorted;
         }, {});

packages/virtualized-lists/Lists/FillRateHelper.js

@@ -122,6 +122,7 @@ class FillRateHelper {
       };
       for (const key in derived) {
         // $FlowFixMe[prop-missing]
+        // $FlowFixMe[invalid-computed-prop]
         derived[key] = Math.round(1000 * derived[key]) / 1000;
       }
       console.debug('FillRateHelper deactivateAndFlush: ', {derived, info});