Single date picker selection not working in web

[tegandbiscuits]

Current behaviour

I'm trying to use DatePickerModal with single selection. When I open the modal I see the a calendar of the current month's days, but trying to select a day just opens the year selection so I'm not able to actually pick a date. Additionally the date that gets passed to onConfirm is undefined.

This is the case when I pass in a date or leave the prop blank.

This is only an issue with mode="single", and the normal text input in the modal still works.

Expected behaviour

The date picker modal to be able to select a date.

How to reproduce?

Here's the most stripped down code that I've ran.

import { useState } from 'react';
import { AppRegistry } from 'react-native';
import { Button, PaperProvider } from 'react-native-paper';
import { registerTranslation, en, DatePickerModal  } from 'react-native-paper-dates'

registerTranslation('en', en);

const root = document.getElementById('root');
if (!root) {
  throw new Error('Failed to mount react');
}

function App() {
  const [open, setOpen] = useState<boolean>(false);

  return (
    <PaperProvider>
      <Button onPress={() => { setOpen(true) }}>press me</Button>
      <DatePickerModal
        locale="en"
        mode="single"
        visible={open}
        onConfirm={(d) => {
          console.log(d)
          setOpen(false)
        }}
        onDismiss={() => { setOpen(false) }}
      />
    </PaperProvider>
  );
}

AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', { rootTag: root });

Preview

Here's a recording of what's happening. Not really apparent, but there were a few clicks on the number 5 where nothing happened (it's not interactive because that spot is the gap between year buttons).

Screen.Recording.2025-08-18.at.6.49.02.PM.mov

What have you tried so far?

From inspecting the DOM and keeping track of exactly where the mouse icon changes, it seems like it's displaying the day picker but the year selection is getting rendered invisibly and overlaying the day buttons. When a year is selected it alternates between being visible and invisible.

Your Environment

I'm using react-native-web bundled with Vite instead of through Expo. I haven't tested with Expo, but I don't think my setup is doing anything wildly different than plain Expo for web.

software	version
react-native	0.80.2
react-native-web	0.21.0
react-native-paper	5.14.5
node	20.19.0
npm	11.5.2
vite	6.3.5

[tegandbiscuits]

Took the time to look into this more and it turns out it was an issue with react-native-web, not this package.

The issue only happened when I used react-native-web@0.21.0, but the version before (0.20.0) and version after (0.21.1) worked fine. I was able to reproduce this by setting up my example in a blank Expo project.

I assume it was resolved by this PR necolas/react-native-web#2797