Usage of presentationStyle prop added in documentation

Author: SharfMohiuddin

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

@@ -9,17 +9,17 @@ The input date picker provides a text field allowing for a date to be input or t
 ## Usage
 
 ```jsx
-import React from "react";
-import { View, Text } from "react-native";
-import { DatePickerInput } from 'react-native-paper-dates';
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import React from 'react'
+import { View, Text } from 'react-native'
+import { DatePickerInput } from 'react-native-paper-dates'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 export default function App() {
   const [inputDate, setInputDate] = React.useState(undefined)
 
   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

@@ -9,29 +9,29 @@ The multiple dates picker provides a modal allowing for multiple dates selection
 ## Usage
 
 ```jsx
-import React from "react";
-import { View, Text } from "react-native";
-import { Button } from 'react-native-paper';
-import { DatePickerModal } from 'react-native-paper-dates';
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import React from 'react'
+import { View, Text } from 'react-native'
+import { Button } from 'react-native-paper'
+import { DatePickerModal } from 'react-native-paper-dates'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 export default function App() {
-  const [dates, setDates] = React.useState();
-  const [open, setOpen] = React.useState(false);
+  const [dates, setDates] = React.useState()
+  const [open, setOpen] = React.useState(false)
 
   const onDismiss = React.useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
+    setOpen(false)
+  }, [setOpen])
 
   const onConfirm = React.useCallback((params) => {
-    setOpen(false);
-    setDates(params.dates);
-    console.log('[on-change-multi]', params);
-  }, []);
+    setOpen(false)
+    setDates(params.dates)
+    console.log('[on-change-multi]', params)
+  }, [])
 
   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

@@ -9,31 +9,34 @@ The range date picker provides a modal allowing the selection of a date range.
 ## Usage
 
 ```jsx
-import React from "react";
-import { View, Text } from "react-native";
-import { Button } from 'react-native-paper';
-import { DatePickerModal } from 'react-native-paper-dates';
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import React from 'react'
+import { View, Text } from 'react-native'
+import { Button } from 'react-native-paper'
+import { DatePickerModal } from 'react-native-paper-dates'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 export default function App() {
-  const [range, setRange] = React.useState({ startDate: undefined, endDate: undefined });
-  const [open, setOpen] = React.useState(false);
+  const [range, setRange] = React.useState({
+    startDate: undefined,
+    endDate: undefined,
+  })
+  const [open, setOpen] = React.useState(false)
 
   const onDismiss = React.useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
+    setOpen(false)
+  }, [setOpen])
 
   const onConfirm = React.useCallback(
     ({ startDate, endDate }) => {
-      setOpen(false);
-      setRange({ startDate, endDate });
+      setOpen(false)
+      setRange({ startDate, endDate })
     },
     [setOpen, setRange]
-  );
+  )
 
   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 +51,7 @@ export default function App() {
         />
       </View>
     </SafeAreaProvider>
-  );
+  )
 }
 ```
 
@@ -149,3 +152,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

@@ -9,31 +9,31 @@ The single date picker provides a modal allowing only a single date selection.
 ## Usage
 
 ```jsx
-import React from "react";
-import { View, Text } from "react-native";
-import { Button } from 'react-native-paper';
-import { DatePickerModal } from 'react-native-paper-dates';
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import React from 'react'
+import { View, Text } from 'react-native'
+import { Button } from 'react-native-paper'
+import { DatePickerModal } from 'react-native-paper-dates'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 export default function App() {
-  const [date, setDate] = React.useState(undefined);
-  const [open, setOpen] = React.useState(false);
+  const [date, setDate] = React.useState(undefined)
+  const [open, setOpen] = React.useState(false)
 
   const onDismissSingle = React.useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
+    setOpen(false)
+  }, [setOpen])
 
   const onConfirmSingle = React.useCallback(
     (params) => {
-      setOpen(false);
-      setDate(params.date);
+      setOpen(false)
+      setDate(params.date)
     },
     [setOpen, setDate]
-  );
+  )
 
   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.