Merge branch 'master' into fix-modal-jump-on-open

Author: SoyDiego

README.md

@@ -38,7 +38,7 @@ Check out the official docs: [web-ridge.github.io/react-native-paper-dates](http
 
 ## Maintainers
 
-[RichardLindhout](https://twitter.com/RichardLindhout) from [web_ridge](https://twitter.com/web_ridge)
+[RichardLindhout](https://twitter.com/RichardLindhout) from [web_ridge](https://twitter.com/web_ridge)   
 [Brandon Fitzwater](https://github.com/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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-paper-dates",
-  "version": "0.18.14",
+  "version": "0.18.16",
   "description": "Performant Date Picker for React Native Paper",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/Date/DatePickerModal.tsx

@@ -8,7 +8,6 @@ import {
   Platform,
   StatusBar,
 } from 'react-native'
-
 import { useTheme } from 'react-native-paper'
 import DatePickerModalContent, {
   DatePickerModalContentMultiProps,
@@ -22,6 +21,11 @@ interface DatePickerModalProps {
   disableStatusBar?: boolean
   disableStatusBarPadding?: boolean
   inputEnabled?: boolean
+  presentationStyle?:
+    | 'fullScreen'
+    | 'pageSheet'
+    | 'formSheet'
+    | 'overFullScreen'
 }
 
 export interface DatePickerModalSingleProps
@@ -50,6 +54,7 @@ export function DatePickerModal(
     disableStatusBar,
     disableStatusBarPadding,
     inputEnabled,
+    presentationStyle,
     ...rest
   } = props
   const animationTypeCalculated =
@@ -63,10 +68,10 @@ export function DatePickerModal(
     <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}
@@ -114,6 +119,7 @@ export function DatePickerModal(
     </View>
   )
 }
+
 const supportedOrientations: any = [
   'portrait',
   'portrait-upside-down',

src/Date/DatePickerModalHeader.tsx

@@ -48,7 +48,6 @@ export default function DatePickerModalHeader(
         />
         <Appbar.Content title={''} />
         <Button
-          color={color}
           textColor={theme.isV3 ? theme.colors.primary : color}
           onPress={props.onSave}
           disabled={props.saveLabelDisabled ?? false}
@@ -63,13 +62,9 @@ export default function DatePickerModalHeader(
 }
 
 const styles = StyleSheet.create({
-  fill: {
-    flex: 1,
-  },
   animated: {
     elevation: 4,
   },
-
   header: {
     height: 75,
     alignItems: 'center',