Typescript failing after upgrading to Expo 52 and react-native 0.76.3

[blazejkustra]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

I upgraded my app to expo 52 and react native 0.76, after that I run lint and typescript checks and I started getting type errors from this package.

> tsc

node_modules/@kolking/react-native-avatar/src/Avatar.tsx:20:18 - error TS2430: Interface 'Props' incorrectly extends interface 'ViewProps'.
  Types of property 'style' are incompatible.
    Type 'StyleProp<ImageStyle>' is not assignable to type 'StyleProp<ViewStyle>'.
      Type 'ImageStyle' is not assignable to type 'StyleProp<ViewStyle>'.
        Type 'ImageStyle' is not assignable to type 'ViewStyle'.
          Types of property 'transformOrigin' are incompatible.
            Type 'string | (string | number)[] | undefined' is not assignable to type 'string | undefined'.
              Type '(string | number)[]' is not assignable to type 'string'.

20 export interface Props extends ViewProps {
                    ~~~~~

node_modules/@kolking/react-native-avatar/src/Avatar.tsx:78:11 - error TS2322: Type 'StyleProp<ImageStyle>' is not assignable to type 'StyleProp<ViewStyle>'.
  Type 'ImageStyle' is not assignable to type 'StyleProp<ViewStyle>'.
    Type 'ImageStyle' is not assignable to type 'ViewStyle'.
      Types of property 'transformOrigin' are incompatible.
        Type 'string | (string | number)[] | undefined' is not assignable to type 'string | undefined'.
          Type '(string | number)[]' is not assignable to type 'string'.

78           style={style}
             ~~~~~

  node_modules/react-native/Libraries/Components/View/ViewPropTypes.d.ts:203:3
    203   style?: StyleProp<ViewStyle> | undefined;
          ~~~~~
    The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & Props'


Found 2 errors in the same file, starting at: node_modules/@kolking/react-native-avatar/src/Avatar.tsx:20

After investigation I noticed one detail in the implementation, you use StyleProp<ImageStyle> for styling both View and Image components which can't be right, and with strict typescript this should fail, or at least that's how I understand it 😅

Here is the diff that solved my problem:

diff --git a/node_modules/@kolking/react-native-avatar/src/Avatar.tsx b/node_modules/@kolking/react-native-avatar/src/Avatar.tsx
index 19cb546..4f8c2e0 100644
--- a/node_modules/@kolking/react-native-avatar/src/Avatar.tsx
+++ b/node_modules/@kolking/react-native-avatar/src/Avatar.tsx
@@ -8,6 +8,7 @@ import {
   TextStyle,
   View,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
 
 import Initials from './Initials';
@@ -26,7 +27,7 @@ export interface Props extends ViewProps {
   color?: string;
   radius?: number;
   colorize?: boolean;
-  style?: StyleProp<ImageStyle>;
+  style?: StyleProp<ImageStyle & ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   badge?: BadgeProps['value'];
   badgeColor?: BadgeProps['color'];

[kolking]

Hi Błażej! Good catch, thank you! Would you mind to make a PR?

[blazejkustra]

Sure! 👍

Here it is! #32

[kolking]

Thanks! Published v2.1.3