Quick AmPmSwitcher test.

Author: iM-GeeKy

src/Date/AnimatedCrossView.tsx

@@ -3,28 +3,24 @@ 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()
   const calendarOpacity = React.useRef<Animated.Value>(
     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 (

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

src/Time/AmPmSwitcher.tsx

@@ -1,10 +1,14 @@
 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,
@@ -14,7 +18,7 @@ export default function AmPmSwitcher({
   onChange: (newHours: number) => any
 }) {
   const { setMode, mode } = React.useContext(DisplayModeContext)
-  const theme = useTheme()
+  const theme: Theme = useTheme()
   const backgroundColor = useMemo<string>(() => {
     if (theme.dark) {
       return Color(theme.colors.surface).lighten(1.2).hex()
@@ -71,9 +75,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}
@@ -90,9 +100,10 @@ function SwitchButton({
       <View style={[styles.switchButtonInner, { backgroundColor }]}>
         <Text
           selectable={false}
+          variant="bodyMedium"
           style={[
             {
-              ...theme.fonts.medium,
+              ...textFont,
               color: color,
             },
           ]}

src/Time/timeUtils.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Color from 'color'
-import { useTheme } from 'react-native-paper'
+import { Theme, useTheme } from 'react-native-paper'
 
 // 250? when bigger?
 export const circleSize = 215
@@ -157,7 +157,8 @@ export function getAngle(left: number, top: number, size: number) {
 }
 
 export function useSwitchColors(highlighted: boolean) {
-  const theme = useTheme()
+  const theme: Theme = useTheme()
+
   const backgroundColor = React.useMemo<string>(() => {
     if (theme.dark) {
       if (highlighted) {
@@ -176,7 +177,12 @@ export function useSwitchColors(highlighted: boolean) {
     if (highlighted && !theme.dark) {
       return theme.colors.primary
     }
-    return theme.colors.placeholder
+
+    if (theme.isV3) {
+      return theme.colors.primary
+    } else {
+      return theme.colors.placeholder
+    }
   }, [highlighted, theme])
 
   return { backgroundColor, color }