Fix font display on Android (#5776)

* Fix font display on Android

* Format

* Split out fake fonts hook for platforms

src/alf/fonts.ts

@@ -1,7 +1,6 @@
 import {TextStyle} from 'react-native'
-import {useFonts} from 'expo-font'
 
-import {isWeb} from '#/platform/detection'
+import {isAndroid, isWeb} from '#/platform/detection'
 import {Device, device} from '#/storage'
 
 const WEB_FONT_FAMILIES = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`
@@ -40,14 +39,40 @@ export function setFontFamily(fontFamily: Device['fontFamily']) {
  */
 export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') {
   if (fontFamily === 'theme') {
-    style.fontFamily = 'InterVariable'
+    if (isAndroid) {
+      style.fontFamily =
+        {
+          400: 'Inter-Regular',
+          500: 'Inter-Regular',
+          600: 'Inter-SemiBold',
+          700: 'Inter-SemiBold',
+          800: 'Inter-ExtraBold',
+          900: 'Inter-ExtraBold',
+        }[String(style.fontWeight || '400')] || 'Inter-Regular'
 
-    if (style.fontStyle === 'italic') {
-      style.fontFamily += 'Italic'
+      if (style.fontStyle === 'italic') {
+        if (style.fontFamily === 'Inter-Regular') {
+          style.fontFamily = 'Inter-Italic'
+        } else {
+          style.fontFamily += 'Italic'
+        }
+      }
+
+      /*
+       * These are not supported on Android and actually break the styling.
+       */
+      delete style.fontWeight
+      delete style.fontStyle
+    } else {
+      style.fontFamily = 'InterVariable'
+
+      if (style.fontStyle === 'italic') {
+        style.fontFamily += 'Italic'
+      }
     }
 
-    // fallback families only supported on web
     if (isWeb) {
+      // fallback families only supported on web
       style.fontFamily += `, ${WEB_FONT_FAMILIES}`
     }
 
@@ -70,16 +95,7 @@ export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') {
   }
 }
 
-/*
- * IMPORTANT: This is unused. Expo statically extracts these fonts.
- *
- * All used fonts MUST be configured here. Unused fonts can be commented out.
- *
- * This is used for both web fonts and native fonts.
+/**
+ * Here only for bundling purposes, not actually used.
  */
-export function DO_NOT_USE() {
-  return useFonts({
-    InterVariable: require('../../assets/fonts/inter/InterVariable.ttf'),
-    'InterVariable-Italic': require('../../assets/fonts/inter/InterVariable-Italic.ttf'),
-  })
-}
+export {DO_NOT_USE} from '#/alf/util/unusedUseFonts'