Problem with Icons Typing when enabled `strict` flag

[crisfcodes]

🐛 Bug Report

I created a new project in which I am using UI Kitten, in my typescript config file, I have enabled the strict: true flag, which gives me an error in all the components in which icons must be used as properties.

Error:

TS2769: No overload matches this call.   Overload 1 of 2, '(props: TopNavigationActionProps | Readonly<TopNavigationActionProps>): TopNavigationAction', gave the following error.     Type '(style: ImageStyle) => IconElement' is not assignable to type 'RenderProp<Partial<ImageProps>>'.       Types of parameters 'style' and 'props' are incompatible.         Type 'Partial<ImageProps> | undefined' is not assignable to type 'ImageStyle'.           Type 'undefined' is not assignable to type 'ImageStyle'.   Overload 2 of 2, '(props: TopNavigationActionProps, context: any): TopNavigationAction', gave the following error.     Type '(style: ImageStyle) => IconElement' is not assignable to type 'RenderProp<Partial<ImageProps>>'.

I followed the UI Kitten documentation on how to create icon packages, and I also used as a reference kittenTricks application to know which types should be used in functions. This is one of the icons that i'm using:

import React from 'react';
import { ImageStyle } from 'react-native';
import { Icon, IconElement } from '@ui-kitten/components';

export const ArrowIosBackIcon = (style: ImageStyle): IconElement => (
  <Icon {...style} name='arrow-ios-back'/>
);

To Reproduce

Steps to reproduce the behavior:

Create a project in which UI Kitten is used and set the strict: true flag in the tsconfig.json file.

Expected behavior

It is very annoying that the typescript compiler is complaining in every component in which icons are used: inputs, drawerItem, TopNavigationAction etc. are used.

Link to runnable example or repository (highly encouraged)

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.0.0
@ui-kitten/components	5.0.0

Other package versions

Package	Version
typescript	~4.0.0

Environment information

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
  Binaries:
    Node: 15.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.5.1 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7042882
  npmPackages:
    react: 16.13.1 => 16.13.1
    react-native: https://github.com/expo/react-native/archive/sdk-
40.0.1.tar.gz => 0.63.2

[artyorsh]

👋

I suppose you should use ImageProps and not ImageStyle. And, according to the error, it should be Partial<ImageProps>.

[crisfcodes]

I tried your suggested solution:

export function Magnify(style: Partial<ImageProps>): IconElement {
  return <Icon {...style} name="magnify" pack="material" />;
}

But I have another error:

TS2769: No overload matches this call.   
Overload 1 of 2, '(props: InputProps | Readonly<InputProps>): Input', gave the following error.
     Type '(style: Partial<ImageProps>) => IconElement<any>' is not assignable to type 'RenderProp<Partial<ImageProps>>'.      Types of parameters 'style' and 'props' are incompatible.
     Type 'Partial<ImageProps> | undefined' is not assignable to type 'Partial<ImageProps>'.
     Type 'undefined' is not assignable to type 'Partial<ImageProps>'. 
Overload 2 of 2, '(props: InputProps, context: any): Input', gave the following error. 
    Type '(style: Partial<ImageProps>) => IconElement<any>' is not assignable to type 'RenderProp<Partial<ImageProps>>'.

So I tried the suggested solution RenderProp<Partial<ImageProps>>:

export function Magnify(style: RenderProp<Partial<ImageProps>>): IconElement {
  return <Icon {...style} name="magnify" pack="material" />;
}

and the error change to this:

TS2769: No overload matches this call.
Overload 1 of 2, '(props: InputProps | Readonly<InputProps>): Input', gave the following error.     
    Type '(style: RenderProp<Partial<ImageProps>>) => IconElement<any>' is not assignable to type'RenderProp<Partial<ImageProps>>'.       
    Types of parameters 'style' and 'props' are incompatible.
    Type 'Partial<ImageProps> | undefined' is not assignable to type 'RenderProp<Partial<ImageProps>>'. 
    Type 'undefined' is not assignable to type 'RenderProp<Partial<ImageProps>>'.   
Overload 2 of 2, '(props: InputProps, context: any): Input', gave the following error.
     Type '(style: RenderProp<Partial<ImageProps>>) => IconElement<any>' is not assignable to type 'RenderProp<Partial<ImageProps>>'.

If you continue changing the style type, other type errors going to be thrown and this is really annoying... and definitely I don't want to remove the flag strict: true in tsconfig because I believe the benefits are greater.

NOTE:

this is the error that throws input prop accessoryLeft, as you can see the element to which the error refers is different to the previous one: (props: TopNavigationActionProps | Readonly<TopNavigationActionProps>): TopNavigationAction'. but it's the same error to any component that uses icons.

[Jontii]

I have the same problem as above. Copied the code from the examples.

[crisfcodes]

@Jontii for me was really annoying to see TS errors everywhere, try this:

import { Icon, IconElement, IconProps } from '@ui-kitten/components';

export function Lock(props: IconProps): IconElement {
  return <Icon {...props} name="lock-outline" pack="material" />;
}

Are different properties to ImageProps, but at least for now, it solves TS errors.