fix typescript problem

Author: sieu-db

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}
     />

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}
 

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}

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

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;

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>
   );