Fix typescript build

Expensify · Oct 31, 2023 · 714c025 · 714c025
1 parent f8072c1
commit 714c025
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 22 deletions.
diff --git a/src/components/DraggableList/index.native.tsx b/src/components/DraggableList/index.native.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import {ViewStyle} from 'react-native';
 import DraggableFlatList from 'react-native-draggable-flatlist';
 import {FlatList} from 'react-native-gesture-handler';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -9,9 +10,9 @@ function DraggableList<T>({renderClone, shouldUsePortal, ...viewProps}: Draggabl
     return (
         <DraggableFlatList
             ref={ref}
-            containerStyle={styles.flex1}
-            contentContainerStyle={styles.flexGrow1}
-            ListFooterComponentStyle={styles.flex1}
+            containerStyle={styles.flex1 as ViewStyle}
+            contentContainerStyle={styles.flexGrow1 as ViewStyle}
+            ListFooterComponentStyle={styles.flex1 as ViewStyle}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...viewProps}
         />

diff --git a/src/components/DraggableList/index.tsx b/src/components/DraggableList/index.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react';
 import {DragDropContext, Draggable, Droppable, type OnDragEndResponder} from 'react-beautiful-dnd';
-import {ScrollView} from 'react-native';
+import {ScrollView, ViewStyle} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
 import type {DraggableListProps} from './types';
 import useDraggableInPortal from './useDraggableInPortal';
@@ -73,8 +73,8 @@ function DraggableList<T>(
     return (
         <ScrollView
             ref={ref}
-            style={styles.flex1}
-            contentContainerStyle={styles.flex1}
+            style={styles.flex1 as ViewStyle}
+            contentContainerStyle={styles.flex1 as ViewStyle}
         >
             <DragDropContext onDragEnd={onDragEnd}>
                 <Droppable

diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx
@@ -12,7 +12,7 @@ type FixedFooterProps = {
 
 function FixedFooter({style = [], children}: FixedFooterProps) {
     const styles = useThemeStyles();
-    return <View style={[styles.ph5, styles.pb5, styles.flexShrink0, ...style]}>{children}</View>;
+    return <View style={[styles.ph5 as ViewStyle, styles.pb5 as ViewStyle, styles.flexShrink0 as ViewStyle, ...style]}>{children}</View>;
 }
 
 FixedFooter.displayName = 'FixedFooter';

diff --git a/src/components/FormScrollView.tsx b/src/components/FormScrollView.tsx
@@ -1,5 +1,5 @@
 import React, {ForwardedRef} from 'react';
-import {ScrollView, ScrollViewProps} from 'react-native';
+import {ScrollView, ScrollViewProps, ViewStyle} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
 
 type FormScrollViewProps = ScrollViewProps & {
@@ -11,9 +11,9 @@ function FormScrollView({children, ...rest}: FormScrollViewProps, ref: Forwarded
     const styles = useThemeStyles();
     return (
         <ScrollView
-            style={[styles.w100, styles.flex1]}
+            style={[styles.w100 as ViewStyle, styles.flex1 as ViewStyle]}
             ref={ref}
-            contentContainerStyle={styles.flexGrow1}
+            contentContainerStyle={styles.flexGrow1 as ViewStyle}
             keyboardShouldPersistTaps="handled"
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}

diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {TextStyle, View, ViewStyle} from 'react-native';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
@@ -19,12 +19,14 @@ function InlineSystemMessage({message = ''}: InlineSystemMessageProps) {
     }
 
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+        <View style={[styles.flexRow as ViewStyle, styles.alignItemsCenter as ViewStyle]}>
             <Icon
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 src={Expensicons.Exclamation}
                 fill={theme.danger}
             />
-            <Text style={styles.inlineSystemMessage}>{message}</Text>
+            <Text style={styles.inlineSystemMessage as TextStyle}>{message}</Text>
         </View>
     );
 }

diff --git a/src/components/Lottie/Lottie.tsx b/src/components/Lottie/Lottie.tsx
@@ -1,5 +1,6 @@
 import LottieView, {LottieViewProps} from 'lottie-react-native';
 import React, {forwardRef} from 'react';
+import {ViewStyle} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const Lottie = forwardRef<LottieView, LottieViewProps>((props: LottieViewProps, ref) => {
@@ -9,7 +10,7 @@ const Lottie = forwardRef<LottieView, LottieViewProps>((props: LottieViewProps,
             // eslint-disable-next-line
             {...props}
             ref={ref}
-            style={[styles.aspectRatioLottie(props.source), props.style]}
+            style={[(styles.aspectRatioLottie as (src: LottieViewProps['source']) => ViewStyle)(props.source), props.style]}
         />
     );
 });

diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React from 'react';
-import {View} from 'react-native';
+import {View, ViewStyle} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -13,7 +13,7 @@ function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps)
     const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle);
 
     return (
-        <View style={[styles.mapPendingView, style]}>
+        <View style={[styles.mapPendingView as ViewStyle, style]}>
             {hasTextContent ? (
                 <BlockingView
                     icon={Expensicons.EmptyStateRoutePending}
@@ -22,8 +22,10 @@ function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps)
                     shouldShowLink={false}
                 />
             ) : (
-                <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.ph10]}>
+                <View style={[styles.flex1 as ViewStyle, styles.alignItemsCenter as ViewStyle, styles.justifyContentCenter as ViewStyle, styles.ph10 as ViewStyle]}>
                     <Icon
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignoreg
                         src={Expensicons.EmptyStateRoutePending}
                         width={variables.iconSizeUltraLarge}
                         height={variables.iconSizeUltraLarge}

diff --git a/src/components/SplashScreenHider/index.native.tsx b/src/components/SplashScreenHider/index.native.tsx
@@ -53,7 +53,7 @@ function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) {
             onLayout={hide}
             style={[
                 StyleSheet.absoluteFill,
-                styles.splashScreenHider,
+                styles.splashScreenHider as ViewStyle,
                 opacityStyle,
                 {
                     // Apply negative margins to center the logo on window (instead of screen)

diff --git a/src/components/TestToolRow.tsx b/src/components/TestToolRow.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {View, ViewStyle} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
 import Text from './Text';
 
@@ -14,11 +14,11 @@ type TestToolRowProps = {
 function TestToolRow({title, children}: TestToolRowProps) {
     const styles = useThemeStyles();
     return (
-        <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween, styles.alignItemsCenter, styles.mnw120]}>
-            <View style={styles.flex2}>
+        <View style={[styles.flexRow as ViewStyle, styles.mb6 as ViewStyle, styles.justifyContentBetween as ViewStyle, styles.alignItemsCenter as ViewStyle, styles.mnw120 as ViewStyle]}>
+            <View style={styles.flex2 as ViewStyle}>
                 <Text>{title}</Text>
             </View>
-            <View style={[styles.flex1, styles.alignItemsEnd]}>{children}</View>
+            <View style={[styles.flex1 as ViewStyle, styles.alignItemsEnd as ViewStyle]}>{children}</View>
         </View>
     );
 }