iPadOS pageSheet dimensions wrong

[klydra]

Current behaviour

Calendar is centered within sheet.

Expected behaviour

Adjust calendar to sheet size or vice-versa.

How to reproduce?

Run react-native-paper-dates on iPad and choose presentationStyle="pageSheet"

import { DatePickerModal } from "react-native-paper-dates";

export default function Page() {
    return (
      <DatePickerModal
          presentationStyle="pageSheet"
          mode="single"
          locale="de"
          date={new Date()}
          onConfirm={(event) => {}}
          onDismiss={() => {}}
          visible={picking}
        />
    );
}

Preview

What have you tried so far?

Your Environment

software	version
ios	iPadOS 18.5
react-native	0.79.5
react-native-paper	0.22.25-0.22.47
node	20
expo sdk	53.0.20

[iM-GeeKy]

Per material guidelines https://m3.material.io/components/date-pickers/guidelines#e1722546-d8eb-4e09-a631-cd67f11994a9

[RichardLindhout]

Maybe we should disable pageSheet automatically if the screen size is too big for it or something or maybe we need the formSheet instead of pageSheet. @klydra are you open to test this and make a PR?

[klydra]

@RichardLindhout
Yeah, I could take a stab at that. I guess I'd make it dependent on iOS screen width/height then? Should it automatically fall back to displaying as overFullScreen in that case? Since that seems to work regardless of device size.

[RichardLindhout]

Maybe always formSheet not sure how big this one is. Or fallback to formsheet. I think the native sheets have some cool things like swipe to close and stuff like that :) Op di 19 aug 2025 om 14:50 schreef Jan Klinge ***@***.***>:

…

*klydra* left a comment (web-ridge/react-native-paper-dates#489) <#489 (comment)> @RichardLindhout <https://github.com/RichardLindhout> Yeah, I could take a stab at that. I guess I'd make it dependent on iOS screen width/height then? Should it automatically fall back to displaying as overFullScreen in that case? Since that seems to work regardless of device size. — Reply to this email directly, view it on GitHub <#489 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRRAROTXY26QTAGFOXG3333OMMS7AVCNFSM6AAAAACDIB32ZKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTEMBQGYZTCNRZGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>