lawnstarter / react-native-picker-select

🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
https://npmjs.com/package/react-native-picker-select
MIT License
1.73k stars 490 forks source link

Type issue: `Item.value` type doesn't match that in @react-native-picker/picker #578

Open Yupeng-li opened 1 month ago

Yupeng-li commented 1 month ago

Describe the bug
The type of Item.value, PickerSelectProps.value and PickerSelectProps.onValueChange don't line up with @react-native-picker/picker.

At the moment, the type of Item.value is any but it should be number | string , see https://github.com/react-native-picker/picker/blob/v2.4.8/typings/Picker.d.ts#L12.

Also, the default placeholder value shouldn't be null anymore.

To Reproduce
N/A

Expected behavior
The type should match @react-native-picker/picker, otherwise it's misleading as any implies that I can pass in object but it won't work if I do.

Here is what I am using for now.

diff --git a/node_modules/react-native-picker-select/index.d.ts b/node_modules/react-native-picker-select/index.d.ts
index 1760dbc..03a20b8 100644
--- a/node_modules/react-native-picker-select/index.d.ts
+++ b/node_modules/react-native-picker-select/index.d.ts
@@ -9,9 +9,9 @@ import {
 import React from 'react';
 import { PickerProps } from '@react-native-picker/picker/typings/Picker';

-export interface Item {
+export interface Item<T extends string | number> {
     label: string;
-    value: any;
+    value: T;
     key?: string | number;
     color?: string;
     /**
@@ -66,11 +66,11 @@ type CustomTouchableDoneProps = Omit<TouchableOpacityProps, 'onPress'>;
 type CustomTouchableWrapperProps = Omit<TouchableOpacityProps, 'onPress'>;
 // 'testID' and 'activeOpacity' are also used, but can be overwritten safely

-export interface PickerSelectProps {
-    onValueChange: (value: any, index: number) => void;
-    items: Item[];
-    value?: any;
-    placeholder?: Item | {};
+export interface PickerSelectProps<T extends string | number> {
+    onValueChange: (value: Item<T>['value'], index: number) => void;
+    items: Item<T>[];
+    value?: Item<T>['value'];
+    placeholder?: Item<T> | {};
     disabled?: boolean;
     itemKey?: string | number;
     style?: PickerStyle;
@@ -93,7 +93,7 @@ export interface PickerSelectProps {
     darkTheme?: boolean;
 }

-declare class Picker extends React.Component<PickerSelectProps> {
+declare class Picker<T extends string | number> extends React.Component<PickerSelectProps<T>> {
     togglePicker: (animate?: boolean, postToggleCallback?: () => void) => void;
 }

Screenshots
N/A

Additional details

Reproduction and/or code sample
N/A