feat(utils): ✨ add getTextLineHeight() for android fixing <Text> issues

src/components/avatar/Avatar.tsx

@@ -3,7 +3,12 @@ import { ImageProps, ImageSourcePropType } from "react-native";
 
 import { DefaultUser } from "../../icons";
 import { Box, BoxProps, Text } from "../../primitives";
-import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
+import {
+  getTextFontFamily,
+  getTextLineHeight,
+  useTailwind,
+  useTheme,
+} from "../../theme";
 import { createComponent, cx, isUndefined, styleAdapter } from "../../utils";
 import { useAvatarGroup } from "../avatar-group";
 import { Icon } from "../icon";
@@ -129,6 +134,7 @@ const RNAvatar: React.FC<Partial<AvatarProps>> = forwardRef<
           style={ts(
             cx(avatarTheme.initials.base, avatarTheme.initials.size[size]),
             getTextFontFamily(avatarTheme.initials.base),
+            getTextLineHeight(avatarTheme?.initials?.size[size]),
           )}
           adjustsFontSizeToFit
           allowFontScaling={false}

src/components/badge/Badge.tsx

@@ -1,7 +1,12 @@
 import React, { forwardRef } from "react";
 
 import { Box, BoxProps, Text, TextProps } from "../../primitives";
-import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
+import {
+  getTextFontFamily,
+  getTextLineHeight,
+  useTailwind,
+  useTheme,
+} from "../../theme";
 import { createComponent, cx, RenderPropType, styleAdapter } from "../../utils";
 import { createIcon } from "../create-icon";
 import { Icon } from "../icon";
@@ -104,6 +109,7 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
                 ),
               ),
               getTextFontFamily(badgeStyles.size[size]?.text),
+              getTextLineHeight(badgeStyles.size[size]?.text),
               styleAdapter(textStyle),
             ]}
             {...otherTextProps}

src/components/button/Button.tsx

@@ -9,7 +9,12 @@ import {
 
 import { RenderPropType } from "../../index";
 import { AnimatedBox, Box, Text, Touchable } from "../../primitives";
-import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
+import {
+  getTextFontFamily,
+  getTextLineHeight,
+  useTailwind,
+  useTheme,
+} from "../../theme";
 import {
   createComponent,
   cx,
@@ -246,6 +251,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
               ),
             ),
             getTextFontFamily(buttonTheme.size[size]?.text),
+            getTextLineHeight(buttonTheme.size[size]?.text),
             styleAdapter(textStyle),
           ]}
         >

src/components/circular-progress/CircularProgress.tsx

@@ -15,7 +15,12 @@ import Animated, {
 import Svg, { Circle, G } from "react-native-svg";
 
 import { AnimatedBox, Box, BoxProps, Text } from "../../primitives";
-import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
+import {
+  getTextFontFamily,
+  getTextLineHeight,
+  useTailwind,
+  useTheme,
+} from "../../theme";
 import { createComponent, cx, styleAdapter } from "../../utils";
 
 Animated.addWhitelistedNativeProps({ text: true });
@@ -290,6 +295,7 @@ const RNCircularProgress: React.FC<Partial<CircularProgressProps>> = forwardRef<
                   ),
                 ),
                 getTextFontFamily(circularProgressTheme.text),
+                getTextLineHeight(circularProgressTheme.size[size]?.text),
               ]}
             >
               {hint}

src/components/input/Input.tsx

@@ -2,7 +2,12 @@ import React, { forwardRef, ReactNode, useMemo, useRef, useState } from "react";
 import { Platform, TextInputProps } from "react-native";
 
 import { Box, BoxProps, RNTextInput, TouchableProps } from "../../primitives";
-import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
+import {
+  getTextFontFamily,
+  getTextLineHeight,
+  useTailwind,
+  useTheme,
+} from "../../theme";
 import {
   cx,
   generateBoxShadow,
@@ -287,6 +292,7 @@ const RNInput: React.FC<Partial<InputProps>> = forwardRef<
             ),
           ),
           getTextFontFamily(inputTheme.size[size]?.base?.default),
+          getTextLineHeight(inputTheme.size[size]?.base?.default),
           isFocussedWeb.value
             ? Platform.select({
                 web: {

src/components/select/Select.tsx

@@ -9,7 +9,12 @@ import { BottomSheetFlatList, BottomSheetModal } from "@gorhom/bottom-sheet";
 import { isUndefined } from "lodash";
 
 import { Text, Touchable } from "../../primitives";
-import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
+import {
+  getTextFontFamily,
+  getTextLineHeight,
+  useTailwind,
+  useTheme,
+} from "../../theme";
 import {
   createComponent,
   createContext,
@@ -176,14 +181,14 @@ const RNSelect: React.FC<Partial<SelectProps>> = forwardRef<
         style={(touchState: PressableStateCallbackType) => [
           ts([
             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 : "",
+              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
+                ? selectStyle.base?.variant[variant]?.pressedOrHovered
                 : "",
             ),
           ]),
@@ -212,20 +217,21 @@ const RNSelect: React.FC<Partial<SelectProps>> = forwardRef<
                 style={[
                   ts([
                     cx(
-                      selectStyle.base.text.size[size],
+                      selectStyle.base?.size[size]?.text,
                       touchState.pressed || hovered.value
-                        ? selectStyle.base.text.variant[variant]
-                            .pressedOrHovered
+                        ? selectStyle.base?.variant[variant]?.text
+                            ?.pressedOrHovered
                         : disabled
-                        ? selectStyle.base.text.variant[variant].disabled
+                        ? selectStyle.base?.variant[variant]?.text?.disabled
                         : isUndefined(selectState)
-                        ? selectStyle.base.text.variant[variant].default
-                        : selectStyle.base.text.variant[variant].filled,
+                        ? selectStyle.base?.variant[variant]?.text?.default
+                        : selectStyle.base?.variant[variant]?.text?.filled,
                       prefix ? `pl-[${prefixWidth}px]` : "",
                       `pr-[${suffixWidth}px]`,
                     ),
                   ]),
-                  getTextFontFamily(selectStyle.base.text.size[size]),
+                  getTextFontFamily(selectStyle.base?.size[size]?.text),
+                  getTextLineHeight(selectStyle.base?.size[size]?.text),
                 ]}
               >
                 {isUndefined(selectState)

src/components/select/SelectPrefix.tsx

@@ -32,14 +32,14 @@ export const SelectPrefix: React.FC<SelectPrefixProps> = ({
 
   // Icon Stroke Color based on Select State
   const iconColor = isPressedOrHovered
-    ? selectPrefixStyles.prefix.variant[variant].pressedOrHovered
+    ? selectPrefixStyles.base.variant[variant].prefix.pressedOrHovered
     : disabled
-    ? selectPrefixStyles.prefix.variant[variant].disabled
+    ? selectPrefixStyles.base.variant[variant].prefix.disabled
     : invalid
-    ? selectPrefixStyles.prefix.variant[variant].invalid
+    ? selectPrefixStyles.base.variant[variant].prefix.invalid
     : isDefaultState
-    ? selectPrefixStyles.suffix.variant[variant].default
-    : selectPrefixStyles.suffix.variant[variant].filled;
+    ? selectPrefixStyles.base.variant[variant].suffix.default
+    : selectPrefixStyles.base.variant[variant].suffix.filled;
 
   const _prefix: SelectProps["prefix"] = React.useMemo(() => {
     const selectPrefix =
@@ -58,9 +58,9 @@ export const SelectPrefix: React.FC<SelectPrefixProps> = ({
   return (
     <Box
       style={ts(
-        selectPrefixStyles.prefix.default,
-        selectPrefixStyles.prefix.size[size],
-        selectPrefixStyles.prefix.variant[variant].wrapper,
+        selectPrefixStyles.prefixWrapper,
+        selectPrefixStyles.base.size[size].prefix,
+        selectPrefixStyles.base.variant[variant].prefix.wrapper,
       )}
       {...props}
     >

src/components/select/SelectSuffix.tsx

@@ -33,14 +33,14 @@ export const SelectSuffix: React.FC<SelectSuffixProps> = ({
 
   // Icon Stroke Color based on Select State
   const iconColor = isPressedOrHovered
-    ? selectSuffixStyles.suffix.variant[variant].pressedOrHovered
+    ? selectSuffixStyles.base.variant[variant].suffix.pressedOrHovered
     : disabled
-    ? selectSuffixStyles.suffix.variant[variant].disabled
+    ? selectSuffixStyles.base.variant[variant].suffix.disabled
     : invalid
-    ? selectSuffixStyles.suffix.variant[variant].invalid
+    ? selectSuffixStyles.base.variant[variant].suffix.invalid
     : isDefaultState
-    ? selectSuffixStyles.suffix.variant[variant].default
-    : selectSuffixStyles.suffix.variant[variant].filled;
+    ? selectSuffixStyles.base.variant[variant].suffix.default
+    : selectSuffixStyles.base.variant[variant].suffix.filled;
 
   const _suffix: SelectProps["suffix"] = React.useMemo(() => {
     const selectSuffix =
@@ -59,9 +59,9 @@ export const SelectSuffix: React.FC<SelectSuffixProps> = ({
   return (
     <Box
       style={ts([
-        selectSuffixStyles.suffix.default,
-        selectSuffixStyles.suffix.size[size],
-        selectSuffixStyles.suffix.variant[variant].wrapper,
+        selectSuffixStyles.suffixWrapper,
+        selectSuffixStyles.base.size[size].suffix,
+        selectSuffixStyles.base.variant[variant].suffix.wrapper,
       ])}
       {...props}
     >

src/components/switch/Switch.tsx

@@ -16,7 +16,12 @@ import {
 import { useControllableState } from "@chakra-ui/hooks";
 
 import { AnimatedBox, Box, BoxProps, Text } from "../../primitives";
-import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
+import {
+  getTextFontFamily,
+  getTextLineHeight,
+  useTailwind,
+  useTheme,
+} from "../../theme";
 import { cx, styleAdapter, useHaptic } from "../../utils";
 import { createComponent } from "../../utils/createComponent";
 
@@ -348,6 +353,7 @@ const RNSwitch: React.FC<Partial<SwitchProps>> = forwardRef<
                   ),
                 ),
                 getTextFontFamily(switchTheme.size[size]?.label?.text),
+                getTextLineHeight(switchTheme.size[size]?.label?.text),
               ]}
             >
               {label}

src/components/tag/Tag.tsx

@@ -9,7 +9,12 @@ import {
 
 import { Close } from "../../icons";
 import { AnimatedBox, Box, Text, Touchable } from "../../primitives";
-import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
+import {
+  getTextFontFamily,
+  getTextLineHeight,
+  useTailwind,
+  useTheme,
+} from "../../theme";
 import {
   createComponent,
   cx,
@@ -179,6 +184,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
           ),
           styleAdapter(textStyle),
           getTextFontFamily(tagTheme.size[size]?.text),
+          getTextLineHeight(tagTheme.size[size]?.text),
         ]}
         adjustsFontSizeToFit
         allowFontScaling={false}