feat: ✏️ use Font Family helper function to set font as Inter for android

Karthik-B-06 · Karthik-B-06 · commit 9af122d6b85f · 2023-01-02T19:47:07.000+05:30
diff --git a/src/components/avatar/Avatar.tsx b/src/components/avatar/Avatar.tsx
@@ -3,7 +3,7 @@ import { ImageProps, ImageSourcePropType } from "react-native";
 
 import { DefaultUser } from "../../icons";
 import { Box, BoxProps, Text } from "../../primitives";
-import { useTailwind, useTheme } from "../../theme";
+import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
 import { createComponent, cx, isUndefined, styleAdapter } from "../../utils";
 import { useAvatarGroup } from "../avatar-group";
 import { Icon } from "../icon";
@@ -128,6 +128,7 @@ const RNAvatar: React.FC<Partial<AvatarProps>> = forwardRef<
         <Text
           style={ts(
             cx(avatarTheme.initials.base, avatarTheme.initials.size[size]),
+            getTextFontFamily(avatarTheme.initials.base),
           )}
           adjustsFontSizeToFit
           allowFontScaling={false}
diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 
 import { Box, BoxProps, Text, TextProps } from "../../primitives";
-import { useTheme } from "../../theme";
+import { getTextFontFamily, useTheme } from "../../theme";
 import { createComponent, cx, RenderPropType, styleAdapter } from "../../utils";
 import { createIcon } from "../create-icon";
 import { Icon } from "../icon";
@@ -105,6 +105,7 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
                   badgeStyles.themeColor[themeColor]?.[variant]?.text,
                 ),
               ),
+              getTextFontFamily(badgeStyles.size[size]?.text),
               styleAdapter(textStyle),
             ]}
             {...otherTextProps}
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -8,7 +8,7 @@ import {
 
 import { RenderPropType } from "../../index";
 import { Box, Text, Touchable } from "../../primitives";
-import { useTheme } from "../../theme";
+import { getTextFontFamily, useTheme } from "../../theme";
 import {
   createComponent,
   cx,
@@ -227,6 +227,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
                   : "",
               ),
             ),
+            getTextFontFamily(buttonTheme.size[size]?.text),
             styleAdapter(textStyle),
           ]}
         >
diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx
@@ -10,7 +10,7 @@ import { useToggleState } from "@react-stately/toggle";
 
 import { Check, Dash } from "../../icons";
 import { Box, Text, Touchable, TouchableProps } from "../../primitives";
-import { useTheme } from "../../theme";
+import { getTextFontFamily, useTheme } from "../../theme";
 import {
   createComponent,
   cx,
@@ -303,6 +303,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
                     description && checkboxTheme?.description?.labelText,
                   ),
                 ),
+                getTextFontFamily(checkboxTheme.label?.text?.common),
                 description
                   ? { lineHeight: checkboxTheme?.size[size]?.text?.lineHeight }
                   : {},
@@ -320,6 +321,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
                     checkboxTheme?.size[size]?.description?.default,
                   ),
                 ),
+                getTextFontFamily(checkboxTheme?.description?.common),
               ]}
             >
               {description}
diff --git a/src/components/circular-progress/CircularProgress.tsx b/src/components/circular-progress/CircularProgress.tsx
@@ -15,7 +15,7 @@ import Animated, {
 import Svg, { Circle, G } from "react-native-svg";
 
 import { AnimatedBox, Box, BoxProps, Text } from "../../primitives";
-import { useTheme } from "../../theme";
+import { getTextFontFamily, useTheme } from "../../theme";
 import { createComponent, cx, styleAdapter } from "../../utils";
 
 Animated.addWhitelistedNativeProps({ text: true });
@@ -289,6 +289,7 @@ const RNCircularProgress: React.FC<Partial<CircularProgressProps>> = forwardRef<
                     circularProgressTheme.size[size]?.text,
                   ),
                 ),
+                getTextFontFamily(circularProgressTheme.text),
               ]}
             >
               {hint}
diff --git a/src/components/meter/Meter.tsx b/src/components/meter/Meter.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, useState } from "react";
 import { LayoutChangeEvent } from "react-native";
 
 import { Box, Text } from "../../primitives";
-import { useTheme } from "../../theme";
+import { getTextFontFamily, useTheme } from "../../theme";
 import { createComponent } from "../../utils";
 
 import { MeterBar } from "./MeterBar";
@@ -108,21 +108,27 @@ const RNMeter: React.FC<Partial<MeterProps>> = forwardRef<
         <Box style={tailwind.style("flex-row")}>
           {label && (
             <Text
-              style={tailwind.style([
-                meterTheme.label.common,
-                meterTheme.size[size]?.label,
-                hint ? meterTheme.label.hasHint : "",
-              ])}
+              style={[
+                tailwind.style([
+                  meterTheme.label.common,
+                  meterTheme.size[size]?.label,
+                  hint ? meterTheme.label.hasHint : "",
+                ]),
+                getTextFontFamily(meterTheme.label.common),
+              ]}
             >
               {label}
             </Text>
           )}
           {label && hint && (
             <Text
-              style={tailwind.style([
-                meterTheme.hint.common,
-                meterTheme.size[size]?.hint,
-              ])}
+              style={[
+                tailwind.style([
+                  meterTheme.hint.common,
+                  meterTheme.size[size]?.hint,
+                ]),
+                getTextFontFamily(meterTheme.hint.common),
+              ]}
             >
               {hint}
             </Text>
diff --git a/src/components/progress/ProgressBar.tsx b/src/components/progress/ProgressBar.tsx
@@ -12,7 +12,7 @@ import {
 } from "react-native-reanimated";
 
 import { AnimatedBox, Box, BoxProps, Text } from "../../primitives";
-import { useTheme } from "../../theme/context";
+import { getTextFontFamily, useTheme } from "../../theme";
 import { createComponent, cx, styleAdapter } from "../../utils";
 
 export type ProgressBarSizes = "sm" | "md" | "lg" | "xl";
@@ -134,16 +134,20 @@ export const RNProgressBar: React.FC<Partial<ProgressProps>> = forwardRef<
                   progressTheme.size[size]?.label,
                   hint ? progressTheme.label.hasHint : "",
                 ),
+                getTextFontFamily(progressTheme.label.common),
               )}
             >
               {label}
             </Text>
           )}
           {label && hint && (
             <Text
-              style={tailwind.style(
-                cx(progressTheme.hint.common, progressTheme.size[size]?.hint),
-              )}
+              style={[
+                tailwind.style(
+                  cx(progressTheme.hint.common, progressTheme.size[size]?.hint),
+                ),
+                getTextFontFamily(progressTheme.hint.common),
+              ]}
             >
               {hint}
             </Text>
diff --git a/src/components/radio/Radio.tsx b/src/components/radio/Radio.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useEffect, useRef } from "react";
 import { Platform, PressableStateCallbackType } from "react-native";
 
 import { Box, Text, Touchable, TouchableProps } from "../../primitives";
-import { useTheme } from "../../theme";
+import { getTextFontFamily, useTheme } from "../../theme";
 import {
   createComponent,
   cx,
@@ -220,6 +220,7 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
                 description
                   ? { lineHeight: radioTheme.size[size]?.text?.lineHeight }
                   : {},
+                getTextFontFamily(radioTheme.label?.text?.common),
               ]}
             >
               {label}
@@ -234,6 +235,7 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
                     radioTheme.size[size]?.description?.default,
                   ),
                 ),
+                getTextFontFamily(radioTheme.description.common),
               ]}
             >
               {description}
diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
@@ -9,10 +9,11 @@ import { BottomSheetFlatList, BottomSheetModal } from "@gorhom/bottom-sheet";
 import { isUndefined } from "lodash";
 
 import { Text, Touchable } from "../../primitives";
-import { useTheme } from "../../theme";
+import { getTextFontFamily, useTheme } from "../../theme";
 import {
   createComponent,
   createContext,
+  cx,
   RenderPropType,
   styleAdapter,
   useOnHover,
@@ -174,15 +175,17 @@ const RNSelect: React.FC<Partial<SelectProps>> = forwardRef<
         onPress={handlePresentModalPress}
         style={(touchState: PressableStateCallbackType) => [
           tailwind.style([
-            selectStyle.base.common,
-            selectStyle.base.size[size].common,
-            !prefix ? selectStyle.base.size[size].withoutAddon : "",
-            selectStyle.base.variant[variant].default,
-            invalid ? selectStyle.base.variant[variant].invalid : "",
-            disabled ? selectStyle.base.variant[variant].disabled : "",
-            touchState.pressed || hovered.value
-              ? selectStyle.base.variant[variant].pressedOrHovered
-              : "",
+            cx(
+              selectStyle.base.common,
+              selectStyle.base.size[size].common,
+              !prefix ? selectStyle.base.size[size].withoutAddon : "",
+              selectStyle.base.variant[variant].default,
+              invalid ? selectStyle.base.variant[variant].invalid : "",
+              disabled ? selectStyle.base.variant[variant].disabled : "",
+              touchState.pressed || hovered.value
+                ? selectStyle.base.variant[variant].pressedOrHovered
+                : "",
+            ),
           ]),
           styleAdapter(style, touchState),
         ]}
@@ -206,18 +209,24 @@ const RNSelect: React.FC<Partial<SelectProps>> = forwardRef<
                 isDefaultState={isUndefined(selectState)}
               />
               <Text
-                style={tailwind.style([
-                  selectStyle.base.text.size[size],
-                  touchState.pressed || hovered.value
-                    ? selectStyle.base.text.variant[variant].pressedOrHovered
-                    : disabled
-                    ? selectStyle.base.text.variant[variant].disabled
-                    : isUndefined(selectState)
-                    ? selectStyle.base.text.variant[variant].default
-                    : selectStyle.base.text.variant[variant].filled,
-                  prefix ? `pl-[${prefixWidth}px]` : "",
-                  `pr-[${suffixWidth}px]`,
-                ])}
+                style={[
+                  tailwind.style([
+                    cx(
+                      selectStyle.base.text.size[size],
+                      touchState.pressed || hovered.value
+                        ? selectStyle.base.text.variant[variant]
+                            .pressedOrHovered
+                        : disabled
+                        ? selectStyle.base.text.variant[variant].disabled
+                        : isUndefined(selectState)
+                        ? selectStyle.base.text.variant[variant].default
+                        : selectStyle.base.text.variant[variant].filled,
+                      prefix ? `pl-[${prefixWidth}px]` : "",
+                      `pr-[${suffixWidth}px]`,
+                    ),
+                  ]),
+                  getTextFontFamily(selectStyle.base.text.size[size]),
+                ]}
               >
                 {isUndefined(selectState)
                   ? placeholder
diff --git a/src/components/select/SelectOption.tsx b/src/components/select/SelectOption.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import { Platform, PressableStateCallbackType } from "react-native";
 
 import { Box, Text, Touchable } from "../../primitives";
-import { useTheme } from "../../theme";
+import { getTextFontFamily, useTheme } from "../../theme";
 import {
   createComponent,
   cx,
@@ -73,6 +73,7 @@ const RNSelectOption: React.FC<SelectOptionProps> = forwardRef<
                         selectOptionStyle.size[size]?.text?.lineHeight,
                     }
                   : {},
+                getTextFontFamily(selectOptionStyle.label?.text?.common),
               ]}
             >
               {label}
diff --git a/src/components/switch/Switch.tsx b/src/components/switch/Switch.tsx
@@ -16,7 +16,7 @@ import {
 import { useControllableState } from "@chakra-ui/hooks";
 
 import { AnimatedBox, Box, BoxProps, Text } from "../../primitives";
-import { useTheme } from "../../theme";
+import { getTextFontFamily, useTheme } from "../../theme";
 import { cx, styleAdapter } from "../../utils";
 import { createComponent } from "../../utils/createComponent";
 
@@ -327,16 +327,19 @@ const RNSwitch: React.FC<Partial<SwitchProps>> = forwardRef<
         >
           {label && typeof label === "string" ? (
             <Text
-              style={tailwind.style(
-                cx(
-                  switchTheme.size[size]?.label?.text,
-                  disabled
-                    ? description
-                      ? switchTheme.themeColor[themeColor]?.label.default
-                      : switchTheme.themeColor[themeColor]?.label.disabled
-                    : "",
+              style={[
+                tailwind.style(
+                  cx(
+                    switchTheme.size[size]?.label?.text,
+                    disabled
+                      ? description
+                        ? switchTheme.themeColor[themeColor]?.label.default
+                        : switchTheme.themeColor[themeColor]?.label.disabled
+                      : "",
+                  ),
                 ),
-              )}
+                getTextFontFamily(switchTheme.size[size]?.label?.text),
+              ]}
             >
               {label}
             </Text>
@@ -345,11 +348,17 @@ const RNSwitch: React.FC<Partial<SwitchProps>> = forwardRef<
           )}
           {description && typeof description === "string" ? (
             <Text
-              style={tailwind.style(
-                cx(
+              style={[
+                tailwind.style(
+                  cx(
+                    switchTheme.size[size]?.labelWithDescription
+                      ?.descriptionText,
+                  ),
+                ),
+                getTextFontFamily(
                   switchTheme.size[size]?.labelWithDescription?.descriptionText,
                 ),
-              )}
+              ]}
             >
               {description}
             </Text>
diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx
@@ -8,7 +8,7 @@ import {
 
 import { Close } from "../../icons";
 import { Box, Text, Touchable } from "../../primitives";
-import { useTheme } from "../../theme";
+import { getTextFontFamily, useTheme } from "../../theme";
 import {
   createComponent,
   cx,
@@ -159,6 +159,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
             ),
           ),
           styleAdapter(textStyle),
+          getTextFontFamily(tagTheme.size[size]?.text),
         ]}
         adjustsFontSizeToFit
         allowFontScaling={false}
diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
@@ -3,7 +3,7 @@ import { Platform } from "react-native";
 import { Popover } from "react-native-popper";
 
 import { Box, Text } from "../../primitives";
-import { useTheme } from "../../theme";
+import { getTextFontFamily, useTheme } from "../../theme";
 import { createComponent, cx, RenderPropType } from "../../utils";
 
 import TooltipArrow from "./TooltipArrow";
@@ -103,7 +103,12 @@ export const RNTooltip: React.FC<Partial<TooltipProps>> = props => {
         {hasArrow && <TooltipArrow />}
         <Box style={tailwind.style(cx(tooltipTheme.contentWrapper))}>
           {typeof content === "string" ? (
-            <Text style={tailwind.style(cx(tooltipTheme.content))}>
+            <Text
+              style={[
+                tailwind.style(cx(tooltipTheme.content)),
+                getTextFontFamily(tooltipTheme.content),
+              ]}
+            >
               {content}
             </Text>
           ) : (
