When having a List of Objects and a singular Object, which is identical to one of the Objects in the list, it does not get found, which results in unexpected errors.

I think this would fix the issue, and result in less unexpected errors.

in Picker.js:

const [selectedItem, setSelectedItem] = useState(
    item
      /* This compares the object references */
      //? items.find((current) => current === item)
      
      /* This compares the object values */
      ? items.find((current) => current.label === item.label && current.value === current.value)
      : isNullable
        ? EMPTY_ITEM
        : items[0],
  );

On DatePicker on android (I don't know about ios) it's displaying 'cancel' and 'ok' buttons with white color and they are not visible, but I can press them.

Example Code:

<DatePicker
    value={pickedDate || new Date()}
    onDateChange={(date: Date | null) => setPickedDate(date || new Date())}
    title="Date Picker"
    text={handleText()}
    androidMode="date"
    androidDisplay="calendar"
    iosMode="date"
    iosDisplay="inline"
    minimumDate={new Date(Date.now())}
    textInputStyle={{
        color: '#464646',
        fontSize: 20,
        fontFamily: 'Montserrat Regular',
    }}
    isNullable={true}
    style={styles.input}
/>

Planning to use this for my project and so was wondering how to put a chevron down, right next to where the data is displayed.

Thank you!

animation.d.ts

export declare type BackdropAnimationType = { opactiy: number; duration: number; delay: number; };

Should be opacity instead of opactiy

Environment OS

• MacBook Pro
• Expo ~42.0.1
• React Native Woodpicker ^0.3.17

Device

• iPhone 11 Pro Max
• Software version 15.3.1

Date picker works fine in iOS simulator, but when I build on my iPhone get a weird behavior like a image below.

when added style with height 10 or 100, i can't click on all area (datePicker not opening).
style={{height: 100}}

it worked well in the previous version

I've been looking here but I can't figure out the way to do this.
Is it possible to close the Date Picker (ios: compact, android: calendar) when the user selects a date?

"version": "0.3.15"

I have this code

<Picker
   DoneBarComponent={() => (
   	<DoneBar
   		onDonePress={() => {
   			const item = pickerItem || selectedItem;
   			if (!item) {
   				return;
   			}
   			props.onChange(item.value);
   			pickerRef.current && pickerRef.current.close();
   		}}
   	/>
   )}
   doneButtonLabel="Готово"
   isNullable={false}
   item={selectedItem}
   items={props.items}
   placeholder={props.placeholder}
   ref={pickerRef}
   style={styles.picker}
   onClose={() => {
   	console.log("closed");
   	setOpened(false);
   }}
   onItemChange={setPickerItem}
   onOpen={() => {
   	console.log("opened");
   	setOpened(true);
   }}
   //backdropAnimation={{ opacity: 0 }}
   // mode="dropdown"
   //disable
/>

onClose is fired immediately on render and no more in future
onOpen is fired on first opening and no more in future

 LOG  closed
 LOG  closed
 LOG  opened
 LOG  opened

Tried with mode="dropdown" and mode="dialog", no differene

Expectancy:

Reality:

When I imported the Picker into my project, VSCode started showing me the following error:

{
	"resource": "<project folder>/node_modules/react-native-woodpicker/tsconfig.json",
	"owner": "typescript",
	"severity": 8,
	"message": "No inputs were found in config file '<project folder>/node_modules/react-native-woodpicker/tsconfig.json'. Specified 'include' paths were '[\"src\"]' and 'exclude' paths were '[\"./dist\"]'.",
	"source": "ts",
	"startLineNumber": 1,
	"startColumn": 1,
	"endLineNumber": 1,
	"endColumn": 2
}

What does it mean, and how do I fix it?

Hello @thodubois
I have noticed that on Android 6 / 7 and on some real devices with Android 8+ clear icon symbol is broken:

What about to change this icon to the symbol "\u2715" to have cross-platform support?
Please check my PR:
#11

In description props for DatePicker, file README
iosMode => iosDisplay
androidMode => androidDisplay

I've installed package, imported it and tried to use as it shown in the docs, but have got an error

The minimum time is not respected when setting a minimum date prop.

Is there any chance to fix this?

In react-native-woodpicker/components/DatePicker.js / , method handleAndroidDateChange
there is a commented out code "//togglePicker();".
I think this is the problem, when I delete the comment, it works well

However item={null} works as expected.

I suggest adding support for item={undefined} as this is a common use case.

Is there a way to differentiate between changing an item (before Done is pressed) and selecting the item (when Done is pressed)? My app uses a time-consuming async process when an item is chosen and I don't want it running every single time the selector is changed before Done is pressed.

Hi,
it will be great if testID props can be set for testing selecting items in dialog and so on..

<Picker .... testID={'myPicker'} />

And the items in dialog has generated testID for example myPicker-item-<index>

Now the items testID is undefined

Object {
    "label": "Jan Vandame",
     "testID": undefined,
     "textColor": undefined,
      "value": 456,
},

Thanks

Hi!
Is there a way to add (unselectable) Subdividers into a Picker?
Something like this:

I am trying to implement the DatePicker in my app, but it takes a lot of space. It has a huge height. I tried to color these parts to distinguis them. Here's the code and the output:

import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { DatePicker } from 'react-native-woodpicker';

const Test = () => {
  const [pickedDate, setPickedDate] = useState();

  const handleText = () =>
    pickedDate ? pickedDate.toDateString() : 'No value Selected';

  const handleDateChange = (date) => {
    setPickedDate(date);
  };

  return (
    <DatePicker
      style={styles.picker}
      containerStyle={styles.inputContainer}
      textInputStyle={styles.input}
      value={pickedDate}
      onDateChange={handleDateChange}
      title="Date Picker"
      text={handleText()}
      androidMode="calendar"
      androidDisplay="calendar"
      iosMode="date"
      iosDisplay="inline"
      isNullable
    />
  );
};

export default Test;

const styles = StyleSheet.create({
  picker: {
    backgroundColor: '#E1E1FF',
  },
  inputContainer: {
    backgroundColor: '#D3D3FF',
  },
  input: {
    borderColor: 'rgba(214,214,214,60)',
    backgroundColor: '#FFFFFF',
    borderWidth: 2,
    width: '100%',
    borderRadius: 6,
    paddingHorizontal: 12,
    paddingVertical: 4,
  },
});

How do I manage the sizes appropriately? I want it to look like a simple text input.

I'm trying to use minDate and maxDate but doesn't seem to work on iOS.

This is how my Picker looks:

<DatePicker
        onDateChange={this.handleDatePicker}
        value={this.state.pet.dateOfBirth}
        title={i18n.t('dateOfBirth')}
        placeholder={this.handleDatePickerPlaceholder()}
        placeholderStyle={scopedStyles.datePickerText}
        iosPickerMode="date"
        androidPickerMode="spinner"
        locale="en"
        minDate={ () => {
              var date = new Date();
              date.setFullYear(date.getFullYear() - 3);
              return date;
         }}
         maxDate={new Date()}
/>

Am I doing it fine?

After checking the code, it looks like the minDate and maxDate are being handled by handleAndroidDatePicker() function and is only used for the Android Picker instance... nothing at all on the iOS picker. Seems it's not supported by this lib yet?

Hi not really an issue but is there a way in which we can add a style property to the slide up picker as i would like to enable a dark mode feature to my app but the colour remains "white" i don't see anywhere in the docs about it being able to be changed?

While reading documentation for DateTimePicker, I encountered an inconsistency between the example and the props table.
The example uses props onChange, selectedDate, whereas the props table shows props as value and onDateChange.

Please make sure to remove this as well as any other consistencies, if present.

When on Android and using the component, if the isNullable prop is set to false or left as default, when the user selects the first item in the list, it doesn't trigger the onItemChange function and the value stays as the placeholder.

If you select any other item, the picker behaves correctly. Once you've done this, you can select the first item and the picker again behaves correctly.

As per npm description:

This library has been renamed to @react-native-picker/picker. See the GitHub new repository: https://github.com/react-native-picker/picker

Please update the package & docs to include this change.

When using the Picker component, the placeholder props is not optional in Typescript even though it is mentioned as not required in the README.

Hey again,
Is there a way to set a style that is only applied when the placeholder is active?

For example having the placeholder in a different Font Color compared to when an actual item is selected.

On some Android devices the Picker Buttons "Cancel" and "Ok" aren't visibile because they have the same white color as the background, making them not visible. Not sure what is causing this issue. Everything worked fine on my colleague's phone, and then I noticed this on my phone and on the simulator. When I opened a new simulator on my laptop (the one on the right in the picture), it seemed to be working just fine. Android versions on both my phone and the simulator that works is 11, so that might not be the reason.

.

We want to get rid of the indent on the title as seen in the attached image. The available styling options (textInputStyle, containerStyle, style) do not alter the appearance of the popup. Is there a way to get rid of the indent, or align the menu items with the title? The version in question is 0.3.17.

I've got Picker working as a basic selector (not a Datetime selector) but it has a large hit area around it instead of just around the data (border is my styling):

The examples don't seem to reflect this but I'm not sure what I could be doing wrong as I'm using almost exactly the same code as in the example.
Do I need to use InputComponent to control this? Is there documentation on that?

I have this error after upgrading to RN0.65 and set iosDisplay='compact'.

I tried using @react-native-datetimepicker/datetimepicker and set display='compact' and it's working fine.

Hey,
Is there a way to set a style for example (bold style) for selected item in the picker list? I want to somehow highlight selected item.
Thanks.

As you can see in the following image, the native keyboard does add an extra padding:

But the DatePicker doesn't add it:

Hello!
When i passing default date and update it - pickedDate is not work. Calendar show me today date or the first given date.
We needed update pickedDate when changing props "value"

In fiile DatePicker.tsx add:

useEffect(() => {
setPickedDate(value);
}, [value]);

Hi again,
Following a recent IOS update (I think), the spinner has changed behaviour when having a date picker set to iosDisplay="compact".

Instead of opening the modal right where the picker is, it first opens the bottom sheet, which contains another date button.
When that date is pressed, the modal opens.

Is that something that could be controlled by your library, or is it a native problem?

When I try to install I get:

npm ERR! Could not resolve dependency:
npm ERR! peer react@"16 || 17" from @react-native-picker/[email protected]
npm ERR! node_modules/@react-native-picker/picker
npm ERR!   @react-native-picker/picker@"2.4.2" from the root project

Is there a workaround?

Hi,
I'm trying to implement an icon on the right hand side of my Item Picker to indicate to the user that this item is a dropdown. I've got the designs done, but I can't figure out a way to trigger the ItemPicker to open if the user clicks the Icon.

Example below

Is there a way to toggle the ItemPicker when the user clicks on the Icon, or alternatively have a prop for iconRight/Left or something similar?