Sync React Native Flow Changes (#13513)

packages/react-native-renderer/src/NativeMethodsMixin.js

@@ -142,7 +142,7 @@ export default function(
         return;
       }
 
-      const viewConfig: ReactNativeBaseComponentViewConfig =
+      const viewConfig: ReactNativeBaseComponentViewConfig<> =
         maybeInstance.viewConfig;
 
       if (__DEV__) {

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -82,12 +82,12 @@ if (registerEventHandler) {
  */
 class ReactFabricHostComponent {
   _nativeTag: number;
-  viewConfig: ReactNativeBaseComponentViewConfig;
+  viewConfig: ReactNativeBaseComponentViewConfig<>;
   currentProps: Props;
 
   constructor(
     tag: number,
-    viewConfig: ReactNativeBaseComponentViewConfig,
+    viewConfig: ReactNativeBaseComponentViewConfig<>,
     props: Props,
   ) {
     this._nativeTag = tag;

packages/react-native-renderer/src/ReactNativeAttributePayload.js

@@ -11,6 +11,8 @@
 import deepDiffer from 'deepDiffer';
 import flattenStyle from 'flattenStyle';
 
+import type {AttributeConfiguration} from './ReactNativeTypes';
+
 const emptyObject = {};
 
 /**
@@ -22,20 +24,6 @@ const emptyObject = {};
  * across modules, I've kept them isolated to this module.
  */
 
-type AttributeDiffer = (prevProp: mixed, nextProp: mixed) => boolean;
-type AttributePreprocessor = (nextProp: mixed) => mixed;
-
-type CustomAttributeConfiguration =
-  | {diff: AttributeDiffer, process: AttributePreprocessor}
-  | {diff: AttributeDiffer}
-  | {process: AttributePreprocessor};
-
-type AttributeConfiguration = {
-  [key: string]:
-    | CustomAttributeConfiguration
-    | AttributeConfiguration /*| boolean*/,
-};
-
 type NestedNode = Array<NestedNode> | Object;
 
 // Tracks removed keys
@@ -55,7 +43,7 @@ function defaultDiffer(prevProp: mixed, nextProp: mixed): boolean {
 function restoreDeletedValuesInNestedArray(
   updatePayload: Object,
   node: NestedNode,
-  validAttributes: AttributeConfiguration,
+  validAttributes: AttributeConfiguration<>,
 ) {
   if (Array.isArray(node)) {
     let i = node.length;
@@ -113,7 +101,7 @@ function diffNestedArrayProperty(
   updatePayload: null | Object,
   prevArray: Array<NestedNode>,
   nextArray: Array<NestedNode>,
-  validAttributes: AttributeConfiguration,
+  validAttributes: AttributeConfiguration<>,
 ): null | Object {
   const minLength =
     prevArray.length < nextArray.length ? prevArray.length : nextArray.length;
@@ -151,7 +139,7 @@ function diffNestedProperty(
   updatePayload: null | Object,
   prevProp: NestedNode,
   nextProp: NestedNode,
-  validAttributes: AttributeConfiguration,
+  validAttributes: AttributeConfiguration<>,
 ): null | Object {
   if (!updatePayload && prevProp === nextProp) {
     // If no properties have been added, then we can bail out quickly on object
@@ -212,7 +200,7 @@ function diffNestedProperty(
 function addNestedProperty(
   updatePayload: null | Object,
   nextProp: NestedNode,
-  validAttributes: AttributeConfiguration,
+  validAttributes: AttributeConfiguration<>,
 ) {
   if (!nextProp) {
     return updatePayload;
@@ -242,7 +230,7 @@ function addNestedProperty(
 function clearNestedProperty(
   updatePayload: null | Object,
   prevProp: NestedNode,
-  validAttributes: AttributeConfiguration,
+  validAttributes: AttributeConfiguration<>,
 ): null | Object {
   if (!prevProp) {
     return updatePayload;
@@ -274,9 +262,9 @@ function diffProperties(
   updatePayload: null | Object,
   prevProps: Object,
   nextProps: Object,
-  validAttributes: AttributeConfiguration,
+  validAttributes: AttributeConfiguration<>,
 ): null | Object {
-  let attributeConfig: ?(CustomAttributeConfiguration | AttributeConfiguration);
+  let attributeConfig;
   let nextProp;
   let prevProp;
 
@@ -375,13 +363,13 @@ function diffProperties(
         updatePayload,
         prevProp,
         nextProp,
-        ((attributeConfig: any): AttributeConfiguration),
+        ((attributeConfig: any): AttributeConfiguration<>),
       );
       if (removedKeyCount > 0 && updatePayload) {
         restoreDeletedValuesInNestedArray(
           updatePayload,
           nextProp,
-          ((attributeConfig: any): AttributeConfiguration),
+          ((attributeConfig: any): AttributeConfiguration<>),
         );
         removedKeys = null;
       }
@@ -432,7 +420,7 @@ function diffProperties(
       updatePayload = clearNestedProperty(
         updatePayload,
         prevProp,
-        ((attributeConfig: any): AttributeConfiguration),
+        ((attributeConfig: any): AttributeConfiguration<>),
       );
     }
   }
@@ -445,7 +433,7 @@ function diffProperties(
 function addProperties(
   updatePayload: null | Object,
   props: Object,
-  validAttributes: AttributeConfiguration,
+  validAttributes: AttributeConfiguration<>,
 ): null | Object {
   // TODO: Fast path
   return diffProperties(updatePayload, emptyObject, props, validAttributes);
@@ -458,7 +446,7 @@ function addProperties(
 function clearProperties(
   updatePayload: null | Object,
   prevProps: Object,
-  validAttributes: AttributeConfiguration,
+  validAttributes: AttributeConfiguration<>,
 ): null | Object {
   // TODO: Fast path
   return diffProperties(updatePayload, prevProps, emptyObject, validAttributes);
@@ -466,7 +454,7 @@ function clearProperties(
 
 export function create(
   props: Object,
-  validAttributes: AttributeConfiguration,
+  validAttributes: AttributeConfiguration<>,
 ): null | Object {
   return addProperties(
     null, // updatePayload
@@ -478,7 +466,7 @@ export function create(
 export function diff(
   prevProps: Object,
   nextProps: Object,
-  validAttributes: AttributeConfiguration,
+  validAttributes: AttributeConfiguration<>,
 ): null | Object {
   return diffProperties(
     null, // updatePayload

packages/react-native-renderer/src/ReactNativeComponent.js

@@ -153,7 +153,7 @@ export default function(
         return;
       }
 
-      const viewConfig: ReactNativeBaseComponentViewConfig =
+      const viewConfig: ReactNativeBaseComponentViewConfig<> =
         maybeInstance.viewConfig || maybeInstance.canonical.viewConfig;
 
       const updatePayload = ReactNativeAttributePayload.create(

packages/react-native-renderer/src/ReactNativeFiberHostComponent.js

@@ -33,9 +33,9 @@ import {mountSafeCallback, warnForStyleProps} from './NativeMethodsMixinUtils';
 class ReactNativeFiberHostComponent {
   _children: Array<Instance | number>;
   _nativeTag: number;
-  viewConfig: ReactNativeBaseComponentViewConfig;
+  viewConfig: ReactNativeBaseComponentViewConfig<>;
 
-  constructor(tag: number, viewConfig: ReactNativeBaseComponentViewConfig) {
+  constructor(tag: number, viewConfig: ReactNativeBaseComponentViewConfig<>) {
     this._nativeTag = tag;
     this._children = [];
     this.viewConfig = viewConfig;

packages/react-native-renderer/src/ReactNativeHostConfig.js

@@ -31,7 +31,7 @@ export type Container = number;
 export type Instance = {
   _children: Array<Instance | number>,
   _nativeTag: number,
-  viewConfig: ReactNativeBaseComponentViewConfig,
+  viewConfig: ReactNativeBaseComponentViewConfig<>,
 };
 export type TextInstance = number;
 export type HydratableInstance = Instance | TextInstance;

packages/react-native-renderer/src/ReactNativeTypes.js

@@ -33,26 +33,52 @@ export type MeasureLayoutOnSuccessCallback = (
   height: number,
 ) => void;
 
-type BubblingEventType = {
-  phasedRegistrationNames: {
-    captured: string,
-    bubbled: string,
-  },
-};
+type AttributeType =
+  | true
+  | $ReadOnly<{|
+      diff: ?<T>(arg1: T, arg2: T) => boolean,
+      process: ?(arg1: any) => any,
+    |}>;
 
-type DirectEventType = {
-  registrationName: string,
-};
+export type AttributeConfiguration<
+  TProps = string,
+  TStyleProps = string,
+> = $ReadOnly<{
+  [propName: TProps]: AttributeType,
+  style: $ReadOnly<{
+    [propName: TStyleProps]: AttributeType,
+  }>,
+}>;
 
-export type ReactNativeBaseComponentViewConfig = {
-  validAttributes: Object,
+export type ReactNativeBaseComponentViewConfig<
+  TProps = string,
+  TStyleProps = string,
+> = $ReadOnly<{|
+  baseModuleName?: string,
+  bubblingEventTypes?: $ReadOnly<{
+    [eventName: string]: $ReadOnly<{|
+      phasedRegistrationNames: $ReadOnly<{|
+        captured: string,
+        bubbled: string,
+      |}>,
+    |}>,
+  }>,
+  Commands?: $ReadOnly<{
+    [commandName: string]: number,
+  }>,
+  directEventTypes?: $ReadOnly<{
+    [eventName: string]: $ReadOnly<{|
+      registrationName: string,
+    |}>,
+  }>,
+  NativeProps?: $ReadOnly<{
+    [propName: string]: string,
+  }>,
   uiViewClassName: string,
-  bubblingEventTypes?: {[topLevelType: string]: BubblingEventType},
-  directEventTypes?: {[topLevelType: string]: DirectEventType},
-  propTypes?: Object,
-};
+  validAttributes: AttributeConfiguration<TProps, TStyleProps>,
+|}>;
 
-export type ViewConfigGetter = () => ReactNativeBaseComponentViewConfig;
+export type ViewConfigGetter = () => ReactNativeBaseComponentViewConfig<>;
 
 /**
  * Class only exists for its Flow type.

packages/react-native-renderer/src/__mocks__/ReactNativeViewConfigRegistry.js

@@ -4,8 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  */
+
 'use strict';
 
 import type {
@@ -28,7 +29,7 @@ const viewConfigCallbacks = new Map();
 const viewConfigs = new Map();
 
 function processEventTypes(
-  viewConfig: ReactNativeBaseComponentViewConfig,
+  viewConfig: ReactNativeBaseComponentViewConfig<>,
 ): void {
   const {bubblingEventTypes, directEventTypes} = viewConfig;
 
@@ -84,7 +85,7 @@ exports.register = function(name: string, callback: ViewConfigGetter): string {
  * If this is the first time the view has been used,
  * This configuration will be lazy-loaded from UIManager.
  */
-exports.get = function(name: string): ReactNativeBaseComponentViewConfig {
+exports.get = function(name: string): ReactNativeBaseComponentViewConfig<> {
   let viewConfig;
   if (!viewConfigs.has(name)) {
     const callback = viewConfigCallbacks.get(name);

packages/shared/ReactFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict
  */
 
 import invariant from 'shared/invariant';

scripts/rollup/shims/react-native/createReactNativeComponentClass.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow
+ * @flow strict-local
  */
 
 'use strict';