Skip to content

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

Description

@Yupeng-li

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

  • @react-native-picker/picker 2.7.6
  • react-native-picker-select version: 9.1.3
  • react-native version: 0.73.8
  • expo sdk version: N/A

Reproduction and/or code sample

N/A

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions