Merge branch 'develop' of nibgat-community/ncore-ui-kit-mobile into main

src/context/theme.tsx

@@ -16,7 +16,12 @@ import {
     mergePalettes,
     mergeShapes
 } from "../helpers";
-import defaultPaletteData from "../variants/themes/default.json";
+import _defaultPaletteData from "../variants/themes/default.json";
+import {
+    androidTypographyFixer
+} from "../utils";
+
+const defaultPaletteData = androidTypographyFixer(_defaultPaletteData);
 
 class NCoreUIKitTheme<T extends ThemesType> extends NCoreContext<ThemeContextType, ConfigType<ThemeContextType>> {
     projectThemes?: NCoreUIKit.Palette = defaultPaletteData;

src/helpers/theme/typography.ts

@@ -1,4 +1,9 @@
-import defaultJSON from "../../variants/themes/default.json";
+import {
+    androidTypographyFixer
+} from "../../utils";
+import _defaultJSON from "../../variants/themes/default.json";
+
+const defaultJSON = androidTypographyFixer(_defaultJSON);
 
 export const mergeTypography = (
     defaultSpacesTokens: NCoreUIKit.Typography,

src/types/index.ts

@@ -79,6 +79,7 @@ declare global {
         }
 
         interface Palette {
+            isNeedAndroidTypographyFixer: boolean;
             typography: TypographyWithVariants;
             palettes: ThemePalettes;
             shapes: Shapes;

src/utils/index.ts

@@ -1,6 +1,59 @@
+import {
+    Platform
+} from "react-native";
+
 export const uuid = () => {
     return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
         const r = Math.random() * 16 | 0, v = c == "x" ? r : (r & 0x3 | 0x8);
         return v.toString(16);
     });
 };
+
+const ANDROID_FONT_FIX = {
+    "100": "Thin",
+    "200": "ExtraLight",
+    "300": "Light",
+    "400": "Regular",
+    "500": "Medium",
+    "600": "SemiBold",
+    "700": "Bold",
+    "800": "ExtraBold",
+    "900": "Black"
+};
+
+export const androidTypographyFixer = (defaultPaletteData: NCoreUIKit.Palette): NCoreUIKit.Palette => {
+    if(defaultPaletteData.isNeedAndroidTypographyFixer && Platform.OS === "android") {
+        const spacious = defaultPaletteData.typography.spacious;
+        const compact = defaultPaletteData.typography.compact;
+
+        (Object.keys(spacious) as Array<keyof typeof spacious>).forEach((key) => {
+            spacious[key] = {
+                ...spacious[key],
+                fontWeight: "normal",
+                fontFamily: spacious[key].fontFamily.indexOf("-") === -1
+                    ? `${spacious[key].fontFamily}-${ANDROID_FONT_FIX[spacious[key].fontWeight as keyof typeof ANDROID_FONT_FIX]}`
+                    : spacious[key].fontFamily
+            };
+        });
+
+        (Object.keys(compact) as Array<keyof typeof compact>).forEach((key) => {
+            compact[key] = {
+                ...compact[key],
+                fontWeight: "normal",
+                fontFamily: compact[key].fontFamily.indexOf("-") === -1
+                    ? `${compact[key].fontFamily}-${ANDROID_FONT_FIX[compact[key].fontWeight as keyof typeof ANDROID_FONT_FIX]}`
+                    : compact[key].fontFamily
+            };
+        });
+
+        return {
+            ...defaultPaletteData,
+            typography: {
+                spacious: spacious,
+                compact: compact
+            }
+        };
+    } else {
+        return defaultPaletteData;
+    }
+};

src/variants/themes/default.json

@@ -1,4 +1,5 @@
 {
+    "isNeedAndroidTypographyFixer": true,
     "shapes": {
         "radiuses": {
             "soft": {