react-native-paper-dates 0.9.1 → 0.10.0

package/lib/typescript/TextInputMask.d.ts

@@ -13,6 +13,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<import("react-
     activeUnderlineColor?: string | undefined;
     outlineColor?: string | undefined;
     activeOutlineColor?: string | undefined;
+    textColor?: string | undefined;
     dense?: boolean | undefined;
     multiline?: boolean | undefined;
     numberOfLines?: number | undefined;
@@ -21,16 +22,20 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<import("react-
     render?: ((props: import("react-native-paper/lib/typescript/components/TextInput/types").RenderProps) => React.ReactNode) | undefined;
     value?: string | undefined;
     style?: import("react-native").StyleProp<import("react-native").TextStyle>;
-    theme: ReactNativePaper.Theme;
+    theme: import("react-native-paper/lib/typescript/types").InternalTheme;
+    testID?: string | undefined;
+    outlineStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    underlineStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
 } & React.RefAttributes<{
     focus: () => void;
     clear: () => void;
     blur: () => void;
     isFocused: () => boolean;
     setNativeProps: (nativeProps: object) => void;
-}>, "label" | "style" | "children" | "pointerEvents" | "allowFontScaling" | "numberOfLines" | "onLayout" | "onPressIn" | "onPressOut" | "testID" | "nativeID" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "left" | "right" | "ref" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "value" | "mode" | "textAlign" | "render" | "textAlignVertical" | "disabled" | "onBlur" | "onFocus" | "multiline" | "error" | "placeholder" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "onChange" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "underlineColor" | "activeUnderlineColor" | "outlineColor" | "activeOutlineColor" | "dense"> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
+}>, "label" | "style" | "children" | "pointerEvents" | "allowFontScaling" | "numberOfLines" | "onLayout" | "onPressIn" | "onPressOut" | "testID" | "nativeID" | "maxFontSizeMultiplier" | "disabled" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "left" | "right" | "ref" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "value" | "mode" | "error" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "onKeyPress" | "onScroll" | "defaultValue" | "spellCheck" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoComplete" | "maxLength" | "textAlign" | "textAlignVertical" | "multiline" | "onContentSizeChange" | "scrollEnabled" | "textColor" | "dense" | "render" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "editable" | "keyboardType" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "textContentType" | "cursorColor" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "underlineColor" | "activeUnderlineColor" | "outlineColor" | "activeOutlineColor" | "outlineStyle" | "underlineStyle"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<unknown> | undefined;
 } & {
     mask: string;
-}, "label" | "style" | "children" | "pointerEvents" | "allowFontScaling" | "numberOfLines" | "onLayout" | "onPressIn" | "onPressOut" | "testID" | "nativeID" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "left" | "right" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "value" | "mode" | "textAlign" | "render" | "textAlignVertical" | "disabled" | "onBlur" | "onFocus" | "multiline" | "error" | "placeholder" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "onChange" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "underlineColor" | "activeUnderlineColor" | "outlineColor" | "activeOutlineColor" | "dense" | "mask" | "theme"> & React.RefAttributes<unknown>>;
+    value: string;
+}, "label" | "style" | "children" | "pointerEvents" | "allowFontScaling" | "numberOfLines" | "onLayout" | "onPressIn" | "onPressOut" | "testID" | "nativeID" | "maxFontSizeMultiplier" | "disabled" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "left" | "right" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "value" | "mode" | "error" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "onKeyPress" | "onScroll" | "defaultValue" | "spellCheck" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoComplete" | "maxLength" | "textAlign" | "textAlignVertical" | "multiline" | "onContentSizeChange" | "scrollEnabled" | "textColor" | "dense" | "render" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "editable" | "keyboardType" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "textContentType" | "cursorColor" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "underlineColor" | "activeUnderlineColor" | "outlineColor" | "activeOutlineColor" | "outlineStyle" | "underlineStyle" | "mask" | "theme"> & React.RefAttributes<unknown>>;
 export default _default;

package/lib/typescript/Time/TimePicker.d.ts

@@ -4,7 +4,7 @@ export declare const DisplayModeContext: React.Context<{
     mode: 'AM' | 'PM' | undefined;
     setMode: React.Dispatch<React.SetStateAction<'AM' | 'PM' | undefined>>;
 }>;
-declare type onChangeFunc = ({ hours, minutes, focused, }: {
+type onChangeFunc = ({ hours, minutes, focused, }: {
     hours: number;
     minutes: number;
     focused?: undefined | PossibleClockTypes;

package/lib/typescript/Time/timeUtils.d.ts

@@ -1,23 +1,23 @@
 export declare const circleSize = 215;
-export declare type PossibleHourTypes = 'am' | 'pm';
-export declare type HourTypeMap = {
+export type PossibleHourTypes = 'am' | 'pm';
+export type HourTypeMap = {
     [hourType in PossibleHourTypes]: PossibleHourTypes;
 };
 export declare const hourTypes: HourTypeMap;
 export declare function getHourType(hours: number): PossibleHourTypes | undefined;
-export declare type PossibleInputTypes = 'keyboard' | 'picker';
-export declare type InputTypeMap = {
+export type PossibleInputTypes = 'keyboard' | 'picker';
+export type InputTypeMap = {
     [inputType in PossibleInputTypes]: PossibleInputTypes;
 };
 export declare const inputTypes: InputTypeMap;
 export declare const reverseInputTypes: InputTypeMap;
-declare type InputIconMap = {
+type InputIconMap = {
     [inputType in PossibleInputTypes]: string;
 };
 export declare const inputTypeIcons: InputIconMap;
 export declare const getTimeInputTypeIcon: (inputType: PossibleInputTypes, inputIconMap?: InputIconMap) => string;
-export declare type PossibleClockTypes = 'hours' | 'minutes';
-export declare type ClockTypeMap = {
+export type PossibleClockTypes = 'hours' | 'minutes';
+export type ClockTypeMap = {
     [clockType in PossibleClockTypes]: PossibleClockTypes;
 };
 export declare const clockTypes: ClockTypeMap;

package/lib/typescript/translations/utils.d.ts

@@ -1,4 +1,4 @@
-export declare type TranslationsType = {
+export type TranslationsType = {
     selectSingle: string;
     selectMultiple: string;
     selectRange: string;

package/lib/typescript/utils.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { DefaultTheme, MD3DarkTheme } from 'react-native-paper';
 import Color from 'color';
+export type PaperTheme = typeof MD3DarkTheme | typeof DefaultTheme;
 export declare function useLatest<T>(value: T): React.MutableRefObject<T>;
 export declare function useHeaderBackgroundColor(): string;
 export declare function useHeaderColorIsLight(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-paper-dates",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Performant Date Picker for React Native Paper",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -51,25 +51,26 @@
     "@react-native-community/eslint-config": "^3.1.0",
     "@release-it/conventional-changelog": "^5.1.0",
     "@types/color": "^3.0.3",
-    "@types/jest": "^28.1.8",
-    "@types/react": "^18.0.17",
-    "@types/react-native": "^0.69.5",
+    "@types/jest": "^29.2.4",
+    "@types/react": "^18.0.26",
+    "@types/react-native": "^0.70.8",
     "babel-loader": "^8.2.5",
     "commitlint": "^17.0.3",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "expo-cli": "^6.0.5",
+    "expo-cli": "^6.0.8",
     "husky": "^8.0.1",
     "jest": "^29.0.0",
     "pod-install": "^0.1.38",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
-    "react-native": "^0.69.5",
+    "react-native": "^0.70.6",
     "react-native-builder-bob": "^0.18.3",
-    "react-native-paper": "^4.12.4",
+    "react-native-paper": "^5.0.2",
+    "react-native-safe-area-context": "^4.4.1",
     "release-it": "^15.4.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "react": "*",

package/src/Date/AnimatedCrossView.tsx

@@ -3,14 +3,12 @@ import { Animated, StyleSheet, View } from 'react-native'
 import { useTheme } from 'react-native-paper'
 
 export default function AnimatedCrossView({
-  // visible,
   collapsed,
   calendar,
   calendarEdit,
 }: {
   calendar: any
   calendarEdit: any
-  // visible: boolean
   collapsed: boolean
 }) {
   const theme = useTheme()
@@ -18,13 +16,11 @@ export default function AnimatedCrossView({
     new Animated.Value(collapsed ? 1 : 0)
   )
   React.useEffect(() => {
-    // if (visible) {
     Animated.timing(calendarOpacity.current, {
       toValue: collapsed ? 1 : 0,
       duration: 250,
       useNativeDriver: true,
     }).start()
-    // }
   }, [collapsed])
 
   return (

package/src/Date/Calendar.tsx

@@ -34,7 +34,7 @@ export type BaseCalendarProps = {
   startYear?: number
   endYear?: number
 
-  // here they are optional but in final implemenation they are required
+  // here they are optional but in final implementation they are required
   date?: CalendarDate
   dates?: CalendarDates
   startDate?: CalendarDate
@@ -101,7 +101,7 @@ function Calendar(
 
   const selectColor = useMemo<string>(() => {
     if (theme.dark) {
-      return darkenBy(Color(theme.colors.primary), 0.9).hex()
+      return darkenBy(Color(theme.colors.primary), 0.1).hex()
     }
     return lightenBy(Color(theme.colors.primary), 0.9).hex()
   }, [theme])

package/src/Date/DatePickerInput.shared.tsx

@@ -11,6 +11,7 @@ export type DatePickerInputProps = {
   withModal?: boolean
   withDateFormatInLabel?: boolean
   calendarIcon?: string
+  saveLabel?: string
 } & Omit<
   React.ComponentProps<typeof TextInput>,
   'value' | 'onChange' | 'onChangeText'

package/src/Date/DatePickerInput.tsx

@@ -42,7 +42,7 @@ function DatePickerInput(
           />
         ) : null
       }
-      modal={({ value, locale, inputMode, validRange }) =>
+      modal={({ value, locale, inputMode, validRange, saveLabel }) =>
         withModal ? (
           <DatePickerModal
             date={value}
@@ -53,6 +53,7 @@ function DatePickerInput(
             locale={locale}
             dateMode={inputMode}
             validRange={validRange}
+            saveLabel={saveLabel}
           />
         ) : null
       }

package/src/Date/DatePickerInputWithoutModal.tsx

@@ -18,6 +18,7 @@ function DatePickerInputWithoutModal(
     withDateFormatInLabel = true,
     modal,
     inputButtons,
+    saveLabel,
     ...rest
   }: DatePickerInputProps & {
     modal?: (params: {
@@ -25,6 +26,7 @@ function DatePickerInputWithoutModal(
       locale: DatePickerInputProps['locale']
       inputMode: DatePickerInputProps['inputMode']
       validRange: DatePickerInputProps['validRange']
+      saveLabel: DatePickerInputProps['saveLabel']
     }) => any
     inputButtons?: any
   },
@@ -42,38 +44,34 @@ function DatePickerInputWithoutModal(
   return (
     <>
       <View style={styles.root}>
-        <TextInputWithMask
-          {...rest}
-          ref={ref}
-          label={getLabel({
-            // TODO: support label components?
-            label: label as any,
-            inputFormat,
-            withDateFormatInLabel,
-          })}
-          value={formattedValue}
-          keyboardType={'number-pad'}
-          placeholder={inputFormat}
-          mask={inputFormat}
-          onChangeText={onChangeText}
-          keyboardAppearance={theme.dark ? 'dark' : 'default'}
-          error={!!error}
-          style={[styles.input, style]}
-        />
-        {inputButtons}
-        {!!error ? (
-          <View style={styles.helperText}>
-            <HelperText
-              style={styles.helperText}
-              type="error"
-              visible={!!error}
-            >
-              {error}
-            </HelperText>
-          </View>
+        <View style={styles.inputContainer}>
+          <TextInputWithMask
+            {...rest}
+            ref={ref}
+            label={getLabel({
+              // TODO: support label components?
+              label: label as any,
+              inputFormat,
+              withDateFormatInLabel,
+            })}
+            value={formattedValue}
+            keyboardType={'number-pad'}
+            placeholder={inputFormat}
+            mask={inputFormat}
+            onChangeText={onChangeText}
+            keyboardAppearance={theme.dark ? 'dark' : 'default'}
+            error={!!error}
+            style={[styles.input, style]}
+          />
+          {inputButtons}
+        </View>
+        {error ? (
+          <HelperText style={styles.helperText} type="error" visible={!!error}>
+            {error}
+          </HelperText>
         ) : null}
       </View>
-      {modal?.({ value, locale, inputMode, validRange })}
+      {modal?.({ value, locale, inputMode, validRange, saveLabel })}
     </>
   )
 }
@@ -95,16 +93,20 @@ function getLabel({
 
 const styles = StyleSheet.create({
   root: {
-    minWidth: 150,
     flexGrow: 1,
-    justifyContent: 'center',
+    backgroundColor: 'pink',
   },
-  helperTextContainer: {
+  inputContainer: {
+    flexGrow: 1,
     flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  input: {
+    flexGrow: 1,
   },
   helperText: {
-    flex: 1,
+    // flex: 1,
   },
-  input: {},
 })
 export default React.forwardRef(DatePickerInputWithoutModal)

package/src/Date/DatePickerModalContent.tsx

@@ -145,8 +145,8 @@ export function DatePickerModalContent(
           onSave={onInnerConfirm}
           onDismiss={onDismiss}
           saveLabel={props.saveLabel}
-          saveLabelDisabled={props.saveLabelDisabled ?? false}
-          uppercase={props.uppercase ?? true}
+          saveLabelDisabled={props.saveLabelDisabled || false}
+          uppercase={props.uppercase || true}
           disableSafeTop={disableSafeTop}
           closeIcon={props.closeIcon}
         />
@@ -161,7 +161,7 @@ export function DatePickerModalContent(
           moreLabel={props.moreLabel}
           startLabel={props.startLabel}
           endLabel={props.endLabel}
-          uppercase={props.uppercase ?? true}
+          uppercase={props.uppercase || true}
           locale={locale}
           editIcon={props.editIcon}
           calendarIcon={props.calendarIcon}

package/src/Date/DatePickerModalContentHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { IconButton, Text } from 'react-native-paper'
+import { IconButton, MD2Theme, Text, useTheme } from 'react-native-paper'
 import type { ModeType } from './Calendar'
 import type { LocalState } from './DatePickerModalContent'
 import { useHeaderTextColor } from '../utils'
@@ -61,15 +61,20 @@ export default function DatePickerModalContentHeader(
     editIcon = 'pencil',
     calendarIcon = 'calendar',
   } = props
-
+  const theme = useTheme()
   const label = getLabel(props.locale, props.mode, props.label)
 
   const color = useHeaderTextColor()
   const allowEditing = mode !== 'multiple'
+
+  let textFont = theme?.isV3
+    ? theme.fonts.bodyLarge
+    : (theme as any as MD2Theme).fonts.medium
+
   return (
     <View style={[styles.header]}>
       <View>
-        <Text style={[styles.label, { color }]}>
+        <Text style={[styles.label, { color, ...textFont }]}>
           {uppercase ? label.toUpperCase() : label}
         </Text>
         <View style={styles.headerContentContainer}>
@@ -97,7 +102,7 @@ export default function DatePickerModalContentHeader(
               ? getTranslation(props.locale, 'typeInDate')
               : getTranslation(props.locale, 'pickDateFromCalendar')
           }
-          color={color}
+          iconColor={color}
           onPress={onToggle}
         />
       ) : null}

package/src/Date/DatePickerModalHeader.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
-import { Animated, StyleSheet, SafeAreaView } from 'react-native'
+import { Animated, StyleSheet } from 'react-native'
 import { Appbar, Button } from 'react-native-paper'
 
 import { useHeaderTextColor } from '../utils'
 import { getTranslation } from '../translations/utils'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export interface DatePickerModalHeaderProps {
   disableSafeTop?: boolean
@@ -22,37 +23,40 @@ export default function DatePickerModalHeader(
   const { disableSafeTop, locale, closeIcon = 'close' } = props
   const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
+  const insets = useSafeAreaInsets()
+
   return (
-    <>
-      <Animated.View style={styles.animated}>
-        <SafeAreaView
-          style={[
-            styles.safeContent,
-            disableSafeTop && styles.safeContentNoTop,
-          ]}
+    <Animated.View
+      style={[
+        styles.animated,
+        {
+          paddingTop: disableSafeTop ? 0 : insets.top,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        },
+      ]}
+    >
+      <Appbar style={styles.appbarHeader}>
+        <Appbar.Action
+          icon={closeIcon}
+          accessibilityLabel={getTranslation(locale, 'close')}
+          onPress={props.onDismiss}
+          color={color}
+          testID="react-native-paper-dates-close"
+        />
+        <Appbar.Content title={''} />
+        <Button
+          color={color}
+          textColor={color}
+          onPress={props.onSave}
+          disabled={props.saveLabelDisabled || false}
+          uppercase={props.uppercase || true}
+          testID="react-native-paper-dates-save"
         >
-          <Appbar style={styles.appbarHeader}>
-            <Appbar.Action
-              icon={closeIcon}
-              accessibilityLabel={getTranslation(locale, 'close')}
-              onPress={props.onDismiss}
-              color={color}
-              testID="react-native-paper-dates-close"
-            />
-            <Appbar.Content title={''} />
-            <Button
-              color={color}
-              onPress={props.onSave}
-              disabled={props.saveLabelDisabled ?? false}
-              uppercase={props.uppercase ?? true}
-              testID="react-native-paper-dates-save"
-            >
-              {saveLabel}
-            </Button>
-          </Appbar>
-        </SafeAreaView>
-      </Animated.View>
-    </>
+          {saveLabel}
+        </Button>
+      </Appbar>
+    </Animated.View>
   )
 }
 
@@ -61,15 +65,9 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   animated: {
-    paddingBottom: 0,
     elevation: 4,
   },
-  safeContent: {
-    paddingBottom: 0,
-  },
-  safeContentNoTop: {
-    paddingTop: 0,
-  },
+
   header: {
     height: 75,
     alignItems: 'center',

package/src/Date/DatePickerModalHeaderBackground.tsx

@@ -1,6 +1,7 @@
-import { Animated, SafeAreaView, StyleSheet } from 'react-native'
+import { Animated, StyleSheet } from 'react-native'
 import * as React from 'react'
 import { useHeaderBackgroundColor } from '../utils'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export default function DatePickerModalHeaderBackground({
   children,
@@ -8,27 +9,25 @@ export default function DatePickerModalHeaderBackground({
   children: any
 }) {
   const backgroundColor = useHeaderBackgroundColor()
-
+  const insets = useSafeAreaInsets()
   return (
     <Animated.View
       style={[
         styles.animated,
         {
           backgroundColor,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
         },
       ]}
     >
-      <SafeAreaView style={styles.safeContent}>{children}</SafeAreaView>
+      {children}
     </Animated.View>
   )
 }
 
 const styles = StyleSheet.create({
   animated: {
-    paddingBottom: 0,
     elevation: 4,
   },
-  safeContent: {
-    paddingBottom: 0,
-  },
 })

package/src/Date/Day.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react'
-import { DarkTheme, Text, TouchableRipple } from 'react-native-paper'
+import { MD2Theme, Text, TouchableRipple } from 'react-native-paper'
 import { StyleSheet, View } from 'react-native'
 import DayRange from './DayRange'
 import { daySize } from './dateUtils'
 
+import type { PaperTheme } from '../utils'
+
 function EmptyDayPure() {
   return <View style={styles.empty} />
 }
 export const EmptyDay = React.memo(EmptyDayPure)
 
 function Day(props: {
-  theme: typeof DarkTheme
+  theme: PaperTheme
   textColorOnPrimary: string
   day: number
   month: number
@@ -41,7 +43,6 @@ function Day(props: {
     textColorOnPrimary,
     theme,
   } = props
-  // console.log(month, { day })
   const onPress = React.useCallback(() => {
     onPressDate(new Date(year, month, day))
   }, [onPressDate, year, month, day])
@@ -55,6 +56,10 @@ function Day(props: {
   const textColor =
     selected || (inRange && theme.dark) ? textColorOnPrimary : undefined
 
+  let textFont = theme?.isV3
+    ? theme.fonts.bodyMedium
+    : (theme as any as MD2Theme).fonts.medium
+
   return (
     <View style={[styles.root, disabled && styles.disabled]}>
       <DayRange
@@ -83,7 +88,10 @@ function Day(props: {
           ]}
         >
           <Text
-            style={textColor ? { color: textColor } : undefined}
+            style={[
+              textColor ? { color: textColor } : undefined,
+              { ...textFont },
+            ]}
             selectable={false}
           >
             {day}

package/src/Date/DayName.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Text, useTheme } from 'react-native-paper'
+import { MD2Theme, Text, useTheme } from 'react-native-paper'
 
 function DayName({ label }: { label: string }) {
   const theme = useTheme()
+
+  let textFont = theme?.isV3
+    ? theme.fonts.bodyMedium
+    : (theme as any as MD2Theme).fonts.medium
+
   return (
     <View style={styles.dayName}>
-      <Text
-        style={[styles.dayNameLabel, theme.fonts.medium]}
-        selectable={false}
-      >
+      <Text style={[styles.dayNameLabel, { ...textFont }]} selectable={false}>
         {label}
       </Text>
     </View>

package/src/Date/Month.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { IconButton, Text, useTheme, TouchableRipple } from 'react-native-paper'
+import {
+  IconButton,
+  Text,
+  useTheme,
+  TouchableRipple,
+  MD2Theme,
+} from 'react-native-paper'
 import Day, { EmptyDay } from './Day'
 
 import {
@@ -244,6 +250,10 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     date,
   ])
 
+  let textFont = theme?.isV3
+    ? theme.fonts.bodyMedium
+    : (theme as any as MD2Theme).fonts.medium
+
   return (
     <View style={[styles.month, { height: getMonthHeight(scrollMode, index) }]}>
       <View
@@ -278,7 +288,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             ]}
           >
             <Text
-              style={[styles.monthLabel, theme.fonts.medium]}
+              style={[styles.monthLabel, { ...textFont }]}
               selectable={false}
             >
               {monthName} {year}