miyabi/react-native-safe-area

Flow type error with flow version ^0.78.0 (RN 0.74.4)

Fsarmento opened this issue · 0 comments

react-native-safe-area/lib/withSafeArea.js throws a lot of flow errors related to style variables:


$ flow
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-gesture-handler/Swipeable.js:22:13

Cannot perform arithmetic operation because boolean [1] is not a number.

     19│ // Math.sign polyfill for iOS 8.x
     20│ if (!Math.sign) {
     21│   Math.sign = function(x) {
 [1] 22│     return (x > 0) - (x < 0) || +x;
     23│   };
     24│ }
     25│


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-gesture-handler/Swipeable.js:22:23

Cannot perform arithmetic operation because boolean [1] is not a number.

     19│ // Math.sign polyfill for iOS 8.x
     20│ if (!Math.sign) {
     21│   Math.sign = function(x) {
 [1] 22│     return (x > 0) - (x < 0) || +x;
     23│   };
     24│ }
     25│


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-gesture-handler/Swipeable.js:50:22

Cannot resolve name object.

     47│     dragAnimatedValue: any
     48│   ) => any,
     49│   useNativeAnimations: boolean,
     50│   animationOptions?: object,
     51│ };
     52│ type StateType = {
     53│   dragX: Animated.Value,


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-gesture-handler/Swipeable.js:138:9

Cannot assign leftWidth > 0 ? transX.interpolate(...) : new Animated.Value(...) to this._showLeftAction because
AnimatedValue [1] is incompatible with AnimatedInterpolation [2].

 [2]  68│   _showLeftAction: ?Animated.Interpolation;
        :
     129│       ],
     130│     });
     131│     this._transX = transX;
     132│     this._showLeftAction = leftWidth > 0
     133│       ? transX.interpolate({
     134│           inputRange: [-1, 0, leftWidth],
     135│           outputRange: [0, 0, 1],
     136│           extrapolate: 'clamp',
     137│         })
 [1] 138│       : new Animated.Value(0);
     139│     this._leftActionTranslate = this._showLeftAction.interpolate({
     140│       inputRange: [0, Number.MIN_VALUE],
     141│       outputRange: [-10000, 0],


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-gesture-handler/Swipeable.js:150:9

Cannot assign rightWidth > 0 ? transX.interpolate(...) : new Animated.Value(...) to this._showRightAction because
AnimatedValue [1] is incompatible with AnimatedInterpolation [2].

 [2]  70│   _showRightAction: ?Animated.Interpolation;
        :
     141│       outputRange: [-10000, 0],
     142│       extrapolate: 'clamp',
     143│     });
     144│     this._showRightAction = rightWidth > 0
     145│       ? transX.interpolate({
     146│           inputRange: [-rightWidth, 0, 1],
     147│           outputRange: [1, 0, 0],
     148│           extrapolate: 'clamp',
     149│         })
 [1] 150│       : new Animated.Value(0);
     151│     this._rightActionTranslate = this._showRightAction.interpolate({
     152│       inputRange: [0, Number.MIN_VALUE],
     153│       outputRange: [-10000, 0],


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:136:35

Cannot assign (contentInset.top || 0) + top to injected.contentInset.top because property top is missing in object
literal [1].

 [1] 130│           contentInset: { ...contentInset },
     131│           contentOffset: { ...contentOffset },
     132│         }
     133│
     134│         if (applysToTop || applysToBottom) {
     135│           if (applysToTop) {
     136│             injected.contentInset.top = (contentInset.top || 0) + top
     137│             if (this.wrappedRef && this.wrappedRef.getScrollResponder) {
     138│               const scrollView = this.wrappedRef.getScrollResponder()
     139│               if (scrollView && scrollView._scrollAnimatedValue) {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:140:81

Cannot get injected.contentInset.top because property top is missing in object literal [1].

 [1] 130│           contentInset: { ...contentInset },
        :
     137│             if (this.wrappedRef && this.wrappedRef.getScrollResponder) {
     138│               const scrollView = this.wrappedRef.getScrollResponder()
     139│               if (scrollView && scrollView._scrollAnimatedValue) {
     140│                 scrollView._scrollAnimatedValue.setOffset(injected.contentInset.top)
     141│               }
     142│             }
     143│             injected.contentOffset.y = (contentOffset.y || 0) - top


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:143:36

Cannot assign (contentOffset.y || 0) - top to injected.contentOffset.y because property y is missing in object
literal [1].

 [1] 131│           contentOffset: { ...contentOffset },
        :
     140│                 scrollView._scrollAnimatedValue.setOffset(injected.contentInset.top)
     141│               }
     142│             }
     143│             injected.contentOffset.y = (contentOffset.y || 0) - top
     144│           }
     145│           if (applysToBottom) {
     146│             injected.contentInset.bottom = (contentInset.bottom || 0) + bottom


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:146:35

Cannot assign (contentInset.bottom || 0) + bottom to injected.contentInset.bottom because property bottom is missing in
object literal [1].

 [1] 130│           contentInset: { ...contentInset },
        :
     143│             injected.contentOffset.y = (contentOffset.y || 0) - top
     144│           }
     145│           if (applysToBottom) {
     146│             injected.contentInset.bottom = (contentInset.bottom || 0) + bottom
     147│           }
     148│         }
     149│         if (applysToLeft || applysToRight) {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:151:35

Cannot assign (contentInset.left || 0) + left to injected.contentInset.left because property left is missing in object
literal [1].

 [1] 130│           contentInset: { ...contentInset },
        :
     148│         }
     149│         if (applysToLeft || applysToRight) {
     150│           if (applysToLeft) {
     151│             injected.contentInset.left = (contentInset.left || 0) + left
     152│           }
     153│           if (applysToRight) {
     154│             injected.contentInset.right = (contentInset.right || 0) + right


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:154:35

Cannot assign (contentInset.right || 0) + right to injected.contentInset.right because property right is missing in
object literal [1].

 [1] 130│           contentInset: { ...contentInset },
        :
     151│             injected.contentInset.left = (contentInset.left || 0) + left
     152│           }
     153│           if (applysToRight) {
     154│             injected.contentInset.right = (contentInset.right || 0) + right
     155│           }
     156│           injected.contentOffset.x = (contentOffset.x || 0) - left
     157│         }


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:156:34

Cannot assign (contentOffset.x || 0) - left to injected.contentOffset.x because property x is missing in object
literal [1].

 [1] 131│           contentOffset: { ...contentOffset },
        :
     153│           if (applysToRight) {
     154│             injected.contentInset.right = (contentInset.right || 0) + right
     155│           }
     156│           injected.contentOffset.x = (contentOffset.x || 0) - left
     157│         }
     158│
     159│         return injected


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:168:26

Cannot assign marginTop + top to injected.style.marginTop because property marginTop is missing in object literal [1].

 [1] 163│       const injected = { style: { ...style } }
     164│
     165│       if (applyTo === 'margin') {
     166│         if (applysToTop) {
     167│           const marginTop = style.marginTop || style.marginVertical || style.margin || 0
     168│           injected.style.marginTop = marginTop + top
     169│         }
     170│         if (applysToBottom) {
     171│           const marginBottom = style.marginBottom || style.marginVertical || style.margin || 0


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:168:38

Cannot add marginTop and top because:
 • AnimatedNode [1] is incompatible with number [2].
 • AnimatedNode [1] is incompatible with number [3].
 • AnimatedNode [1] is incompatible with number [4].
 • AnimatedNode [1] is incompatible with number [5].
 • AnimatedNode [6] is incompatible with number [2].
 • AnimatedNode [6] is incompatible with number [3].
 • AnimatedNode [6] is incompatible with number [4].
 • AnimatedNode [6] is incompatible with number [5].
 • AnimatedNode [7] is incompatible with number [2].
 • AnimatedNode [7] is incompatible with number [3].
 • AnimatedNode [7] is incompatible with number [4].
 • AnimatedNode [7] is incompatible with number [5].

        node_modules/react-native-safe-area/lib/withSafeArea.js
 [4][5]  91│     state = { safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 } }
           :
        165│       if (applyTo === 'margin') {
        166│         if (applysToTop) {
        167│           const marginTop = style.marginTop || style.marginVertical || style.margin || 0
        168│           injected.style.marginTop = marginTop + top
        169│         }
        170│         if (applysToBottom) {
        171│           const marginBottom = style.marginBottom || style.marginVertical || style.margin || 0

        node_modules/react-native-safe-area/lib/TypeDefinition.js
 [2][3]   3│ export type SafeAreaInsets = { top: number, left: number, bottom: number, right: number };

        node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.js
    [1]  32│   margin?: DimensionValue,
           :
    [6]  39│   marginTop?: DimensionValue,
    [7]  40│   marginVertical?: DimensionValue,


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:172:26

Cannot assign marginBottom + bottom to injected.style.marginBottom because property marginBottom is missing in object
literal [1].

 [1] 163│       const injected = { style: { ...style } }
        :
     169│         }
     170│         if (applysToBottom) {
     171│           const marginBottom = style.marginBottom || style.marginVertical || style.margin || 0
     172│           injected.style.marginBottom = marginBottom + bottom
     173│         }
     174│         if (applysToLeft) {
     175│           const marginLeft = style.marginLeft || style.marginHorizontal || style.margin || 0


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:172:41

Cannot add marginBottom and bottom because:
 • AnimatedNode [1] is incompatible with number [2].
 • AnimatedNode [1] is incompatible with number [3].
 • AnimatedNode [1] is incompatible with number [4].
 • AnimatedNode [1] is incompatible with number [5].
 • AnimatedNode [6] is incompatible with number [2].
 • AnimatedNode [6] is incompatible with number [3].
 • AnimatedNode [6] is incompatible with number [4].
 • AnimatedNode [6] is incompatible with number [5].
 • AnimatedNode [7] is incompatible with number [2].
 • AnimatedNode [7] is incompatible with number [3].
 • AnimatedNode [7] is incompatible with number [4].
 • AnimatedNode [7] is incompatible with number [5].

        node_modules/react-native-safe-area/lib/withSafeArea.js
 [4][5]  91│     state = { safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 } }
           :
        169│         }
        170│         if (applysToBottom) {
        171│           const marginBottom = style.marginBottom || style.marginVertical || style.margin || 0
        172│           injected.style.marginBottom = marginBottom + bottom
        173│         }
        174│         if (applysToLeft) {
        175│           const marginLeft = style.marginLeft || style.marginHorizontal || style.margin || 0

        node_modules/react-native-safe-area/lib/TypeDefinition.js
 [2][3]   3│ export type SafeAreaInsets = { top: number, left: number, bottom: number, right: number };

        node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.js
    [1]  32│   margin?: DimensionValue,
    [6]  33│   marginBottom?: DimensionValue,
           :
    [7]  40│   marginVertical?: DimensionValue,


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:176:26

Cannot assign marginLeft + left to injected.style.marginLeft because property marginLeft is missing in object
literal [1].

 [1] 163│       const injected = { style: { ...style } }
        :
     173│         }
     174│         if (applysToLeft) {
     175│           const marginLeft = style.marginLeft || style.marginHorizontal || style.margin || 0
     176│           injected.style.marginLeft = marginLeft + left
     177│         }
     178│         if (applysToRight) {
     179│           const marginRight = style.marginRight || style.marginHorizontal || style.margin || 0


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area/lib/withSafeArea.js:176:39

Cannot add marginLeft and left because:
 • AnimatedNode [1] is incompatible with number [2].
 • AnimatedNode [1] is incompatible with number [3].
 • AnimatedNode [1] is incompatible with number [4].
 • AnimatedNode [1] is incompatible with number [5].
 • AnimatedNode [6] is incompatible with number [2].
 • AnimatedNode [6] is incompatible with number [3].
 • AnimatedNode [6] is incompatible with number [4].
 • AnimatedNode [6] is incompatible with number [5].
 • AnimatedNode [7] is incompatible with number [2].
 • AnimatedNode [7] is incompatible with number [3].
 • AnimatedNode [7] is incompatible with number [4].
 • ... 1 more error.

        node_modules/react-native-safe-area/lib/withSafeArea.js
 [4][5]  91│     state = { safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 } }
           :
        173│         }
        174│         if (applysToLeft) {
        175│           const marginLeft = style.marginLeft || style.marginHorizontal || style.margin || 0
        176│           injected.style.marginLeft = marginLeft + left
        177│         }
        178│         if (applysToRight) {
        179│           const marginRight = style.marginRight || style.marginHorizontal || style.margin || 0

        node_modules/react-native-safe-area/lib/TypeDefinition.js
 [2][3]   3│ export type SafeAreaInsets = { top: number, left: number, bottom: number, right: number };

        node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.js
    [1]  32│   margin?: DimensionValue,
         33│   marginBottom?: DimensionValue,
         34│   marginEnd?: DimensionValue,
    [6]  35│   marginHorizontal?: DimensionValue,
    [7]  36│   marginLeft?: DimensionValue,



... 94 more errors (only 50 out of 144 errors displayed)
To see all errors, re-run Flow with --show-all-errors

React Native Environment Info:
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: 0.57.4 => 0.57.4
flow-bin: 0.78.0