From 3a478bae24a940f1fca59437afa5706d39c3c6ba Mon Sep 17 00:00:00 2001
From: sieu-db <sieu@draftbit.com>
Date: Wed, 4 Dec 2024 19:41:47 +0700
Subject: [PATCH] fix typescript problem

---
 packages/core/src/components/Button.tsx         |  7 ++++---
 .../src/components/DatePicker/DatePicker.tsx    | 17 +++++++++++------
 packages/core/src/components/Image.tsx          |  6 +++++-
 .../components/Picker/PickerInputContainer.tsx  | 10 ++++++++--
 .../core/src/components/PinInput/PinInput.tsx   |  2 +-
 packages/core/src/components/SVG.native.tsx     |  4 ++--
 6 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/components/Button.tsx b/packages/core/src/components/Button.tsx
index 49f08918a..91314f15a 100644
--- a/packages/core/src/components/Button.tsx
+++ b/packages/core/src/components/Button.tsx
@@ -7,6 +7,7 @@ import {
   StyleSheet,
   TextStyle,
   ActivityIndicator,
+  ViewStyle,
 } from "react-native";
 import { withTheme } from "@draftbit/theme";
 import type { ReadTheme } from "@draftbit/theme";
@@ -111,7 +112,7 @@ function Base({
           {
             opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
           },
-          buttonStyles,
+          buttonStyles as ViewStyle,
         ];
       }}
       {...props}
@@ -150,7 +151,7 @@ const Solid = ({ style, theme, ...props }: Props): JSX.Element => {
           borderRadius: 8,
           backgroundColor: theme.colors.branding.primary,
         },
-        style,
+        style as ViewStyle,
       ]}
       {...props}
     />
@@ -177,7 +178,7 @@ const Outline = ({ style, theme, ...props }: Props): JSX.Element => {
           //@ts-ignore
           color: theme.colors.branding.primary,
         },
-        style,
+        style as ViewStyle,
       ]}
       {...props}
     />
diff --git a/packages/core/src/components/DatePicker/DatePicker.tsx b/packages/core/src/components/DatePicker/DatePicker.tsx
index 31556d8cd..2396cc104 100644
--- a/packages/core/src/components/DatePicker/DatePicker.tsx
+++ b/packages/core/src/components/DatePicker/DatePicker.tsx
@@ -417,7 +417,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   );
 
   if (inline) {
-    return <View style={style}>{Picker}</View>;
+    return <View style={style as StyleProp<ViewStyle>}>{Picker}</View>;
   }
 
   return (
@@ -435,7 +435,10 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
             ])}
           >
             {leftIconName && leftIconMode === "outset" ? (
-              <Icon {...leftIconProps} style={leftIconStyle} />
+              <Icon
+                {...leftIconProps}
+                style={leftIconStyle as ImageStyle & ViewStyle}
+              />
             ) : null}
             <View
               style={StyleSheet.flatten([
@@ -520,10 +523,12 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
               {leftIconName && leftIconMode === "inset" ? (
                 <Icon
                   {...leftIconProps}
-                  style={{
-                    ...leftIconStyle,
-                    marginLeft: type === "solid" ? 16 : 0,
-                  }}
+                  style={
+                    {
+                      ...leftIconStyle,
+                      marginLeft: type === "solid" ? 16 : 0,
+                    } as ImageStyle & ViewStyle
+                  }
                 />
               ) : null}
 
diff --git a/packages/core/src/components/Image.tsx b/packages/core/src/components/Image.tsx
index 32589d94a..b124f748e 100644
--- a/packages/core/src/components/Image.tsx
+++ b/packages/core/src/components/Image.tsx
@@ -6,6 +6,8 @@ import {
   StyleSheet,
   ImageSourcePropType,
   DimensionValue,
+  StyleProp,
+  ViewStyle,
 } from "react-native";
 import Config from "./Config";
 
@@ -70,7 +72,9 @@ const Image: React.FC<ImageProps> = ({
 
   if (aspectRatio) {
     return (
-      <AspectRatio style={[style, { width, height, aspectRatio }]}>
+      <AspectRatio
+        style={[style, { width, height, aspectRatio }] as StyleProp<ViewStyle>}
+      >
         <NativeImage
           {...props}
           source={imageSource as ImageSourcePropType}
diff --git a/packages/core/src/components/Picker/PickerInputContainer.tsx b/packages/core/src/components/Picker/PickerInputContainer.tsx
index 16d35ec94..c35f354dd 100644
--- a/packages/core/src/components/Picker/PickerInputContainer.tsx
+++ b/packages/core/src/components/Picker/PickerInputContainer.tsx
@@ -1,5 +1,11 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import {
+  View,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
 import omit from "lodash.omit";
 import {
   extractPositionStyles,
@@ -72,7 +78,7 @@ const PickerInputContainer: React.FC<
         value={selectedLabel?.toString()}
         editable={false}
         disabled={disabled}
-        style={textFieldStyle}
+        style={textFieldStyle as StyleProp<ViewStyle & TextStyle>}
         {...rest}
       />
       <Touchable
diff --git a/packages/core/src/components/PinInput/PinInput.tsx b/packages/core/src/components/PinInput/PinInput.tsx
index 65e54f294..2908638ac 100644
--- a/packages/core/src/components/PinInput/PinInput.tsx
+++ b/packages/core/src/components/PinInput/PinInput.tsx
@@ -24,7 +24,7 @@ interface CellItem {
   isFocused: boolean;
 }
 
-interface PinInputProps extends TextInputProps {
+interface PinInputProps extends Omit<TextInputProps, "style"> {
   onInputFull?: (value: string) => void;
   cellCount?: number;
   clearOnCellFocus?: boolean;
diff --git a/packages/core/src/components/SVG.native.tsx b/packages/core/src/components/SVG.native.tsx
index 952d5aeb7..f3d0f4645 100644
--- a/packages/core/src/components/SVG.native.tsx
+++ b/packages/core/src/components/SVG.native.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, StyleProp, ImageStyle } from "react-native";
+import { View, StyleProp, ViewStyle, ImageStyle } from "react-native";
 import { SvgUri } from "react-native-svg";
 
 import Config from "./Config";
@@ -14,7 +14,7 @@ const SVG: React.FC<React.PropsWithChildren<SVGComponentProps>> = ({
   style,
 }) => {
   return (
-    <View style={style}>
+    <View style={style as StyleProp<ViewStyle>}>
       <SvgUri width="100%" height="100%" uri={source} />
     </View>
   );