callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
13.04k stars 2.1k forks source link

Add support for full-screen dialogs #3575

Open fabriziocucci opened 1 year ago

fabriziocucci commented 1 year ago

Is your feature request related to a problem? Please describe. Not sure if I've missed it but, it seems full-screen dialog are currently not supported.

Describe the solution you'd like It would be great to support full-screen dialogs as per MD3 spec.

Describe alternatives you've considered Tried to customise the existing Dialog to work full-screen dialog with messy results.

Additional context

Screenshot 2023-01-05 at 18 04 30
fabriziocucci commented 1 year ago

For the people landing on this feature request, while this is is being worked on, you can temporarily build a full-screen dialog by mixing and matching some of the existing components:

import { Modal } from "react-native";
import { Appbar, Button, Dialog } from "react-native-paper";

<Modal animationType="..." onRequestClose={dismiss} presentationStyle="overFullScreen" visible={...}>
    <Appbar.Header>
        <Appbar.Action icon="close" onPress={dismiss} />
        <Appbar.Content title="New event" />
        <Button onPress={save}>Save</Button>
    </Appbar.Header>
    <Dialog.Content>
        /* dialog content */
    </Dialog.Content>
</Modal>

NOTE: you could also use the Modal from react-native-paper but then you wouldn't be able to customise the animationType in case, for instance, you need a slide animation.

Really looking forward to get rid of this hack! :)

sangamesh1439 commented 1 year ago

@lukewalczak Can I pick this up?