React Native Paper 5 Support

[iM-GeeKy]

As it stands, react-native-paper 5.0.0-rc.4 is still in development, but is there any planned support for this in conjunction with this library?

[RichardLindhout]

I think we should support this, but unfortanaly very short in time but would welcome PR

[dohomi]

Did anyone find a workaround?

[RichardLindhout]

I don't see any migration path in RNP?

[iM-GeeKy]

I don't see any migration path in RNP?

I'm sure you've seen this? https://callstack.github.io/react-native-paper/introducing-v5-with-material-you.html

[swordensen]

Did anyone find a workaround?

<PaperProvider theme={{ version: 2 }}>
     <App />
</PaperProvider>

works for me.

ref: https://callstack.github.io/react-native-paper/introducing-v5-with-material-you.html#versioning

[iM-GeeKy]

I've started a branch that address most of the changes needed for react-native-paper v.5+. It's not quite ready, but shouldn't take much more to finish out.

For those who want a very rough patch. I've been using the following as a quick-workaround.

diff --git a/node_modules/react-native-paper-dates/lib/typescript/Date/DatePickerModalContent.d.ts b/node_modules/react-native-paper-dates/lib/typescript/Date/DatePickerModalContent.d.ts
index 8208b86..517b977 100644
--- a/node_modules/react-native-paper-dates/lib/typescript/Date/DatePickerModalContent.d.ts
+++ b/node_modules/react-native-paper-dates/lib/typescript/Date/DatePickerModalContent.d.ts
@@ -13,6 +13,7 @@ interface DatePickerModalContentBaseProps {
     onDismiss: () => any;
     disableSafeTop?: boolean;
     saveLabelDisabled?: boolean;
+    uppercase?: boolean
 }
 export interface DatePickerModalContentRangeProps extends HeaderPickProps, BaseCalendarProps, DatePickerModalContentBaseProps {
     mode: 'range';
diff --git a/node_modules/react-native-paper-dates/src/Date/Calendar.tsx b/node_modules/react-native-paper-dates/src/Date/Calendar.tsx
index a07b587..15e4315 100644
--- a/node_modules/react-native-paper-dates/src/Date/Calendar.tsx
+++ b/node_modules/react-native-paper-dates/src/Date/Calendar.tsx
@@ -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])
diff --git a/node_modules/react-native-paper-dates/src/Date/DatePickerInputWithoutModal.tsx b/node_modules/react-native-paper-dates/src/Date/DatePickerInputWithoutModal.tsx
index ef93bc7..605fdb5 100644
--- a/node_modules/react-native-paper-dates/src/Date/DatePickerInputWithoutModal.tsx
+++ b/node_modules/react-native-paper-dates/src/Date/DatePickerInputWithoutModal.tsx
@@ -58,7 +58,7 @@ function DatePickerInputWithoutModal(
           onChangeText={onChangeText}
           keyboardAppearance={theme.dark ? 'dark' : 'default'}
           error={!!error}
-          style={[styles.input, style]}
+          style={style}
         />
         {inputButtons}
         {!!error ? (
@@ -95,9 +95,8 @@ function getLabel({

 const styles = StyleSheet.create({
   root: {
-    minWidth: 150,
+    flex: 1,
     flexGrow: 1,
-    justifyContent: 'center',
   },
   helperTextContainer: {
     flexDirection: 'row',
@@ -105,6 +104,5 @@ const styles = StyleSheet.create({
   helperText: {
     flex: 1,
   },
-  input: {},
 })
 export default React.forwardRef(DatePickerInputWithoutModal)
diff --git a/node_modules/react-native-paper-dates/src/Date/DatePickerModalContent.tsx b/node_modules/react-native-paper-dates/src/Date/DatePickerModalContent.tsx
index 95d7fda..d4fa869 100644
--- a/node_modules/react-native-paper-dates/src/Date/DatePickerModalContent.tsx
+++ b/node_modules/react-native-paper-dates/src/Date/DatePickerModalContent.tsx
@@ -32,6 +32,7 @@ interface DatePickerModalContentBaseProps {
   onDismiss: () => any
   disableSafeTop?: boolean
   saveLabelDisabled?: boolean
+  uppercase?: boolean
 }

 export interface DatePickerModalContentRangeProps
@@ -72,6 +73,7 @@ export function DatePickerModalContent(
     | DatePickerModalContentSingleProps
     | DatePickerModalContentMultiProps
 ) {
+
   const {
     mode,
     onChange,
@@ -137,6 +139,7 @@ export function DatePickerModalContent(
     setCollapsed((prev) => !prev)
   }, [setCollapsed])

+
   return (
     <>
       <DatePickerModalHeaderBackground>
@@ -145,8 +148,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 +164,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}
diff --git a/node_modules/react-native-paper-dates/src/Date/DatePickerModalContentHeader.tsx b/node_modules/react-native-paper-dates/src/Date/DatePickerModalContentHeader.tsx
index e8e36cb..96afaff 100644
--- a/node_modules/react-native-paper-dates/src/Date/DatePickerModalContentHeader.tsx
+++ b/node_modules/react-native-paper-dates/src/Date/DatePickerModalContentHeader.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { IconButton, Text } from 'react-native-paper'
+import { IconButton, Text, useTheme } from 'react-native-paper'
 import type { ModeType } from './Calendar'
 import type { LocalState } from './DatePickerModalContent'
 import { useHeaderTextColor } from '../utils'
 import Color from 'color'
 import { getTranslation } from '../translations/utils'
+import type { Fonts, MD3Typescale } from 'react-native-paper/lib/typescript/types'

 export interface HeaderPickProps {
   moreLabel?: string
@@ -61,15 +62,15 @@ export default function DatePickerModalContentHeader(
     editIcon = 'pencil',
     calendarIcon = 'calendar',
   } = props
-
   const label = getLabel(props.locale, props.mode, props.label)

   const color = useHeaderTextColor()
   const allowEditing = mode !== 'multiple'
+
   return (
     <View style={[styles.header]}>
       <View>
-        <Text style={[styles.label, { color }]}>
+        <Text style={[styles.label, { color }]} variant="bodyMedium">
           {uppercase ? label.toUpperCase() : label}
         </Text>
         <View style={styles.headerContentContainer}>
@@ -97,7 +98,7 @@ export default function DatePickerModalContentHeader(
               ? getTranslation(props.locale, 'typeInDate')
               : getTranslation(props.locale, 'pickDateFromCalendar')
           }
-          color={color}
+          iconColor={color}
           onPress={onToggle}
         />
       ) : null}
@@ -212,7 +213,7 @@ const styles = StyleSheet.create({
     paddingRight: 12,
   },
   headerContentContainer: { marginTop: 5, flexDirection: 'row' },
-  label: { color: '#fff', letterSpacing: 1, fontSize: 13 },
+  label: { color: '#fff', letterSpacing: 1},
   singleHeaderText: { color: '#fff', fontSize: 25 },
   rangeHeaderText: { color: '#fff', fontSize: 25 },
   excludeInRangeHeaderText: { fontSize: 25 },
diff --git a/node_modules/react-native-paper-dates/src/Date/DatePickerModalHeader.tsx b/node_modules/react-native-paper-dates/src/Date/DatePickerModalHeader.tsx
index 13e8e5b..7f5307c 100644
--- a/node_modules/react-native-paper-dates/src/Date/DatePickerModalHeader.tsx
+++ b/node_modules/react-native-paper-dates/src/Date/DatePickerModalHeader.tsx
@@ -22,6 +22,7 @@ export default function DatePickerModalHeader(
   const { disableSafeTop, locale, closeIcon = 'close' } = props
   const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
+
   return (
     <>
       <Animated.View style={styles.animated}>
@@ -42,9 +43,10 @@ export default function DatePickerModalHeader(
             <Appbar.Content title={''} />
             <Button
               color={color}
+              textColor={color}
               onPress={props.onSave}
-              disabled={props.saveLabelDisabled || false}
-              uppercase={props.uppercase || true}
+              disabled={props.saveLabelDisabled ?? false}
+              uppercase={props.uppercase ?? true}
               testID="react-native-paper-dates-save"
             >
               {saveLabel}
diff --git a/node_modules/react-native-paper-dates/src/Date/DateRangeInput.tsx b/node_modules/react-native-paper-dates/src/Date/DateRangeInput.tsx
index f6db2f8..e1b2c94 100644
--- a/node_modules/react-native-paper-dates/src/Date/DateRangeInput.tsx
+++ b/node_modules/react-native-paper-dates/src/Date/DateRangeInput.tsx
@@ -20,7 +20,6 @@ export default function DateRangeInput({
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ({ startDate, endDate }: { startDate: any; endDate: any }) => {
       setVisible(false)
-      console.log({ startDate, endDate })
     },
     [setVisible]
   )
diff --git a/node_modules/react-native-paper-dates/src/Date/Day.tsx b/node_modules/react-native-paper-dates/src/Date/Day.tsx
index 6fa1edb..755ad1c 100644
--- a/node_modules/react-native-paper-dates/src/Date/Day.tsx
+++ b/node_modules/react-native-paper-dates/src/Date/Day.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react'
-import { DarkTheme, Text, TouchableRipple } from 'react-native-paper'
+import { MD3DarkTheme, Text, TouchableRipple } from 'react-native-paper'
 import { StyleSheet, View } from 'react-native'
 import DayRange from './DayRange'
 import { daySize } from './dateUtils'
+import type { Fonts, MD3Typescale } from 'react-native-paper/lib/typescript/types'

 function EmptyDayPure() {
   return <View style={styles.empty} />
@@ -10,7 +11,7 @@ function EmptyDayPure() {
 export const EmptyDay = React.memo(EmptyDayPure)

 function Day(props: {
-  theme: typeof DarkTheme
+  theme: typeof MD3DarkTheme
   textColorOnPrimary: string
   day: number
   month: number
@@ -41,7 +42,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 +55,12 @@ function Day(props: {
   const textColor =
     selected || (inRange && theme.dark) ? textColorOnPrimary : undefined

+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyMedium
+  }
+
   return (
     <View style={[styles.root, disabled && styles.disabled]}>
       <DayRange
@@ -83,7 +89,10 @@ function Day(props: {
           ]}
         >
           <Text
-            style={textColor ? { color: textColor } : undefined}
+            style={[
+              textColor ? { color: textColor } : undefined,
+              { ...textFont },
+            ]}
             selectable={false}
           >
             {day}
diff --git a/node_modules/react-native-paper-dates/src/Date/DayName.tsx b/node_modules/react-native-paper-dates/src/Date/DayName.tsx
index 4820488..8b90a22 100644
--- a/node_modules/react-native-paper-dates/src/Date/DayName.tsx
+++ b/node_modules/react-native-paper-dates/src/Date/DayName.tsx
@@ -1,15 +1,23 @@
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Text, useTheme } from 'react-native-paper'
+import { Text, Theme, useTheme } from 'react-native-paper'
+import type {
+  Fonts,
+  MD3Typescale,
+} from 'react-native-paper/lib/typescript/types'

 function DayName({ label }: { label: string }) {
-  const theme = useTheme()
+  const theme: Theme = useTheme()
+
+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyMedium
+  }
+
   return (
     <View style={styles.dayName}>
-      <Text
-        style={[styles.dayNameLabel, theme.fonts.medium]}
-        selectable={false}
-      >
+      <Text style={[styles.dayNameLabel, { ...textFont }]} selectable={false}>
         {label}
       </Text>
     </View>
diff --git a/node_modules/react-native-paper-dates/src/Date/Month.tsx b/node_modules/react-native-paper-dates/src/Date/Month.tsx
index 6ab8c7a..d9811ac 100644
--- a/node_modules/react-native-paper-dates/src/Date/Month.tsx
+++ b/node_modules/react-native-paper-dates/src/Date/Month.tsx
@@ -29,6 +29,7 @@ import type {
 } from './Calendar'
 import { dayNamesHeight } from './DayNames'
 import { useTextColorOnPrimary } from '../utils'
+import type { Fonts, MD3Typescale } from 'react-native-paper/lib/typescript/types'

 interface BaseMonthProps {
   locale: undefined | string
@@ -244,6 +245,12 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     date,
   ])

+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyMedium
+  }
+
   return (
     <View style={[styles.month, { height: getMonthHeight(scrollMode, index) }]}>
       <View
@@ -278,7 +285,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             ]}
           >
             <Text
-              style={[styles.monthLabel, theme.fonts.medium]}
+              style={[styles.monthLabel, { ...textFont }]}
               selectable={false}
             >
               {monthName} {year}
diff --git a/node_modules/react-native-paper-dates/src/Date/YearPicker.tsx b/node_modules/react-native-paper-dates/src/Date/YearPicker.tsx
index 43135cc..e02e6e0 100644
--- a/node_modules/react-native-paper-dates/src/Date/YearPicker.tsx
+++ b/node_modules/react-native-paper-dates/src/Date/YearPicker.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
 import { Text, TouchableRipple, useTheme } from 'react-native-paper'
+import type {
+  Fonts,
+  MD3Typescale,
+} from 'react-native-paper/lib/typescript/types'
 import { range } from '../utils'

 const ITEM_HEIGHT = 62
@@ -20,7 +24,10 @@ export default function YearPicker({
 }) {
   const theme = useTheme()
   const flatList = React.useRef<FlatList<number> | null>(null)
-  const years = range(isNaN(startYear) ? 1800 : startYear, isNaN(endYear) ? 2200 : endYear)
+  const years = range(
+    isNaN(startYear) ? 1800 : startYear,
+    isNaN(endYear) ? 2200 : endYear
+  )

   // scroll to selected year
   React.useEffect(() => {
@@ -31,7 +38,7 @@ export default function YearPicker({
         animated: false,
       })
     }
-  }, [flatList, selectedYear])
+  }, [flatList, selectedYear, startYear])

   return (
     <View
@@ -71,6 +78,13 @@ function YearPure({
   onPressYear: (newYear: number) => any
 }) {
   const theme = useTheme()
+
+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyLarge
+  }
+
   return (
     <View style={styles.year}>
       <TouchableRipple
@@ -86,7 +100,11 @@ function YearPure({
           ]}
         >
           <Text
-            style={[styles.yearLabel, selected ? styles.selectedYear : null]}
+            style={[
+              styles.yearLabel,
+              selected ? styles.selectedYear : null,
+              { ...textFont },
+            ]}
             selectable={false}
           >
             {year}
diff --git a/node_modules/react-native-paper-dates/src/TextInputMask.tsx b/node_modules/react-native-paper-dates/src/TextInputMask.tsx
index 5c76898..594db6d 100644
--- a/node_modules/react-native-paper-dates/src/TextInputMask.tsx
+++ b/node_modules/react-native-paper-dates/src/TextInputMask.tsx
@@ -72,7 +72,7 @@ function TextInputWithMask(
     value,
     mask,
     ...rest
-  }: React.ComponentProps<typeof TextInput> & { mask: string },
+  }: React.ComponentProps<typeof TextInput> & { mask: string; value: string },
   ref: any
 ) {
   const [controlledValue, setControlledValue] = React.useState<string>(
@@ -80,12 +80,15 @@ function TextInputWithMask(
   )

   const onInnerChange = (text: string) => {
-    const enhancedText = enhanceTextWithMask(text, mask, controlledValue)
-    setControlledValue(enhancedText)
-
     if (text.length === mask.length) {
       onChangeText && onChangeText(text)
     }
+    setControlledValue(text)
+  }
+
+  const onInnerBlur = () => {
+    const enhancedText = enhanceTextWithMask(value, mask, controlledValue)
+    setControlledValue(enhancedText)
   }

   React.useEffect(() => {
@@ -98,6 +101,7 @@ function TextInputWithMask(
       {...rest}
       value={controlledValue}
       onChangeText={onInnerChange}
+      onBlur={onInnerBlur}
     />
   )
 }
diff --git a/node_modules/react-native-paper-dates/src/Time/AmPmSwitcher.tsx b/node_modules/react-native-paper-dates/src/Time/AmPmSwitcher.tsx
index d9279b7..8f4be9a 100644
--- a/node_modules/react-native-paper-dates/src/Time/AmPmSwitcher.tsx
+++ b/node_modules/react-native-paper-dates/src/Time/AmPmSwitcher.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { Text, TouchableRipple, useTheme } from 'react-native-paper'
+import { Text, Theme, TouchableRipple, useTheme } from 'react-native-paper'
 import { useMemo } from 'react'
 import Color from 'color'
 import { useSwitchColors } from './timeUtils'
 import { DisplayModeContext } from './TimePicker'
+import type { Fonts, MD3Typescale } from 'react-native-paper/lib/typescript/types'

 export default function AmPmSwitcher({
   onChange,
@@ -19,7 +20,7 @@ export default function AmPmSwitcher({
     if (theme.dark) {
       return Color(theme.colors.surface).lighten(1.2).hex()
     }
-    return Color(theme.colors.surface).darken(0.1).hex()
+    return Color(theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface).darken(0.1).hex()
   }, [theme])

   const isAM = mode === 'AM'
@@ -71,9 +72,15 @@ function SwitchButton({
   selected: boolean
   disabled: boolean
 }) {
-  const theme = useTheme()
+  const theme: Theme = useTheme()
   const { backgroundColor, color } = useSwitchColors(selected)

+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyMedium
+  }
+
   return (
     <TouchableRipple
       onPress={onPress}
@@ -92,7 +99,7 @@ function SwitchButton({
           selectable={false}
           style={[
             {
-              ...theme.fonts.medium,
+              ...textFont,
               color: color,
             },
           ]}
diff --git a/node_modules/react-native-paper-dates/src/Time/AnalogClock.tsx b/node_modules/react-native-paper-dates/src/Time/AnalogClock.tsx
index cf54a48..e33a863 100644
--- a/node_modules/react-native-paper-dates/src/Time/AnalogClock.tsx
+++ b/node_modules/react-native-paper-dates/src/Time/AnalogClock.tsx
@@ -128,8 +128,10 @@ function AnalogClock({
         styles.clock,
         {
           backgroundColor: theme.dark
-            ? Color(theme.colors.surface).lighten(1.2).hex()
-            : Color(theme.colors.surface).darken(0.1).hex(),
+          ? Color(theme.colors.surface).lighten(1.4).hex()
+          : theme.isV3
+          ? Color(theme.colors.outline).lighten(0.9).hex()
+          : Color(theme.colors.surface).darken(0.1).hex(),
         },
       ]}
       // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506
diff --git a/node_modules/react-native-paper-dates/src/Time/TimeInputs.tsx b/node_modules/react-native-paper-dates/src/Time/TimeInputs.tsx
index 0df2b80..1b88b10 100644
--- a/node_modules/react-native-paper-dates/src/Time/TimeInputs.tsx
+++ b/node_modules/react-native-paper-dates/src/Time/TimeInputs.tsx
@@ -20,6 +20,7 @@ import {
 import TimeInput from './TimeInput'
 import AmPmSwitcher from './AmPmSwitcher'
 import { useLatest } from '../utils'
+import Color from 'color'

 function TimeInputs({
   hours,
@@ -85,6 +86,7 @@ function TimeInputs({
         pressed={focused === clockTypes.hours}
         onPress={onFocusInput}
         inputType={inputType}
+        selectionColor={theme.dark ? Color(theme.colors.primary).darken(.2).hex() : theme.colors.primary}
         returnKeyType={'next'}
         onSubmitEditing={onSubmitStartInput}
         blurOnSubmit={false}
@@ -98,7 +100,6 @@ function TimeInputs({
             minutes,
           })
         }}
-        // onChangeText={onChangeStartInput}
       />
       <View style={styles.hoursAndMinutesSeparator}>
         <View style={styles.spaceDot} />
@@ -115,6 +116,7 @@ function TimeInputs({
         pressed={focused === clockTypes.minutes}
         onPress={onFocusInput}
         inputType={inputType}
+        selectionColor={theme.dark ? Color(theme.colors.primary).darken(.2).hex() : theme.colors.primary}
         onSubmitEditing={onSubmitEndInput}
         onChanged={(newMinutesFromInput) => {
           let newMinutes = newMinutesFromInput
diff --git a/node_modules/react-native-paper-dates/src/Time/TimePicker.tsx b/node_modules/react-native-paper-dates/src/Time/TimePicker.tsx
index 434992c..f21ce90 100644
--- a/node_modules/react-native-paper-dates/src/Time/TimePicker.tsx
+++ b/node_modules/react-native-paper-dates/src/Time/TimePicker.tsx
@@ -117,7 +117,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 24 * 3 + 96 * 2 + 52 + circleSize,
   },
-  rootPortrait: {},
+  rootPortrait: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
   clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },
 })

diff --git a/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx b/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx
index 2870eea..25e0ac8 100644
--- a/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx
+++ b/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx
@@ -1,3 +1,4 @@
+import Color from 'color'
 import * as React from 'react'
 import {
   Modal,
@@ -10,6 +11,7 @@ import {
 } from 'react-native'

 import { Button, IconButton, overlay, useTheme } from 'react-native-paper'
+import type { Fonts, MD3Typescale } from 'react-native-paper/lib/typescript/types'
 import TimePicker from './TimePicker'
 import {
   clockTypes,
@@ -59,6 +61,12 @@ export function TimePickerModal({
 }) {
   const theme = useTheme()

+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyMedium
+  }
+  
   const [inputType, setInputType] = React.useState<PossibleInputTypes>(
     inputTypes.picker
   )
@@ -114,7 +122,7 @@ export function TimePickerModal({
             style={[
               StyleSheet.absoluteFill,
               styles.modalBackground,
-              { backgroundColor: theme.colors.backdrop },
+              { backgroundColor: theme.colors?.backdrop },
             ]}
           />
         </TouchableWithoutFeedback>
@@ -132,14 +140,17 @@ export function TimePickerModal({
                 styles.modalContent,
                 {
                   backgroundColor: theme.dark
-                    ? overlay(10, theme.colors.surface)
+                    ? Color(theme.colors.surface)
+                    .mix(Color(theme.colors.primary), 0.08)
+                    .rgb()
+                    .string()
                     : theme.colors.surface,
                   borderRadius: theme.roundness,
                 },
               ]}
             >
               <View style={styles.labelContainer}>
-                <Text style={[styles.label, { color: theme.colors.text }]}>
+                <Text style={[styles.label, { ...textFont, color: theme?.isV3 ? theme.colors.onBackground : theme.colors.text }]}>
                   {uppercase ? label.toUpperCase() : label}
                 </Text>
               </View>
@@ -225,6 +236,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     paddingLeft: 24,
     paddingRight: 24,
+    marginTop: 8,
   },
   label: {
     letterSpacing: 1,
diff --git a/node_modules/react-native-paper-dates/src/Time/timeUtils.ts b/node_modules/react-native-paper-dates/src/Time/timeUtils.ts
index 2c0200e..2d735f2 100644
--- a/node_modules/react-native-paper-dates/src/Time/timeUtils.ts
+++ b/node_modules/react-native-paper-dates/src/Time/timeUtils.ts
@@ -163,10 +163,17 @@ export function useSwitchColors(highlighted: boolean) {
       if (highlighted) {
         return Color(theme.colors.primary).hex()
       }
+      if (theme.isV3) {
+        return Color(theme.colors.surface).lighten(1.4).hex()
+      }
       return theme.colors.backdrop
     }

     if (highlighted) {
+      if (theme.isV3) {
+        return theme.colors.primaryContainer
+      }
+      
       return Color(theme.colors.primary).lighten(1).hex()
     }
     return theme.colors.surface
@@ -176,7 +183,14 @@ export function useSwitchColors(highlighted: boolean) {
     if (highlighted && !theme.dark) {
       return theme.colors.primary
     }
-    return theme.colors.placeholder
+    if (highlighted && theme.dark) {
+      return theme.colors.background
+    }
+    if (theme.isV3) {
+      return theme.colors.onSurfaceVariant
+    } else {
+      return theme.colors.placeholder
+    }
   }, [highlighted, theme])

   return { backgroundColor, color }
@@ -189,12 +203,18 @@ export function useInputColors(highlighted: boolean) {
       if (highlighted) {
         return Color(theme.colors.primary).hex()
       }
-      return Color(theme.colors.surface).lighten(1.2).hex()
+      return Color(theme.colors.surface).lighten(1.4).hex()
     }

     if (highlighted) {
+      if (theme.isV3) {
+        return Color(theme.colors.primaryContainer).hex()
+      }
       return Color(theme.colors.primary).lighten(1).hex()
     }
+    if (theme.isV3) {
+      return Color(theme.colors.outline).lighten(0.9).hex()
+    }
     return Color(theme.colors.surface).darken(0.1).hex()
   }, [highlighted, theme])

@@ -202,7 +222,14 @@ export function useInputColors(highlighted: boolean) {
     if (highlighted && !theme.dark) {
       return theme.colors.primary
     }
-    return theme.colors.text
+    if (theme.isV3) {
+      if (!highlighted) {
+        return theme.colors.onBackground
+      }
+      return theme.colors.background
+    } else {
+      return theme.colors.text
+    }
   }, [highlighted, theme])

   return { backgroundColor, color }
diff --git a/node_modules/react-native-paper-dates/src/utils.ts b/node_modules/react-native-paper-dates/src/utils.ts
index 1706b50..227cbf6 100644
--- a/node_modules/react-native-paper-dates/src/utils.ts
+++ b/node_modules/react-native-paper-dates/src/utils.ts
@@ -11,7 +11,10 @@ export function useLatest<T>(value: T) {
 export function useHeaderBackgroundColor() {
   const theme = useTheme()
   return theme.dark && theme.mode === 'adaptive'
-    ? overlay(4, theme.colors.surface)
+    ? Color(theme.colors.surface)
+    .mix(Color(theme.colors.primary), 0.08)
+    .rgb()
+    .string()
     : theme.colors.primary
 }

[rrufus]

Thanks for the hard work and the initial merge @iM-GeeKy! I really like the look of the this library and would like to use it.

However it seems that when I use react-native-paper v5.0.1 with this library (v0.9.2), the "Save" button in the DatePickerModalHeader becomes the same colour as the background it is presented on in light mode (it is visible in dark mode).

This happens with the default theme provided by react-native-paper, and there isn't a prop on the component to override this as far as I can see, which makes it hard to use the library.

I recreated the bug here: https://github.com/rrufus/rn-paper-dates-bug/commit/fff766b7a671c6bb6544b61acaa4348aac9a62e2 by just doing:

1. npx create-expo-app rn-paper-dates-bug
2. cd rn-paper-dates-bug
3. npx expo install react-native-paper
4. npx expo install react-native-paper-dates
5. Applying the diff to App.js in the linked commit.

Finally you can see a brief video of the behaviour here:

https://user-images.githubusercontent.com/8354732/207121952-643d3e0d-d65b-4dc3-bdd1-b79e9e19508e.mov

[iM-GeeKy]

It appears the PR that I submitted has been merged but has yet to be released. I'll update the patch above with the code I'm using in my project and that should resolve your issue. Unfortunately, I'm not the maintainer, so I don't have the ability to release any paper 5+ changes needed for Material You.

[karan-resynctech]

waiting on this to get merged.

[RichardLindhout]

I'll release this :)

[iM-GeeKy]

Closed by https://github.com/web-ridge/react-native-paper-dates/pull/206