Enhance Typography component with Android-specific text rendering fix (#678)

Author: shashank-bhatotia

src/components/Typography.jsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Platform } from "react-native";
 
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
@@ -14,6 +15,8 @@ import {
   system,
 } from "styled-system";
 
+import { theme } from "../theme";
+
 export const Text = styled.Text`
   ${textStyle}
   ${space}
@@ -29,6 +32,13 @@ export const Text = styled.Text`
     },
     textTransform: { property: "textTransform", cssProperty: "textTransform" },
   })}
+  ${Platform.select({
+    android: `
+      include-font-padding: false;
+      text-align-vertical: center;
+    `,
+    ios: "",
+  })}
 `;
 
 /**
@@ -74,9 +84,54 @@ export const Text = styled.Text`
  * @extends StyledSystems props /styled-system
  */
 
-export const Typography = ({ children, ...rest }) => (
-  <Text {...rest}>{children}</Text>
-);
+export const Typography = ({
+  children,
+  fontSize,
+  lineHeightMultiplier = 1.3,
+  style,
+  ...rest
+}) => {
+  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,
@@ -86,8 +141,12 @@ Typography.propTypes = {
   ...propTypes.color,
   ...propTypes.textStyle,
   children: PropTypes.node,
+  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  lineHeightMultiplier: PropTypes.number,
+  style: PropTypes.object,
 };
 
 Typography.defaultProps = {
   textStyle: "defaultTextStyle",
+  lineHeightMultiplier: 1.3,
 };