Refs in DatePicker

[Skubchenko-dev]

Refs using

Hello! Is there any possibility to use refs with DatePicker? Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? I can't deal with DatePicker as with class component. Thanks!

[vonovak]

hello and thanks for reporting. It would help to describe why you need to use refs with the datepicker, thank you!

[felipejh]

I need that too. It would be useful for me to integrate with the Unform Library (https://www.npmjs.com/package/@unform/core)

[zkwentz]

I'm using React Native Elements' Input element, and they use a ref to forward clear(), focus() etc to their Input wrapper component: https://github.com/react-native-elements/react-native-elements/blob/next/src/input/Input.tsx#L161

I pass in the DateTimePicker component to their Input component and get the same warning:

<Input
  ...
  InputComponent={DateTimePicker}
  onBlur={_onBlur}
  ...
/>

Would like to be able to keep the wrapper for presentation and consistency purposes.

[vonovak]

Hello and thanks for asking, the native iOS component doesn't, afaict, expose any imperative methods which would be suitable for being called from JS.

The android picker exposes open and dismiss imperative methods which are already available from JS.

For a clear method, I recommend that you create your own wrapper for DateTimePicker, and expose the clear method using https://reactjs.org/docs/hooks-reference.html#useimperativehandle Thank you 🙂