NumberInput requires all props from TextFieldProps (Type error)

[janoseross]

Description

NumberInput component requires all of the TextFieldProps in order to use.

Related to

• [ ] Components
• [ ] Demo
• [ ] Docs
• [x] Typings

Steps to reproduce

1. Import and use NumberInput component with preferred props. (I used initialNumber, placeholder and onChangeNumber - important to understand the error message below)
2. See TS error

Expected behavior

The component can be used without any Types.

Actual behavior

The component is marked incorrect, the following Type error appears: Type '{ initialNumber: any; placeholder: string; onChangeNumber: (value: any) => void; }' is missing the following properties from type 'Pick<any, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV" | ... 391 more ... | "trailingTextStyle">': margin, marginL, marginT, marginR, and 398 more.ts(2740)

More Info

In order to fix the problem it is needed to use app the 400+ props mentioned above (I assume they are the props of TextFieldProps)

The source of the problem may be here, at the type definition: https://github.com/wix/react-native-ui-lib/blob/master/src/components/numberInput/index.tsx#L12

This is only a type issue, by passing @ts-ignore the component works properly.

Code snippet

<NumberInput
  initialNumber={value}
  placeholder={'Some placeholder...'}
  onChangeNumber={(value) => onChangeNumber(value)} 
/>

Screenshots/Video

Environment

• React Native version: 0.70.5
• React Native UI Lib version: 7.1.1

Affected platforms

• [x] Android
• [x] iOS
• [x] Web

[adids1221]

Hi Janos, What is the TypeScript version you're using?

[janoseross]

Hey @adids1221, my version is 4.9.5

[minemos]

Picker Component also requires all props.

[minemos]

Fix [components]/index.d.ts

1. Add this type

type Partial<T> = {
    [P in keyof T]?: T[P];
};

2. Change Pick type to Partial

For example

declare const Picker: React.ForwardRefExoticComponent<(Pick<import("./types").PickerPropsWithSingle, .....

This type must to be

declare const Picker: React.ForwardRefExoticComponent<(Partial<import("./types").PickerPropsWithSingle, .....

[minemos]

NumberInput too.

[M-i-k-e-l]

Hi @janoseross and @minemos,

It is a little weird, I am not sure why but it seems that the transpilation from typescript to javascript changes Omit to Pick. It also seems to affect only release versions (our snapshots are ok, that's why we did not see it ourselves). We are still looking at it, but no solution yet.

[M-i-k-e-l]

Hi @janoseross and @minemos, I've just tried to re-install our latest version (7.4) and it looks like the issue is resolved; I do not know why, so hopefully it'll not come back later... Could you please verify and if it's working for you, please close this ticket 🙏

[janoseross]

Indeed, the issue has been resolved. Thank you @M-i-k-e-l for your hard work!

[adamzolyak]

Curious if https://github.com/wix/react-native-ui-lib/issues/2933 seems similar to this issue? Could help me figure out where to dig in.