@ledvance/base 1.3.8 → 1.3.10

package/src/components/Segmented.tsx

@@ -1,6 +1,7 @@
 import React, {ReactNode} from 'react'
 import {StyleSheet, Text, TouchableOpacity, View, ViewStyle} from 'react-native'
 import {Utils} from 'tuya-panel-kit'
+import ThemeType from '../config/themeType'
 
 const {convertX: cx} = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -11,7 +12,7 @@ interface SegmentedItem {
 }
 
 interface SegmentedProps {
-  theme?: any
+  theme?: ThemeType
   value?: string | number
   options?: SegmentedItem[]
   onChange?: (v: string | number) => void
@@ -23,7 +24,7 @@ const Segmented = (props: SegmentedProps) => {
     wrap_container: {
       flexDirection: 'row',
       height: cx(42),
-      backgroundColor: props.theme.segment.background,
+      backgroundColor: props.theme?.segment.background,
       padding: cx(2),
       borderRadius: cx(8),
     },
@@ -31,7 +32,7 @@ const Segmented = (props: SegmentedProps) => {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: props.theme.container.background,
+      backgroundColor: props.theme?.container.background,
     },
     segmented_item_first: {
       borderBottomLeftRadius: cx(8),
@@ -42,14 +43,14 @@ const Segmented = (props: SegmentedProps) => {
       borderTopRightRadius: cx(8),
     },
     segmented_item_check: {
-      backgroundColor: props.theme.button.primary,
+      backgroundColor: props.theme?.button.primary,
     },
     segmented_text: {
       fontSize: cx(16),
-      color: props.theme.global.secondFontColor,
+      color: props.theme?.global.secondFontColor,
     },
     segmented_text_check: {
-      color: props.theme.button.fontColor,
+      color: props.theme?.button.fontColor,
     },
   })
   return (

package/src/components/SocketItem.tsx

@@ -4,12 +4,13 @@ import Card from "components/Card";
 import Spacer from "components/Spacer";
 import { Dialog, SwitchButton, Utils } from "tuya-panel-kit";
 import I18n from "../i18n";
+import ThemeType from '../config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
 
 interface SocketItemProps extends PropsWithChildren<ViewProps>{
-  theme?: any
+  theme?: ThemeType
   title: string
   name: string
   icon: any
@@ -29,7 +30,7 @@ function SocketItem(props: SocketItemProps) {
     },
     title: {
       fontSize: cx(16),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontFamily: 'helvetica_neue_lt_std_bd',
       fontWeight: 'bold',
     },
@@ -43,7 +44,7 @@ function SocketItem(props: SocketItemProps) {
     },
     name: {
       fontSize: cx(14),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
   })

package/src/components/Stepper.tsx

@@ -1,9 +1,10 @@
-import { exchangeNumber, localeNumber } from "@ledvance/base/src/utils/common";
+import { exchangeNumber, localeNumber } from "../utils/common";
 import res from "@res";
 import { useReactive } from "ahooks";
 import React, { memo, useCallback } from "react";
 import { TouchableOpacity, View, Image, TextInput, StyleSheet, StyleProp, ViewStyle } from "react-native";
 import { Utils } from "tuya-panel-kit";
+import ThemeType from '../config/themeType'
 
 const { add, subtract, inMaxMin } = Utils.NumberUtils
 
@@ -11,7 +12,7 @@ const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
 export interface StepperProps {
-  theme?: any
+  theme?: ThemeType
   value: number | string
   stepValue?: number  // 1
   min?: number  // 0
@@ -77,7 +78,7 @@ const Stepper = (props: StepperProps) => {
     stepperContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: props.theme.container.background,
+      backgroundColor: props.theme?.container.background,
       padding: cx(2),
       borderRadius: cx(12),
       width: cx(150),
@@ -85,7 +86,7 @@ const Stepper = (props: StepperProps) => {
     stepperButton: {
       width: cx(52),
       height: cx(28),
-      backgroundColor: props.theme.global.background,
+      backgroundColor: props.theme?.global.background,
       borderRadius: cx(10),
       alignItems: 'center',
       justifyContent: 'center',
@@ -93,12 +94,12 @@ const Stepper = (props: StepperProps) => {
     stepperIcon: {
       width: cx(20),
       height: cx(20),
-      tintColor: props.theme.global.fontColor
+      tintColor: props.theme?.global.fontColor
     },
     stepperInput: {
       width: cx(42),
       height: cx(22),
-      color: props.theme.global.secondFontColor,
+      color: props.theme?.global.secondFontColor,
       fontSize: cx(16),
       padding: 0,
       alignItems: 'center',

package/src/components/StripAdjustView.tsx

@@ -27,10 +27,10 @@ const StripAdjustView = (props: StripAdjustViewProps) => {
       <TabBar
         type='radio'
         tabs={props.lampTabs}
-        style={{ borderRadius: cx(8), backgroundColor: props.theme.segment.background, height: cx(40), marginHorizontal: cx(16) }}
-        tabTextStyle={{ color: props.theme.segment.fontColor }}
-        tabActiveTextStyle={{ color: props.theme.segment.fontColor, fontWeight: 'bold' }}
-        activeColor={props.theme.segment.active}
+        style={{ borderRadius: cx(8), backgroundColor: props.theme?.segment.background, height: cx(40), marginHorizontal: cx(16) }}
+        tabTextStyle={{ color: props.theme?.segment.fontColor }}
+        tabActiveTextStyle={{ color: props.theme?.segment.fontColor, fontWeight: 'bold' }}
+        activeColor={props.theme?.segment.active}
         activeKey={props.activeKey}
         onChange={props.onActiveKeyChange}
       />
@@ -88,8 +88,8 @@ const StripAdjustView = (props: StripAdjustViewProps) => {
                       radius={cx(20)}
                       colors={item}
                     />
-                    {props.colorDiskActiveKey === index && <View style={{ width: cx(44), height: cx(44), borderRadius: cx(44), borderColor: props.theme.button.primary, borderWidth: cx(2), alignItems: 'center', justifyContent: 'center', position: 'absolute' }}>
-                        <Image source={{ uri: res.ic_check }} style={{ width: cx(40), height: cx(40), tintColor: props.theme.button.fontColor }} />
+                    {props.colorDiskActiveKey === index && <View style={{ width: cx(44), height: cx(44), borderRadius: cx(44), borderColor: props.theme?.button.primary, borderWidth: cx(2), alignItems: 'center', justifyContent: 'center', position: 'absolute' }}>
+                        <Image source={{ uri: res.ic_check }} style={{ width: cx(40), height: cx(40), tintColor: props.theme?.button.fontColor }} />
                     </View>}
                   </TouchableOpacity>
                 )

package/src/components/StripLightView.tsx

@@ -1,6 +1,7 @@
 import { requireNativeComponent, ViewProps } from 'react-native'
 import React from 'react'
 import { Utils } from 'tuya-panel-kit'
+import ThemeType from '../config/themeType'
 
 const { withTheme } = Utils.ThemeUtils
 const NativeStripLightView = requireNativeComponent('StripLightView')
@@ -11,7 +12,7 @@ export interface LightNode {
 }
 
 export interface StripLightViewProps extends ViewProps {
-  theme?: any
+  theme?: ThemeType
   nodes: LightNode[]
   fixCount: number
   stripStyle: 'ONLY_LINE' | 'WITH_BEAD'
@@ -20,7 +21,7 @@ export interface StripLightViewProps extends ViewProps {
 }
 
 const StripLightView = (props: StripLightViewProps) => {
-  const newNodes = props.nodes.map(node => ({...node, backgroundColor: props.theme.card.background}))
+  const newNodes = props.nodes.map(node => ({...node, backgroundColor: props.theme?.card.background}))
   return (
     <NativeStripLightView {...props} nodes={JSON.stringify(newNodes)}/>
   )

package/src/components/Summary.tsx

@@ -5,12 +5,13 @@ import I18n from "../i18n";
 import { Utils } from "tuya-panel-kit";
 import Spacer from "../components/Spacer";
 import InfoText from "../components/InfoText";
+import ThemeType from '../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
@@ -25,7 +26,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',
@@ -41,14 +42,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,
@@ -60,10 +61,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,
     },
   })
   return (

package/src/components/Tag.tsx

@@ -2,12 +2,13 @@ import {Image, StyleSheet, Text, TouchableOpacity, View, ViewProps} from 'react-
 import React from 'react'
 import {Utils} from 'tuya-panel-kit'
 import res from '../res'
+import ThemeType from '../config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
 
 interface TagProps extends ViewProps {
-  theme?: any
+  theme?: ThemeType
   checked: boolean
   text: string
   onCheckedChange: (boolean) => void
@@ -22,12 +23,12 @@ const Tag = (props: TagProps) => {
       justifyContent: 'center',
       alignItems: 'center',
       borderWidth: cx(1),
-      borderColor: props.theme.global.brand,
+      borderColor: props.theme?.global.brand,
       borderRadius: cx(12),
     },
     text: {
       marginStart: cx(12),
-      color: props.theme.global.brand,
+      color: props.theme?.global.brand,
       fontSize: cx(14),
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
@@ -35,7 +36,7 @@ const Tag = (props: TagProps) => {
       width: cx(12),
       height: cx(12),
       marginEnd: cx(6),
-      tintColor: props.theme.global.brand,
+      tintColor: props.theme?.global.brand,
     },
   })
 
@@ -44,7 +45,7 @@ const Tag = (props: TagProps) => {
       onPress={() => {
         props.onCheckedChange(!props.checked)
       }}>
-      <View style={[styles.root, props.checked ? {backgroundColor: props.theme.global.thirdBrand} : {}, props.style]}>
+      <View style={[styles.root, props.checked ? {backgroundColor: props.theme?.global.thirdBrand} : {}, props.style]}>
         <Text style={[styles.text, {marginEnd: cx(props.checked ? 4 : 12)}]}>{props.text}</Text>
         {
           props.checked &&

package/src/components/TextField.tsx

@@ -2,12 +2,13 @@ import {Image, StyleSheet, Text, TextInput, TextInputProps, ImageSourcePropType,
 import React from 'react'
 import {Utils} from 'tuya-panel-kit'
 import res from '../res'
+import ThemeType from '../config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
 
 interface TextFieldProps extends TextInputProps {
-  theme?: any
+  theme?: ThemeType
   showError?: boolean
   errorText?: string
   tipIcon?: ImageSourcePropType
@@ -16,20 +17,20 @@ interface TextFieldProps extends TextInputProps {
 
 const TextField = (props: TextFieldProps) => {
   const icon = props.tipIcon || res.ic_warning_amber
-  const color = props.tipColor || props.theme.global.warning
+  const color = props.tipColor || props.theme?.global.warning
 
   const styles = StyleSheet.create({
     topTip: {
       marginTop: cx(5),
       fontSize: cx(12),
       marginStart: cx(13),
-      color: props.theme.global.secondFontColor,
+      color: props.theme?.global.secondFontColor,
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     textInputGroup: {
       flexDirection: 'row',
       borderRadius: cx(4),
-      backgroundColor: props.theme.textInput.background,
+      backgroundColor: props.theme?.textInput.background,
       alignItems: 'center',
     },
     textInput: {
@@ -38,7 +39,7 @@ const TextField = (props: TextFieldProps) => {
       marginStart: cx(16),
       marginEnd: cx(6),
       fontSize: cx(16),
-      color: props.theme.textInput.fontColor,
+      color: props.theme?.textInput.fontColor,
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
     iconTouchable: {
@@ -55,7 +56,7 @@ const TextField = (props: TextFieldProps) => {
       start: cx(4),
       end: cx(4),
       bottom: 0,
-      backgroundColor: props.theme.textInput.line,
+      backgroundColor: props.theme?.textInput.line,
     },
     errorContainer: {
       flexDirection: 'row',

package/src/components/TextFieldStyleButton.tsx

@@ -2,12 +2,13 @@ import {StyleSheet, Text, TouchableOpacity, View, ViewProps, Image} from 'react-
 import {Utils} from 'tuya-panel-kit'
 import React from 'react'
 import res from "../res/index";
+import ThemeType from '../config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
 
 interface TextFieldStyleButtonProps extends ViewProps {
-    theme?: any
+    theme?: ThemeType
     placeholder: string
     text: string
     onPress: () => void,
@@ -21,13 +22,13 @@ const TextFieldStyleButton = (props: TextFieldStyleButtonProps) => {
             marginTop: cx(5),
             fontSize: cx(12),
             marginStart: cx(13),
-            color: props.theme.global.secondFontColor,
+            color: props.theme?.global.secondFontColor,
             fontFamily: 'helvetica_neue_lt_std_bd',
         },
         textGroup: {
             flexDirection: 'row',
             borderRadius: cx(4),
-            backgroundColor: props.theme.textInput.background,
+            backgroundColor: props.theme?.textInput.background,
             alignItems: 'center',
         },
         textParent: {
@@ -39,7 +40,7 @@ const TextFieldStyleButton = (props: TextFieldStyleButtonProps) => {
             marginStart: cx(16),
             marginEnd: cx(6),
             fontSize: cx(16),
-            color: props.theme.textInput.fontColor,
+            color: props.theme?.textInput.fontColor,
             fontFamily: 'helvetica_neue_lt_std_roman',
         },
         line: {
@@ -48,7 +49,7 @@ const TextFieldStyleButton = (props: TextFieldStyleButtonProps) => {
             start: cx(4),
             end: cx(4),
             bottom: 0,
-            backgroundColor: props.theme.textInput.line,
+            backgroundColor: props.theme?.textInput.line,
         },
         tipParent: {
             flexDirection: 'row',
@@ -58,7 +59,7 @@ const TextFieldStyleButton = (props: TextFieldStyleButtonProps) => {
             width: cx(16),
             height: cx(16),
             marginStart: cx(4),
-            tintColor: props.theme.icon.primary
+            tintColor: props.theme?.icon.primary
         }
     })
 

package/src/components/UATabTitle.tsx

@@ -3,12 +3,13 @@ import Spacer from './Spacer'
 import React from 'react'
 import { Utils } from 'tuya-panel-kit'
 import res from '../res/index'
+import ThemeType from '../config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
 
 export interface UATabTitleProps extends ViewProps {
-  theme?: any
+  theme?: ThemeType
   text: string
   onIconClick: () => void
 }
@@ -16,7 +17,7 @@ export interface UATabTitleProps extends ViewProps {
 const UATabTitle = (props: UATabTitleProps) => {
   const styles = StyleSheet.create({
     tabsTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
@@ -27,7 +28,7 @@ const UATabTitle = (props: UATabTitleProps) => {
       <Text style={styles.tabsTitle}>{props.text}</Text>
       <Spacer height={cx(0)} width={cx(4)}/>
       <TouchableOpacity onPress={props.onIconClick}>
-        <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.icon.primary }} source={res.ic_info}/>
+        <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.icon.primary }} source={res.ic_info}/>
       </TouchableOpacity>
     </View>
   )

package/src/components/UATabs.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { StyleSheet, Text, TouchableOpacity, View, ViewProps } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
+import ThemeType from '../config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
 
 export interface UATabsProps extends ViewProps {
-  theme?: any
+  theme?: ThemeType
   active: any
   data: UATabData[]
   onSelectChange: (value: UATabData, index: number) => void
@@ -25,7 +26,7 @@ const UATabs = (props: UATabsProps) => {
       height: cx(32),
       paddingVertical: cx(2),
       paddingHorizontal: cx(3),
-      backgroundColor: props.theme.segment.background,
+      backgroundColor: props.theme?.segment.background,
       borderRadius: cx(9),
     },
     tabs: {
@@ -61,13 +62,13 @@ const UATabs = (props: UATabsProps) => {
             <View style={[
               styles.tab,
               {
-                backgroundColor: active ? props.theme.button.primary : props.theme.container.background,
+                backgroundColor: active ? props.theme?.button.primary : props.theme?.container.background,
               },
             ]}>
               <Text style={[
                 styles.tabText,
                 {
-                  color: active ? props.theme.button.fontColor : props.theme.global.secondFontColor,
+                  color: active ? props.theme?.button.fontColor : props.theme?.global.secondFontColor,
                 },
               ]}>{item.title}</Text>
             </View>

package/src/components/ldvColorSlider.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
 import {LinearGradient, Slider, Utils} from 'tuya-panel-kit'
 import {Rect} from 'react-native-svg'
+import ThemeType from '../config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
@@ -28,7 +29,7 @@ const colors = {
 export const TEMP_KEY = 'temperature'
 
 interface LdvColorSliderProps {
-  theme?: any
+  theme?: ThemeType
   title: string,
   type: string,
   onValueChange?: (number) => void | undefined,
@@ -55,7 +56,7 @@ const LdvColorSlider = (props: LdvColorSliderProps) => {
     title: {
       marginTop: cx(4),
       fontSize: cx(14),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
     shadeSlider: {

package/src/components/ldvPickerView.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react'
 import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
 import {Picker, Utils} from 'tuya-panel-kit'
 import _ from 'lodash'
+import ThemeType from '../config/themeType'
 
 const {convertX} = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -11,7 +12,7 @@ const pickerTheme = {
 }
 
 interface LdvPickerViewProps {
-  theme?: any
+  theme?: ThemeType
   hour: string,
   minute: string,
   setHour: (string) => void,
@@ -35,7 +36,7 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
     },
     picker: {
       flex: 1,
-      backgroundColor: props.theme.card.background,
+      backgroundColor: props.theme?.card.background,
     },
     pickerLeft: {},
     pickerItem: {},
@@ -67,7 +68,7 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
           ))}
         </Picker>
         {unit ? <View style={styles.pickerUnit}>
-          <Text style={{color: props.theme.global.fontColor, fontSize: convertX(18)}}>
+          <Text style={{color: props.theme?.global.fontColor, fontSize: convertX(18)}}>
             {unit[0]}
           </Text>
         </View> : null}
@@ -86,7 +87,7 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
           ))}
         </Picker>
         {unit ? <View style={styles.pickerUnit}>
-          <Text style={{color: props.theme.global.fontColor, fontSize: convertX(18)}}>
+          <Text style={{color: props.theme?.global.fontColor, fontSize: convertX(18)}}>
             {unit[1]}
           </Text>
         </View> : null}

package/src/components/ldvSlider.tsx

@@ -2,12 +2,13 @@ import {useReactive} from 'ahooks'
 import React, {useEffect} from 'react'
 import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native'
 import {Slider, Utils} from 'tuya-panel-kit'
+import ThemeType from '../config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
 
 interface LdvSliderProps {
-  theme?: any
+  theme?: ThemeType
   title: string,
   value: number,
   min?: number | undefined,
@@ -44,13 +45,13 @@ const LdvSlider = (props: LdvSliderProps) => {
     valueText: {
       marginTop: cx(10),
       fontSize: cx(14),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
     title: {
       marginTop: cx(10),
       fontSize: cx(14),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
     slider: {

package/src/components/ldvSwitch.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import {StyleSheet, Text, View} from 'react-native'
 import {SwitchButton, Utils} from 'tuya-panel-kit'
-import Spacer from './Spacer'
+import ThemeType from '../config/themeType'
 
 const {convertX: cx} = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
 interface Prop {
-  theme?: any
+  theme?: ThemeType
   title: string
-  color: string
+  color?: string
   colorAlpha: number
   enable: boolean
   setEnable: (enable: boolean) => void
@@ -23,10 +23,10 @@ const LdvSwitch = (props: Prop) => {
       <View style={styles.titleBGView}>
         <View style={{flexDirection: 'column', flex: 1}}>
           <View style={{flexDirection: 'row', alignItems: 'center'}}>
-            <Text style={{...styles.title, color: props.theme.global.fontColor}}>{title}</Text>
-            <View style={[styles.colorBlock, {backgroundColor: color, opacity: colorAlpha}]}/>
+            <Text style={{...styles.title, color: props.theme?.global.fontColor}}>{title}</Text>
+            <View style={[styles.colorBlock, {backgroundColor: color || props.theme?.card.background, opacity: colorAlpha}]}/>
           </View>
-          {description && <Text style={{color: props.theme.global.fontColor}}>{description}</Text>}
+          {description && <Text style={{color: props.theme?.global.fontColor}}>{description}</Text>}
         </View>
         {showSwitch && <SwitchButton value={enable} onValueChange={setEnable}/>}
       </View>

package/src/components/ldvTopBar.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {Image, Platform, Text, TouchableOpacity, View} from 'react-native'
 import {IconFont, Utils} from 'tuya-panel-kit'
+import ThemeType from '../config/themeType'
 
 const backIcon = Platform.OS === 'ios' ? 'backIos' : 'backAndroid'
 
@@ -8,7 +9,7 @@ const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
 
 interface TopBarProps {
-  theme?: any
+  theme?: ThemeType
   title: string
   onBackPress: () => void
   rightButtonIcon?: any | {}
@@ -37,13 +38,13 @@ const LDVTopBar = (props: TopBarProps) => {
             alignItems: 'center',
             flex: 1,
           }}>
-          <IconFont size={cx(16)} color={props.theme.global.brand} name={backIcon}/>
+          <IconFont size={cx(16)} color={props.theme?.global.brand} name={backIcon}/>
           <View style={{width: cx(10)}}/>
           <Text
             numberOfLines={1}
             style={{
               maxWidth: cx(290),
-              color: props.theme.global.brand,
+              color: props.theme?.global.brand,
               fontSize: cx(16),
               fontFamily: 'helvetica_neue_lt_std_roman',
             }}>{props.title}</Text>