@ledvance/group-ui-biz-bundle 1.0.82 → 1.0.83

package/src/modules/switchGradient/SwitchGradientPage.tsx

@@ -11,11 +11,12 @@ import {View, Text, StyleSheet} from "react-native";
 import Card from "@ledvance/base/src/components/Card";
 import Spacer from "@ledvance/base/src/components/Spacer";
 import Stepper from '@ledvance/base/src/components/Stepper'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const {convertX: cx} = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
-const SwitchGradientPage = (props: { theme?: any }) => {
+const SwitchGradientPage = (props: { theme?: ThemeType }) => {
   const devInfo = useDeviceInfo()
   const navigation = useNavigation()
   const [
@@ -42,7 +43,7 @@ const SwitchGradientPage = (props: { theme?: any }) => {
       paddingHorizontal: cx(16),
     },
     stepTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
     },
     stepGroup: {
@@ -51,7 +52,7 @@ const SwitchGradientPage = (props: { theme?: any }) => {
     },
     stepText: {
       flex: 1,
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
     },
   })

package/src/modules/swithInching/SwithInching.tsx

@@ -8,6 +8,7 @@ import LdvPickerView from "@ledvance/base/src/components/ldvPickerView";
 import I18n from '@ledvance/base/src/i18n'
 import {useReactive, useUpdateEffect} from "ahooks";
 import {useSwitchInching} from "./SwithInchingAction";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const {convertX: cx} = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -19,7 +20,7 @@ interface SwitchInchingState {
   flag: Symbol | number
 }
 
-const SwitchInching = (props: { theme?: any }) => {
+const SwitchInching = (props: { theme?: ThemeType }) => {
   const deviceInfo = useDeviceInfo()
   const navigation = useNavigation()
   const [switchInching, setSwitchInching] = useSwitchInching()
@@ -71,7 +72,7 @@ const SwitchInching = (props: { theme?: any }) => {
 
   const styles = StyleSheet.create({
     switchContainer: {
-      backgroundColor: props.theme.container.background,
+      backgroundColor: props.theme?.container.background,
       marginHorizontal: cx(24),
       padding: cx(10),
       borderRadius: cx(6),
@@ -80,26 +81,26 @@ const SwitchInching = (props: { theme?: any }) => {
     switchCardContainer: {
       paddingVertical: cx(4),
       paddingHorizontal: cx(10),
-      backgroundColor: props.theme.global.background,
+      backgroundColor: props.theme?.global.background,
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
       borderRadius: cx(6),
     },
     switchCardTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       flex: 1,
       fontWeight: '400',
     },
     switchDescription: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       flexWrap: 'wrap',
       fontSize: cx(12),
       marginTop: cx(4),
     },
     secondTopic: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       flexWrap: 'wrap',
       fontSize: cx(14),
       marginTop: cx(30),

package/src/modules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -43,6 +43,7 @@ import Summary from './components/Summary'
 import { getRemoteMoodList } from '../mood_new/MoodActions'
 import { MoodUIInfo } from '../mood_new/Interface';
 import InfoText from '@ledvance/base/src/components/InfoText';
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
@@ -54,7 +55,7 @@ interface TimeScheduleDetailPageParams extends TimeSchedulePageParams {
   refreshFn: () => void;
 }
 
-const TimeScheduleDetailPage = (props: { theme?: any }) => {
+const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
   const params = useParams<TimeScheduleDetailPageParams>();
   const navigation = useNavigation();
   const uaGroupInfo = useUAGroupInfo()
@@ -218,13 +219,13 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
       marginHorizontal: cx(24),
     },
     itemTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     applyContent: {
-      backgroundColor: props.theme.container.background,
+      backgroundColor: props.theme?.container.background,
       borderRadius: 4,
       minHeight: cx(55),
       flex: 1,
@@ -236,7 +237,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      backgroundColor: props.theme.global.background,
+      backgroundColor: props.theme?.global.background,
       height: cx(35),
     },
     moodScrollView: {
@@ -244,13 +245,13 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
     },
     summaryRight: {
       flexDirection: 'column',
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
       borderRadius: cx(16),
       alignItems: 'center'
     },
     rightItem: {
       paddingHorizontal: cx(12),
-      color: props.theme.tag.fontColor,
+      color: props.theme?.tag.fontColor,
       fontSize: cx(14)
     },
     switchButton: {
@@ -260,7 +261,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
       marginBottom: cx(10),
     },
     text: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14)
     },
   })
@@ -316,8 +317,8 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
         {/* pick */}
         <TimerPicker
           itemTextColor="#aeadb5"
-          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme.global.background }}
-          pickerFontColor={props.theme.global.fontColor}
+          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme?.global.background }}
+          pickerFontColor={props.theme?.global.fontColor}
           is12Hours={!is24HourClock}
           singlePicker={true}
           amText={I18n.getLang('manage_user_calendar_label_am')}
@@ -340,7 +341,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
           }}
         />
         <Spacer />
-        <Text style={{ ...styles.cardContainer, color: props.theme.global.fontColor, fontSize: cx(14) }}>
+        <Text style={{ ...styles.cardContainer, color: props.theme?.global.fontColor, fontSize: cx(14) }}>
           {loopText(state.timeSchedule.loops.split(''))}
         </Text>
         <Spacer height={cx(30)} />
@@ -353,7 +354,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
           <Spacer height={cx(10)} />
           <View style={[styles.applyContent, {paddingTop: state.selectedSkill.length ? cx(10) : 0}]}>
             {state.selectedSkill.length === 0 ? (
-              <Text style={{color: props.theme.global.fontColor}}>
+              <Text style={{color: props.theme?.global.fontColor}}>
                 {I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}
               </Text>
             ) : (
@@ -362,7 +363,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
                   style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}
                   key={skill.dp}
                 >
-                  <Text style={{ color: props.theme.global.fontColor }}>{skill.key}</Text>
+                  <Text style={{ color: props.theme?.global.fontColor }}>{skill.key}</Text>
                   {showSelectedIcon && (
                     <TouchableOpacity
                       onPress={() => {
@@ -372,7 +373,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
                       style={{ paddingHorizontal: cx(5) }}
                     >
                       <Image
-                        style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }}
+                        style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor }}
                         source={res.ic_arrows_nav_clear}
                       />
                     </TouchableOpacity>
@@ -391,9 +392,9 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
                   state.unSelectedSkill = state.unSelectedSkill.filter(s => item.dp !== s.dp);
                 }}
               >
-                <Text style={{ color: props.theme.global.fontColor }}>{item.key}</Text>
+                <Text style={{ color: props.theme?.global.fontColor }}>{item.key}</Text>
                 <Image
-                  style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }}
+                  style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor }}
                   source={res.device_panel_timer_add}
                 />
               </TouchableOpacity>
@@ -422,13 +423,13 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
         {(!state.selectedSkill.length && !showMoodFanSelectText) && <InfoText
             style={{marginHorizontal: cx(24)}}
             icon={res.ic_warning_amber}
-            contentColor={props.theme.global.warning}
+            contentColor={props.theme?.global.warning}
             text={I18n.getLang('timeschedule_add_schedule_no_device_warning_text')}
         />}
         {showMoodFanSelectText && <InfoText
             style={{marginHorizontal: cx(24)}}
             icon={res.ic_warning_amber}
-            contentColor={props.theme.global.warnging}
+            contentColor={props.theme?.global.warnging}
             text={I18n.getLang('timeschedule_add_schedule_devicestate_sec_warning_text')}
         />}
         {state.isManual ? (
@@ -502,7 +503,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
               <>
                 {!!state.selectedSkill.filter(skill => skill.enable).length && (
                   <>
-                    <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>
+                    <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor }}>
                       {I18n.getLang('feature_summary_action_txt_1')}
                     </Text>
                     <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
@@ -525,7 +526,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
 
                 {!!state.selectedSkill.filter(skill => !skill.enable).length && (
                   <>
-                    <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>
+                    <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor }}>
                       {I18n.getLang('feature_summary_action_txt_2')}
                     </Text>
                     <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>

package/src/modules/timeSchedule/TimeSchedulePage.tsx

@@ -20,6 +20,7 @@ import { useParams } from '@ledvance/base/src/hooks/Hooks';
 import ScheduleCard from './components/ScheduleCard';
 import { ui_biz_routerKey } from "../../navigation/Routers";
 import { ApplyForItem } from '@ledvance/base/src/utils/interface';
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
@@ -43,7 +44,7 @@ export interface TimeSchedulePageParams {
   manualDataObj2Dp: (deviceState: DeviceStateType, applyForList: ApplyForItem[]) => Record<string, any>;
 }
 
-const TimeSchedulePage = (props: { theme?: any }) => {
+const TimeSchedulePage = (props: { theme?: ThemeType }) => {
   const deviceInfo = useDeviceInfo();
   const navigation = useNavigation();
   const uaGroupInfo = useUAGroupInfo()
@@ -120,7 +121,7 @@ const TimeSchedulePage = (props: { theme?: any }) => {
 
   const styles = StyleSheet.create({
     overviewDescription: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       marginHorizontal: cx(24),
       fontSize: cx(12)
     },
@@ -137,7 +138,7 @@ const TimeSchedulePage = (props: { theme?: any }) => {
       width: 'auto',
       minWidth: cx(150),
       paddingHorizontal: cx(16),
-      backgroundColor: props.theme.button.primary,
+      backgroundColor: props.theme?.button.primary,
     },
   })
 
@@ -162,8 +163,8 @@ const TimeSchedulePage = (props: { theme?: any }) => {
             text={I18n.getLang('motion_detection_time_schedule_notifications_warning_text')}
             icon={res.ic_warning_amber}
             style={{ marginHorizontal: cx(24) }}
-            textStyle={{ color: props.theme.global.secondFontColor, fontSize: cx(12) }}
-            iconStyle={{ tintColor: props.theme.global.warning }}
+            textStyle={{ color: props.theme?.global.secondFontColor, fontSize: cx(12) }}
+            iconStyle={{ tintColor: props.theme?.global.warning }}
           />
         )}
         { state.timeScheduleList.length > 0 ?
@@ -203,8 +204,8 @@ const TimeSchedulePage = (props: { theme?: any }) => {
               icon={res.device_panel_schedule_alert}
               text={I18n.getLang('timeschedule_overview_empty_information_text')}
               style={{width: 'auto', alignItems: 'center'}}
-              textStyle={{color: props.theme.global.secondFontColor, fontSize: cx(12), flex: undefined}}
-              iconStyle={{tintColor: props.theme.global.secondFontColor}}
+              textStyle={{color: props.theme?.global.secondFontColor, fontSize: cx(12), flex: undefined}}
+              iconStyle={{tintColor: props.theme?.global.secondFontColor}}
             />
             <Spacer height={cx(16)}/>
             <DeleteButton

package/src/modules/timeSchedule/components/ManuaSettings.tsx

@@ -73,7 +73,7 @@ function ManualSettings(props: ManualSettingProps) {
             <Card style={{ marginHorizontal: cx(24) }}>
               <LdvSwitch
                 title={item.name || item.key}
-                color={props.theme.card.background}
+                color={props.theme?.card.background}
                 colorAlpha={1}
                 enable={item.enable}
                 setEnable={(enable: boolean) => {
@@ -192,7 +192,7 @@ function ManualSettings(props: ManualSettingProps) {
         ))}
       </View>
     );
-  }, [state.deviceData, state.applyForList, props.theme.card.background]);
+  }, [state.deviceData, state.applyForList, props.theme?.card.background]);
 
   const mixLightCard = useMemo(() => {
     return (
@@ -202,7 +202,7 @@ function ManualSettings(props: ManualSettingProps) {
             <Card style={{ marginHorizontal: cx(24) }}>
               <LdvSwitch
                 title={item.key}
-                color={props.theme.card.background}
+                color={props.theme?.card.background}
                 colorAlpha={1}
                 enable={item.enable}
                 setEnable={(enable: boolean) => {
@@ -257,7 +257,7 @@ function ManualSettings(props: ManualSettingProps) {
         ))}
       </View>
     );
-  }, [state.deviceData, state.applyForList, props.theme.card.background]);
+  }, [state.deviceData, state.applyForList, props.theme?.card.background]);
 
   const stripLightCard = useMemo(() => {
     const deviceData = state.deviceData as StripLightData
@@ -266,7 +266,7 @@ function ManualSettings(props: ManualSettingProps) {
         <Card style={{ marginHorizontal: cx(24) }}>
           <LdvSwitch
             title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-            color={props.theme.card.background}
+            color={props.theme?.card.background}
             colorAlpha={1}
             enable={state.applyForList[0]?.enable}
             setEnable={(enable: boolean) => {
@@ -327,7 +327,7 @@ function ManualSettings(props: ManualSettingProps) {
         <Spacer />
       </View>
     );
-  }, [state.deviceData, state.applyForList, props.theme.card.background]);
+  }, [state.deviceData, state.applyForList, props.theme?.card.background]);
 
   const ceilingLightCard = useMemo(() => {
     const deviceData = state.deviceData as CeilingLightData
@@ -338,7 +338,7 @@ function ManualSettings(props: ManualSettingProps) {
             <Card style={{ marginHorizontal: cx(24) }}>
               <LdvSwitch
                 title={item.key}
-                color={props.theme.card.background}
+                color={props.theme?.card.background}
                 colorAlpha={1}
                 enable={item.enable}
                 setEnable={(enable: boolean) => {
@@ -422,7 +422,7 @@ function ManualSettings(props: ManualSettingProps) {
         ))}
       </View>
     )
-  }, [state.deviceData, state.applyForList, props.theme.card.background])
+  }, [state.deviceData, state.applyForList, props.theme?.card.background])
 
   const componentRender = useMemo(() => {
     const component =
@@ -434,7 +434,7 @@ function ManualSettings(props: ManualSettingProps) {
             ? ceilingLightCard
             : lightSourceCard;
     return component;
-  }, [props.manualData.type, state.applyForList, state.deviceData, props.theme.card.background]);
+  }, [props.manualData.type, state.applyForList, state.deviceData, props.theme?.card.background]);
 
 
   return <View>{componentRender}</View>;

package/src/modules/timeSchedule/components/ScheduleCard.tsx

@@ -5,11 +5,13 @@ import { SwitchButton, Utils } from 'tuya-panel-kit';
 import { convertTo12HourFormat, loopText } from '@ledvance/base/src/utils/common';
 import { Timer } from "../Interface";
 import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import ThemeType from '@ledvance/base/src/config/themeType'
+
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
 
 interface ScheduleCardProps {
-  theme?: any
+  theme?: ThemeType
   item: Timer
   style?: ViewStyle
   onEnableChange: (enable: boolean) => void
@@ -37,20 +39,20 @@ const ScheduleCard = (props: ScheduleCardProps) => {
       marginLeft: cx(16),
     },
     time: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       marginBottom: cx(5),
       fontSize: 16,
       fontFamily: 'helvetica_neue_lt_std_bd',
       fontWeight: 'bold',
     },
     loop: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       fontFamily: 'helvetica_neue_lt_std_bd',
       marginTop: cx(8),
     },
     name: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       fontFamily: 'helvetica_neue_lt_std_bd',
       marginTop: cx(8),

package/src/modules/timeSchedule/components/Summary.tsx

@@ -4,12 +4,13 @@ import res from "@ledvance/base/src/res"
 import I18n from "@ledvance/base/src/i18n";
 import { Utils } from "tuya-panel-kit";
 import Spacer from "@ledvance/base/src/components/Spacer";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
 
 interface SummaryProps {
-  theme?: any
+  theme?: ThemeType
   style?: ViewStyle
   frequency?: string | ReactElement
   time?: string | ReactElement
@@ -24,7 +25,7 @@ const Summary = (props: SummaryProps) => {
       marginHorizontal: cx(24),
     },
     itemTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
@@ -40,14 +41,14 @@ const Summary = (props: SummaryProps) => {
       minWidth: cx(100)
     },
     summaryImg: {
-      tintColor: props.theme.global.fontColor,
+      tintColor: props.theme?.global.fontColor,
       width: cx(12),
       height: cx(12),
       marginRight: cx(6)
     },
     leftTitle: {
       fontSize: cx(14),
-      color: props.theme.global.fontColor
+      color: props.theme?.global.fontColor
     },
     summaryRight: {
       flex: 1,
@@ -58,10 +59,10 @@ const Summary = (props: SummaryProps) => {
       borderRadius: cx(16),
       paddingHorizontal: cx(12),
       alignSelf: 'flex-start',
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
     },
     rightItem: {
-      color: props.theme.tag.fontColor,
+      color: props.theme?.tag.fontColor,
       fontSize: cx(14)
     },
   })

package/src/modules/timer/TimerPage.tsx

@@ -16,11 +16,12 @@ import dayjs from 'dayjs'
 import Card from '@ledvance/base/src/components/Card'
 import TextButton from '@ledvance/base/src/components/TextButton'
 import { CircularProgress } from '@ledvance/base/src/components/CircularProgress'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
-const TimerPage = (props: { theme?: any }) => {
+const TimerPage = (props: { theme?: ThemeType }) => {
   const devInfo = useDeviceInfo()
   const params = useParams<TimerPageParams>()
   const [timerTasks, setTimerTasks, changeTimerTasks] = useTimerTasks(params.timerSettableDps, params.devIdGroup)
@@ -57,13 +58,13 @@ const TimerPage = (props: { theme?: any }) => {
       marginHorizontal: cx(24),
     },
     applyFor: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     taskList: {
-      backgroundColor: props.theme.container.background,
+      backgroundColor: props.theme?.container.background,
       paddingTop: cx(8),
       borderRadius: cx(4),
     },
@@ -73,16 +74,16 @@ const TimerPage = (props: { theme?: any }) => {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      backgroundColor: props.theme.global.background,
+      backgroundColor: props.theme?.global.background,
     },
     taskItemText: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: 14,
       marginHorizontal: cx(8),
       marginVertical: cx(9),
     },
     taskItemIcon: {
-      tintColor: props.theme.global.fontColor,
+      tintColor: props.theme?.global.fontColor,
       width: cx(16),
       height: cx(16),
       marginRight: cx(8),
@@ -93,7 +94,7 @@ const TimerPage = (props: { theme?: any }) => {
       marginBottom: cx(14),
     },
     listEmptyText: {
-      color: props.theme.global.secondFontColor,
+      color: props.theme?.global.secondFontColor,
       fontSize: cx(14),
     },
     noSelectTaskList: {},
@@ -104,7 +105,7 @@ const TimerPage = (props: { theme?: any }) => {
     },
     noSelectTaskText: {
       flex: 1,
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
     },
     activeTaskHeadLine: {
@@ -113,47 +114,47 @@ const TimerPage = (props: { theme?: any }) => {
     },
     activeTaskHeadLineText: {
       flex: 1,
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
     },
     activeTaskHeadLineBtn: {
       minWidth: cx(50),
       height: cx(24),
       padding: 0,
-      backgroundColor: props.theme.button.cancel,
+      backgroundColor: props.theme?.button.cancel,
       borderRadius: cx(4),
     },
     activeTaskHeadLineBtnText: {
-      color: props.theme.button.fontColor,
+      color: props.theme?.button.fontColor,
       fontSize: cx(8.2),
     },
     activeTaskTimeText: {
       flex: 1,
-      color: props.theme.global.secondFontColor,
+      color: props.theme?.global.secondFontColor,
       fontSize: cx(24),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     activeTaskDesc: {
       flex: 1,
-      color: props.theme.global.secondFontColor,
+      color: props.theme?.global.secondFontColor,
       fontSize: cx(14),
     },
     activeTasBtn: {
       width: 'auto',
       height: cx(36),
       padding: 0,
-      backgroundColor: props.theme.button.cancel,
+      backgroundColor: props.theme?.button.cancel,
       borderRadius: cx(4),
     },
     activeTaskBtnText: {
-      color: props.theme.button.fontColor,
+      color: props.theme?.button.fontColor,
       fontSize: cx(12.2),
     },
     activeTaskTimeText2: {
       flex: 1,
       marginHorizontal: cx(20),
-      color: props.theme.global.secondFontColor,
+      color: props.theme?.global.secondFontColor,
       fontSize: cx(22),
       textAlign: 'center',
       fontWeight: 'bold',
@@ -249,7 +250,7 @@ const TimerPage = (props: { theme?: any }) => {
                         state.loading = false
                       }}
                       textStyle={{ fontSize: cx(14) }}
-                      style={{ backgroundColor: !startEnable ? props.theme.button.disabled : props.theme.button.primary }}/>
+                      style={{ backgroundColor: !startEnable ? props.theme?.button.disabled : props.theme?.button.primary }}/>
               </View>
           }
           {startedTasks.length > 0 && params.timerSettableDps.length > 1 &&