Flow: Many errors from packages in node_modules when using Flow on a React Native project

[jamesqo]

Many of the errors I'm seeing come out of flow aren't even from my own code; below is the full list of errors I got due to files in node_modules. I can't just ignore .*/node_modules/.* entirely though, since then Flow says it can't resolve react-native. Any advice for how I can resolve this?

Error --------------------------- node_modules

Missing type annotation for `U`.

                   v--------------------------
   353|     return range.map(function(value) {
   354|       if (typeof value !== 'string') {
   355|         return value;
   356|       }
   357|       if (/deg$/.test(value)) {
   358|         const degrees = parseFloat(value) || 0;
   359|         const radians = degrees * Math.PI / 180.0;
   360|         return radians;
   361|       } else {
   362|         // Assume radians
   363|         return parseFloat(value) || 0;
   364|       }
   365|     });
            -^


Error ------------------------------------ node_modules/react-native/Librarie

Property `update` is missing in `AnimatedNode` [1].

   node_modules/react-native/Libraries/Animated/src/nodes/AnimatedValue.js:54
   54|     if (typeof node.update === 'function') {
                      ^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Animated/src/nodes/AnimatedWithChildre
   70|   __getChildren(): Array<AnimatedNode> {
                                ^^^^^^^^^^^^ [1]


Error -------------------------------------------- node_modules/react-native/

Cannot assign `!this.props.disabled` to `props.enabled` because property `ena

   node_modules/react-native/Libraries/Components/Switch/Switch.js:105:7
   105|       props.enabled = !this.props.disabled;
              ^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Components/Switch/Switch.js:101:19
   101|     const props = {...this.props};
                          ^^^^^^^^^^^^^^^ [1]


Error -------------------------------------------- node_modules/react-native/

Cannot assign `this.props.value` to `props.on` because property `on` is missi

   node_modules/react-native/Libraries/Components/Switch/Switch.js:106:7
   106|       props.on = this.props.value;
              ^^^^^^^^

References:
   node_modules/react-native/Libraries/Components/Switch/Switch.js:101:19
   101|     const props = {...this.props};
                          ^^^^^^^^^^^^^^^ [1]


Error -------------------------------------------- node_modules/react-native/

Cannot assign `this.props.value ? this.props.onTintColor : this.props.tintCol
property `trackTintColor` is missing in object literal [1].

   node_modules/react-native/Libraries/Components/Switch/Switch.js:108:7
   108|       props.trackTintColor = this.props.value ? this.props.onTintColo
              ^^^^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Components/Switch/Switch.js:101:19
   101|     const props = {...this.props};
                          ^^^^^^^^^^^^^^^ [1]


Error ------------------------ node_modules/react-native/Libraries/Experiment

Property `setNativeProps` is missing in `React.Element` [1].

   node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableLis
   145|     if (this._listViewRef && typeof this._listViewRef.setNativeProps
                                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableLis
    58|   _listViewRef: ?React.Element<any> = null;
                         ^^^^^^^^^^^^^^^^^^ [1]


Error ------------------------ node_modules/react-native/Libraries/Experiment

Property `getScrollResponder` is missing in `React.Element` [1].

   node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableLis
   154|     if (this._listViewRef && typeof this._listViewRef.getScrollRespon
                                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableLis
    58|   _listViewRef: ?React.Element<any> = null;
                         ^^^^^^^^^^^^^^^^^^ [1]


Error ----------------------------------------------- node_modules/react-nati

Cannot assign array literal to `scrollProps.style` because property `style` i

   node_modules/react-native/Libraries/Lists/VirtualizedList.js:908:7
   908|       scrollProps.style = [inversionStyle, this.props.style];
              ^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Lists/VirtualizedList.js:893:25
                                v
   893|     const scrollProps = {
   894|       ...this.props,
   895|       onContentSizeChange: this._onContentSizeChange,
   896|       onLayout: this._onLayout,
   897|       onScroll: this._onScroll,
   898|       onScrollBeginDrag: this._onScrollBeginDrag,
   899|       onScrollEndDrag: this._onScrollEndDrag,
   900|       onMomentumScrollEnd: this._onMomentumScrollEnd,
   901|       scrollEventThrottle: this.props.scrollEventThrottle, // TODO: A
   902|       invertStickyHeaders: this.props.invertStickyHeaders !== undefin
   903|         ? this.props.invertStickyHeaders
   904|         : this.props.inverted,
   905|       stickyHeaderIndices,
   906|     };
            ^ [1]


Error --------------------------------------------- node_modules/react-native

Property `inLayout` is missing in object type [1].

   node_modules/react-native/Libraries/Lists/VirtualizedList.js:1125:11
   1125|       if (frame.inLayout) {
                   ^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Lists/VirtualizedList.js:1474:6
   1474|   ): {length: number, offset: number} => {
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]


Error --------------------------------------------- node_modules/react-native

Property `debug` is missing in object type [1].

   node_modules/react-native/Libraries/Lists/VirtualizedList.js:1649:25
   1649|       getItemLayout && !parentProps.debug && !fillRateHelper.enabled
                                 ^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Lists/VirtualizedList.js:1567:18
                          v
   1567|     parentProps: {
   1568|       getItemLayout?: ?Function,
   1569|       renderItem: renderItemType,
   1570|     },
             ^ [1]


Error ----------------------------------------------- node_modules/react-nati

Property `disableYellowBox` is missing in object type [1].

   node_modules/react-native/Libraries/ReactNative/YellowBox.js:108:7
   108|   if (console.disableYellowBox) {
              ^^^^^^^^^^^^^^^^^^^^^^^^

References:
   C:\cygwin64\tmp\flow\flowlib_1ec88eef\core.js:806:22
                             v-
   806| declare var console: {
   807|   assert(condition: mixed, ...data: Array<any>): void;
   808|   clear(): void;
   809|   count(label: string): void;
   810|   debug(...data: Array<any>): void;
   811|   dir(...data: Array<any>): void;
   812|   dirxml(...data: Array<any>): void;
   813|   error(...data: Array<any>): void;
   814|   _exception(...data: Array<any>): void;
   815|   group(...data: Array<any>): void;
   816|   groupCollapsed(...data: Array<any>): void;
   817|   groupEnd(): void;
   818|   info(...data: Array<any>): void;
   819|   log(...data: Array<any>): void;
   820|   profile(name?: string): void;
   821|   profileEnd(name?: string): void;
   822|   table(tabularData: { [key: string]: any } | Array<{ [key: string]:
   823|   time(label: string): void;
   824|   timeEnd(label: string): void;
   825|   timeStamp(label?: string): void;
   826|   trace(...data: Array<any>): void;
   827|   warn(...data: Array<any>): void;
   828| };
        ^ [1]


Error ---------------------------------------------- node_modules/react-nativ

Property `ignoredYellowBox` is missing in object type [1].

   node_modules/react-native/Libraries/ReactNative/YellowBox.js:181:19
   181|     Array.isArray(console.ignoredYellowBox) &&
                          ^^^^^^^^^^^^^^^^^^^^^^^^

References:
   C:\cygwin64\tmp\flow\flowlib_1ec88eef\core.js:806:22
                             v-
   806| declare var console: {
   807|   assert(condition: mixed, ...data: Array<any>): void;
   808|   clear(): void;
   809|   count(label: string): void;
   810|   debug(...data: Array<any>): void;
   811|   dir(...data: Array<any>): void;
   812|   dirxml(...data: Array<any>): void;
   813|   error(...data: Array<any>): void;
   814|   _exception(...data: Array<any>): void;
   815|   group(...data: Array<any>): void;
   816|   groupCollapsed(...data: Array<any>): void;
   817|   groupEnd(): void;
   818|   info(...data: Array<any>): void;
   819|   log(...data: Array<any>): void;
   820|   profile(name?: string): void;
   821|   profileEnd(name?: string): void;
   822|   table(tabularData: { [key: string]: any } | Array<{ [key: string]:
   823|   time(label: string): void;
   824|   timeEnd(label: string): void;
   825|   timeStamp(label?: string): void;
   826|   trace(...data: Array<any>): void;
   827|   warn(...data: Array<any>): void;
   828| };
        ^ [1]


Error ----------------------------------------------- node_modules/react-nati

Property `disableYellowBox` is missing in object type [1].

   node_modules/react-native/Libraries/ReactNative/YellowBox.js:382:9
   382|     if (console.disableYellowBox || this.state.warningMap.size === 0)
                ^^^^^^^^^^^^^^^^^^^^^^^^

References:
   C:\cygwin64\tmp\flow\flowlib_1ec88eef\core.js:806:22
                             v-
   806| declare var console: {
   807|   assert(condition: mixed, ...data: Array<any>): void;
   808|   clear(): void;
   809|   count(label: string): void;
   810|   debug(...data: Array<any>): void;
   811|   dir(...data: Array<any>): void;
   812|   dirxml(...data: Array<any>): void;
   813|   error(...data: Array<any>): void;
   814|   _exception(...data: Array<any>): void;
   815|   group(...data: Array<any>): void;
   816|   groupCollapsed(...data: Array<any>): void;
   817|   groupEnd(): void;
   818|   info(...data: Array<any>): void;
   819|   log(...data: Array<any>): void;
   820|   profile(name?: string): void;
   821|   profileEnd(name?: string): void;
   822|   table(tabularData: { [key: string]: any } | Array<{ [key: string]:
   823|   time(label: string): void;
   824|   timeEnd(label: string): void;
   825|   timeStamp(label?: string): void;
   826|   trace(...data: Array<any>): void;
   827|   warn(...data: Array<any>): void;
   828| };
        ^ [1]


Error ---------------------------------------- node_modules/react-native/Libr

Property `prototype` is missing in `React.StatelessFunctionalComponent` [1].

   node_modules/react-native/Libraries/ReactNative/renderApplication.js:41:5
   41|     RootComponent.prototype != null &&
           ^^^^^^^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/ReactNative/renderApplication.js:24:18
   24|   RootComponent: React.ComponentType<Props>,
                        ^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]


Error --------------------------------- node_modules/react-native/Libraries/R

Property `__propTypesSecretDontUseThesePlease` is missing in `React.Stateless

   node_modules/react-native/Libraries/ReactNative/requireNativeComponent.js:
   122|         typeof componentInterface.__propTypesSecretDontUseThesePlease
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/ReactNative/requireNativeComponent.js:
    50|   componentInterface?: ?ComponentInterface,
                                ^^^^^^^^^^^^^^^^^^ [1]


Error -----------------------------------------------------------------------

[zhuoshej]

I'm also experience the similar issues:
"react-native": "^0.55.4",
"flow-bin": "0.73.0",

Got around 17 errors all related node_modules/react-native/Libraries/*

[zhuoshej]

Never mind after I switch to "flow-bin": "0.67.1", errors are gone.

[wcandillon]

@zhuoshej But that doesn't feel like a real fix since you downgraded the version of flow.

How can we can how which version of React and React Native fit which version of Flow?