Incorrect TS definition for useRestyle hook

After installing the library via yarn install the typescript definition for useRestyle looks like this:

import { StyleProp } from 'react-native';
import { BaseTheme, RestyleFunctionContainer, RNStyle } from '../types';

declare const useRestyle: <Theme extends BaseTheme, TRestyleProps extends Record<string, any>, TProps extends TRestyleProps & {
    style?: StyleProp<RNStyle>;
}>(restyleFunctions: (RestyleFunctionContainer<TProps, Theme, keyof TProps, keyof Theme | undefined> | RestyleFunctionContainer<TProps, Theme, keyof TProps, keyof Theme | undefined>[])[], props: TProps) => Pick<TProps, Exclude<keyof TProps, keyof TProps>>;

export default useRestyle;

The return type Pick<TProps, Exclude<keyof TProps, keyof TProps>> seems incorrect as this always results in:

<Pick<TProps, never>> (which is the equivalent of {})

I imagine the intended behaviour is closer to something like:

Pick<TProps, Exclude<keyof TProps, keyof TRestyleProps>>

Apologies if I’m missing anything obvious 🙏

[antoinebugni]

@sbalay I did upgrade our repo to the latest version recently and forgot to check - indeed you’re right, the issue is resolved 😃 Thanks for pointer!

[antoinebugni]

@bearkfear and @JuanjoFR - I don’t think either of the TS errors you’re experiencing here are related to this issue.

@bearkfear I can’t be 100% sure for you because you’ve not shared the actual error @JuanjoFR your error is related to some issue with the definition of restyleFunctions

To give you an example to illustrate the issue I raised, take the following code:

import React from 'react';
import { Image, ImageProps } from 'react-native';

import { Theme } from '@sf/styles';

export const restyleFunctions = [backgroundColor];

/** Image component */
export type MyComponentProps = ImageProps & AllProps<Theme>;
export const MyComponent: React.FC<MyComponentProps> = props => {
  const restyleProps = useRestyle(restyleFunctions, props);
  return <Image {...restyleProps} />;
};

☝️ this results in the following error 👇 :

No overload matches this call.
  Overload 1 of 2, '(props: ImageProps | Readonly<ImageProps>): Image', gave the following error.
    Property 'source' is missing in type '{}' but required in type 'Readonly<ImageProps>'.
  Overload 2 of 2, '(props: ImageProps, context: any): Image', gave the following error.
    Property 'source' is missing in type '{}' but required in type 'Readonly<ImageProps>'.ts(2769)

The definition of props returned by useRestyle is {} - which may cause issue depending on the component. In this example, the source prop is mandatory but missing in the TS definition for the value returned by useRestyle.

I hope that’s a bit clearer for everyone, sorry if this was confusing at all.