From d3b49cf5c5a1d0b13116f39b909ad1ad9d64527c Mon Sep 17 00:00:00 2001
From: Shashank <shashankbhatotia@gmail.com>
Date: Wed, 26 Feb 2025 11:49:54 +0530
Subject: [PATCH 1/2] Enhance Typography component with Android-specific text
 rendering fixes and new lineHeightMultiplier prop

---
 src/components/Typography.jsx | 45 +++++++++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/components/Typography.jsx b/src/components/Typography.jsx
index 5ccfa821..12c30fc0 100644
--- a/src/components/Typography.jsx
+++ b/src/components/Typography.jsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Platform } from "react-native"; // Added Platform import for Android-specific fixes
 
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
@@ -14,6 +15,7 @@ import {
   system,
 } from "styled-system";
 
+// Enhanced Text component with Android-specific fixes
 export const Text = styled.Text`
   ${textStyle}
   ${space}
@@ -29,6 +31,23 @@ export const Text = styled.Text`
     },
     textTransform: { property: "textTransform", cssProperty: "textTransform" },
   })}
+
+  /* Android-specific fixes for text rendering */
+  /* 1. Disable default font padding on Android to prevent descender clipping */
+  /* 2. Ensure text is vertically centered */
+  /* 3. Ensure proper line height for descenders */
+  ${Platform.select({
+    android: `
+      include-font-padding: false;
+      text-align-vertical: center;
+      line-height: ${props => {
+        const fontSize = props.fontSize || 16;
+
+        return `${Math.floor(fontSize * 1.3)}px`;
+      }};
+    `,
+    ios: "",
+  })}
 `;
 
 /**
@@ -74,8 +93,26 @@ export const Text = styled.Text`
  * @extends StyledSystems props /styled-system
  */
 
-export const Typography = ({ children, ...rest }) => (
-  <Text {...rest}>{children}</Text>
+export const Typography = ({
+  children,
+  lineHeightMultiplier = 1.3, // New prop to control line height
+  ...rest
+}) => (
+  <Text
+    {...rest}
+    // Android-specific text rendering properties
+    android_hyphenationFrequency="full"
+    textBreakStrategy="simple"
+    style={[
+      // Dynamic line height calculation for Android
+      Platform.OS === "android" && {
+        lineHeight: Math.floor((rest.fontSize || 16) * lineHeightMultiplier),
+      },
+      rest.style,
+    ]}
+  >
+    {children}
+  </Text>
 );
 
 Typography.propTypes = {
@@ -86,8 +123,12 @@ Typography.propTypes = {
   ...propTypes.color,
   ...propTypes.textStyle,
   children: PropTypes.node,
+  // New prop type for line height control
+  lineHeightMultiplier: PropTypes.number,
 };
 
 Typography.defaultProps = {
   textStyle: "defaultTextStyle",
+  // Default value for line height multiplier
+  lineHeightMultiplier: 1.3,
 };

From 311b994088933d35a2175a3ba3ccb56610e87f73 Mon Sep 17 00:00:00 2001
From: Shashank <shashankbhatotia@gmail.com>
Date: Wed, 26 Feb 2025 16:17:18 +0530
Subject: [PATCH 2/2] Refactor Typography component with improved font size
 parsing and line height calculation

---
 src/components/Typography.jsx | 82 +++++++++++++++++++++--------------
 1 file changed, 50 insertions(+), 32 deletions(-)

diff --git a/src/components/Typography.jsx b/src/components/Typography.jsx
index 12c30fc0..9402ea56 100644
--- a/src/components/Typography.jsx
+++ b/src/components/Typography.jsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Platform } from "react-native"; // Added Platform import for Android-specific fixes
+import { Platform } from "react-native";
 
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
@@ -15,7 +15,8 @@ import {
   system,
 } from "styled-system";
 
-// Enhanced Text component with Android-specific fixes
+import { theme } from "../theme";
+
 export const Text = styled.Text`
   ${textStyle}
   ${space}
@@ -31,20 +32,10 @@ export const Text = styled.Text`
     },
     textTransform: { property: "textTransform", cssProperty: "textTransform" },
   })}
-
-  /* Android-specific fixes for text rendering */
-  /* 1. Disable default font padding on Android to prevent descender clipping */
-  /* 2. Ensure text is vertically centered */
-  /* 3. Ensure proper line height for descenders */
   ${Platform.select({
     android: `
       include-font-padding: false;
       text-align-vertical: center;
-      line-height: ${props => {
-        const fontSize = props.fontSize || 16;
-
-        return `${Math.floor(fontSize * 1.3)}px`;
-      }};
     `,
     ios: "",
   })}
@@ -95,25 +86,52 @@ export const Text = styled.Text`
 
 export const Typography = ({
   children,
-  lineHeightMultiplier = 1.3, // New prop to control line height
+  fontSize,
+  lineHeightMultiplier = 1.3,
+  style,
   ...rest
-}) => (
-  <Text
-    {...rest}
-    // Android-specific text rendering properties
-    android_hyphenationFrequency="full"
-    textBreakStrategy="simple"
-    style={[
-      // Dynamic line height calculation for Android
-      Platform.OS === "android" && {
-        lineHeight: Math.floor((rest.fontSize || 16) * lineHeightMultiplier),
-      },
-      rest.style,
-    ]}
-  >
-    {children}
-  </Text>
-);
+}) => {
+  const parseSize = size => {
+    if (typeof size === "number") return size;
+
+    if (typeof size === "string") {
+      // Check if it's a theme token
+      const themeSize = theme.fontSizes[size];
+      if (themeSize !== undefined) {
+        return themeSize;
+      }
+
+      const parsed = parseFloat(size);
+
+      return isNaN(parsed) ? theme.fontSizes.s : parsed;
+    }
+
+    return theme.fontSizes.s;
+  };
+
+  const calculatedLineHeight = React.useMemo(() => {
+    const size = parseSize(fontSize || rest.fontSize || theme.fontSizes.s);
+
+    return Math.floor(size * lineHeightMultiplier);
+  }, [fontSize, rest.fontSize, lineHeightMultiplier]);
+
+  return (
+    <Text
+      android_hyphenationFrequency="full"
+      fontSize={fontSize}
+      textBreakStrategy="simple"
+      {...rest}
+      style={[
+        Platform.OS === "android" && {
+          lineHeight: calculatedLineHeight,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+};
 
 Typography.propTypes = {
   ...propTypes.space,
@@ -123,12 +141,12 @@ Typography.propTypes = {
   ...propTypes.color,
   ...propTypes.textStyle,
   children: PropTypes.node,
-  // New prop type for line height control
+  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   lineHeightMultiplier: PropTypes.number,
+  style: PropTypes.object,
 };
 
 Typography.defaultProps = {
   textStyle: "defaultTextStyle",
-  // Default value for line height multiplier
   lineHeightMultiplier: 1.3,
 };