Merge pull request #311 from SharfMohiuddin/master

PresentationStyle

Author: iM-GeeKy

docusaurus/docs/date-picker/input-date-picker.md

@@ -19,7 +19,7 @@ export default function App() {
 
   return (
     <SafeAreaProvider>
-      <View style={{justifyContent: 'center', flex: 1, alignItems: 'center'}}>
+      <View style={{ justifyContent: 'center', flex: 1, alignItems: 'center' }}>
         <DatePickerInput
           locale="en"
           label="Birthdate"
@@ -29,7 +29,7 @@ export default function App() {
         />
       </View>
     </SafeAreaProvider>
-  );
+  )
 }
 ```
 
@@ -103,4 +103,15 @@ The end year when the component is rendered. Defaults to `2200`.
 `Type: boolean | undefined`  
 Flag indicating if the component should be enabled or not. Behavior similarly to `disabled`. Defaults to `true`.
 
-* Other [react-native TextInput props](https://reactnative.dev/docs/textinput#props).*
+**presentationStyle**
+`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
+Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed.
+
+- `'fullScreen'`: Presents the modal as a full-screen overlay.
+- `'pageSheet'`: Displays the modal as a card-style sheet that covers a portion of the screen.
+- `'formSheet'`: Renders the modal as a smaller form-style sheet.
+- `'overFullScreen'`: Overlays the modal on top of the content, allowing interaction with the underlying content.
+
+For example, if you set `presentationStyle` to `'pageSheet'`, the modal will be presented as a card-like sheet.
+
+- Other [react-native TextInput props](https://reactnative.dev/docs/textinput#props).\*

docusaurus/docs/date-picker/multiple-dates-picker.md

@@ -31,7 +31,7 @@ export default function App() {
 
   return (
     <SafeAreaProvider>
-      <View style={{justifyContent: 'center', flex: 1, alignItems: 'center'}}>
+      <View style={{ justifyContent: 'center', flex: 1, alignItems: 'center' }}>
         <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
           Pick multiple dates
         </Button>
@@ -45,7 +45,7 @@ export default function App() {
         />
       </View>
     </SafeAreaProvider>
-  );
+  )
 }
 ```
 
@@ -142,3 +142,14 @@ The edit icon used to toggle between calendar and input. Defaults to `pencil`. Y
 **calendarIcon**  
 `Type: string | undefined`  
 The edit icon used to toggle between input and calendar. Defaults to `calendar`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).
+
+**presentationStyle**
+`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
+Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed.
+
+- `'fullScreen'`: Presents the modal as a full-screen overlay.
+- `'pageSheet'`: Displays the modal as a card-style sheet that covers a portion of the screen.
+- `'formSheet'`: Renders the modal as a smaller form-style sheet.
+- `'overFullScreen'`: Overlays the modal on top of the content, allowing interaction with the underlying content.
+
+For example, if you set `presentationStyle` to `'pageSheet'`, the modal will be presented as a card-like sheet.

docusaurus/docs/date-picker/range-date-picker.md

@@ -19,11 +19,11 @@ export default function App() {
   const [range, setRange] = React.useState({ startDate: undefined, endDate: undefined });
   const [open, setOpen] = React.useState(false);
 
-  const onDismiss = React.useCallback(() => {
+   const onDismiss = React.useCallback(() => {
     setOpen(false);
   }, [setOpen]);
 
-  const onConfirm = React.useCallback(
+ const onConfirm = React.useCallback(
     ({ startDate, endDate }) => {
       setOpen(false);
       setRange({ startDate, endDate });
@@ -33,7 +33,7 @@ export default function App() {
 
   return (
     <SafeAreaProvider>
-      <View style={{justifyContent: 'center', flex: 1, alignItems: 'center'}}>
+      <View style={{ justifyContent: 'center', flex: 1, alignItems: 'center' }}>
         <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
           Pick range
         </Button>
@@ -48,7 +48,7 @@ export default function App() {
         />
       </View>
     </SafeAreaProvider>
-  );
+  )
 }
 ```
 
@@ -149,3 +149,14 @@ The edit icon used to toggle between input and calendar. Defaults to `calendar`.
 **inputEnabled**  
 `Type: boolean | undefined`  
 Flag indicating if the component should be enabled or not. Defaults to `true`.
+
+**presentationStyle**
+`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
+Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed.
+
+- `'fullScreen'`: Presents the modal as a full-screen overlay.
+- `'pageSheet'`: Displays the modal as a card-style sheet that covers a portion of the screen.
+- `'formSheet'`: Renders the modal as a smaller form-style sheet.
+- `'overFullScreen'`: Overlays the modal on top of the content, allowing interaction with the underlying content.
+
+For example, if you set `presentationStyle` to `'pageSheet'`, the modal will be presented as a card-like sheet.

docusaurus/docs/date-picker/single-date-picker.md

@@ -33,7 +33,7 @@ export default function App() {
 
   return (
     <SafeAreaProvider>
-      <View style={{justifyContent: 'center', flex: 1, alignItems: 'center'}}>
+      <View style={{ justifyContent: 'center', flex: 1, alignItems: 'center' }}>
         <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
           Pick single date
         </Button>
@@ -47,7 +47,7 @@ export default function App() {
         />
       </View>
     </SafeAreaProvider>
-  );
+  )
 }
 ```
 
@@ -136,3 +136,14 @@ The edit icon used to toggle between input and calendar. Defaults to `calendar`.
 **inputEnabled**  
 `Type: boolean | undefined`  
 Flag indicating if the component should be enabled or not. Defaults to `true`.
+
+**presentationStyle**
+`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
+Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed.
+
+- `'fullScreen'`: Presents the modal as a full-screen overlay.
+- `'pageSheet'`: Displays the modal as a card-style sheet that covers a portion of the screen.
+- `'formSheet'`: Renders the modal as a smaller form-style sheet.
+- `'overFullScreen'`: Overlays the modal on top of the content, allowing interaction with the underlying content.
+
+For example, if you set `presentationStyle` to `'pageSheet'`, the modal will be presented as a card-like sheet.

src/Date/DatePickerModal.tsx

@@ -8,7 +8,6 @@ import {
   Platform,
   StatusBar,
 } from 'react-native'
-
 import { useTheme } from 'react-native-paper'
 import DatePickerModalContent, {
   DatePickerModalContentMultiProps,
@@ -24,6 +23,11 @@ interface DatePickerModalProps {
   disableStatusBar?: boolean
   disableStatusBarPadding?: boolean
   inputEnabled?: boolean
+  presentationStyle?:
+    | 'fullScreen'
+    | 'pageSheet'
+    | 'formSheet'
+    | 'overFullScreen'
 }
 
 export interface DatePickerModalSingleProps
@@ -52,6 +56,7 @@ export function DatePickerModal(
     disableStatusBar,
     disableStatusBarPadding,
     inputEnabled,
+    presentationStyle,
     ...rest
   } = props
   const animationTypeCalculated =
@@ -64,15 +69,15 @@ export function DatePickerModal(
   const isLight = useHeaderColorIsLight()
   const headerBackgroundColor = useHeaderBackgroundColor()
   const insets = useSafeAreaInsets()
-
+  const isTransparent = presentationStyle === 'pageSheet' ? false : true
   return (
     <View style={[StyleSheet.absoluteFill]} pointerEvents="box-none">
       <Modal
         animationType={animationTypeCalculated}
-        transparent={true}
+        transparent={isTransparent}
         visible={visible}
         onRequestClose={rest.onDismiss}
-        presentationStyle="overFullScreen"
+        presentationStyle={presentationStyle || 'overFullScreen'}
         supportedOrientations={supportedOrientations}
         //@ts-ignore
         statusBarTranslucent={true}
@@ -126,6 +131,7 @@ export function DatePickerModal(
     </View>
   )
 }
+
 const supportedOrientations: any = [
   'portrait',
   'portrait-upside-down',