fix: Manually hack in fixed font sizes (#2160)

* fix: Manually hack in fixed font sizes

* lint fix

native/app/Root.tsx

@@ -1,7 +1,7 @@
 import * as SplashScreen from "expo-splash-screen";
 import { NavigationContainer, type NavigationContainerRef, type Theme } from "@react-navigation/native";
 import { useEffect, useRef } from "react";
-import { StatusBar, useWindowDimensions, Text, Platform, Appearance, TextInput } from "react-native";
+import { StatusBar, useWindowDimensions, Platform, Appearance } from "react-native";
 import { enableFreeze } from "react-native-screens";
 import { object, parse, string } from "valibot";
 import Toast from "react-native-toast-message";
@@ -108,25 +108,6 @@ function refreshIfNeeded() {
 function Root() {
   "use memo";
 
-  // TODO: This hack turns off the font scaling. At some point accessibility will be added to the app.
-  interface TextWithDefaultProps extends Text {
-    defaultProps?: { allowFontScaling?: boolean };
-  }
-
-  interface TextInputWithDefaultProps extends TextInput {
-    defaultProps?: { allowFontScaling?: boolean };
-  }
-
-  (Text as unknown as TextWithDefaultProps).defaultProps = {
-    ...((Text as unknown as TextWithDefaultProps).defaultProps || {}),
-    allowFontScaling: false,
-  };
-
-  (TextInput as unknown as TextInputWithDefaultProps).defaultProps = {
-    ...((TextInput as unknown as TextInputWithDefaultProps).defaultProps || {}),
-    allowFontScaling: false,
-  };
-
   const authenticated = useGGStore((state) => state.authenticated);
   const navigationRef = useRef<NavigationContainerRef<ReactNavigation.RootParamList>>(null);
   const { width } = useWindowDimensions();

native/app/UI/Login.tsx

@@ -2,11 +2,12 @@ import type { NavigationProp } from "@react-navigation/native";
 import { addEventListener, useURL } from "expo-linking";
 import * as WebBrowser from "expo-web-browser";
 import { useEffect, useState } from "react";
-import { Image, Platform, ScrollView, StyleSheet, Text, TextInput, View, useColorScheme } from "react-native";
+import { Image, Platform, ScrollView, StyleSheet, TextInput, View, useColorScheme } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import * as Haptics from "expo-haptics";
 import { TouchableOpacity } from "react-native-gesture-handler";
 
+import Text from "@/app/UI/Text.tsx";
 import { stateID } from "@/app/store/Authentication/AuthenticationLogic.ts";
 import { useGGStore } from "@/app/store/GGStore.ts";
 import { clientID, isLocalWeb, redirectURL } from "@/constants/env.ts";
@@ -60,6 +61,7 @@ function LocalWebLogin() {
   return (
     <>
       <TextInput
+        allowFontScaling={false}
         style={{ color: "white" }}
         value={localWebLoginText}
         onChangeText={(localWebLoginText) => {

native/app/UI/MainDrawer.tsx

@@ -1,10 +1,11 @@
 import { type DrawerContentComponentProps, createDrawerNavigator, DrawerItem } from "@react-navigation/drawer";
 import { Image } from "expo-image";
-import { Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import * as SplashScreen from "expo-splash-screen";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+import Text from "@/app/UI/Text.tsx";
 import { useGGStore } from "@/app/store/GGStore.ts";
 import { LOGO_DARK, SEARCH_ICON } from "@/app/utilities/Constants.ts";
 import InventoryHeader from "@/app/inventory/pages/InventoryHeader.tsx";
@@ -102,7 +103,11 @@ function CustomDrawerContent({ navigation, state }: DrawerContentComponentProps)
     <View style={[styles.container, { paddingTop: insets.top + 4, paddingBottom: insets.bottom + 4 }]}>
       <View style={styles.top}>
         <DrawerItem
-          label="Inventory"
+          label={({ color }) => (
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
+              <Text style={{ color }}>{"Inventory"}</Text>
+            </View>
+          )}
           activeTintColor="white"
           inactiveTintColor="grey"
           activeBackgroundColor="#ffffff20"
@@ -123,7 +128,11 @@ function CustomDrawerContent({ navigation, state }: DrawerContentComponentProps)
           onPress={() => navigation.navigate("Search")}
         />
         <DrawerItem
-          label="Settings"
+          label={({ color }) => (
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
+              <Text style={{ color }}>{"Settings"}</Text>
+            </View>
+          )}
           activeTintColor="white"
           inactiveTintColor="grey"
           activeBackgroundColor="#ffffff20"

native/app/UI/Text.tsx

@@ -0,0 +1,12 @@
+// Temp hack for now to stop text scaling
+import { Text as RNText } from "react-native";
+
+type Props = React.ComponentProps<typeof RNText>;
+
+export default function Text({ children, ...props }: Props) {
+  return (
+    <RNText allowFontScaling={false} {...props}>
+      {children}
+    </RNText>
+  );
+}

native/app/index.js

@@ -1,6 +1,12 @@
 import "react-native-gesture-handler"; // Avoid crash in production https://reactnavigation.org/docs/stack-navigator/#installation
 import * as Sentry from "@sentry/react-native";
 import { registerRootComponent } from "expo";
+import { Text, TextInput } from "react-native";
+Text.defaultProps = Text.defaultProps || {};
+Text.defaultProps.allowFontScaling = false;
+
+TextInput.defaultProps = Text.defaultProps || {};
+TextInput.defaultProps.allowFontScaling = false;
 
 import Root from "./Root.tsx";
 

native/app/inventory/cells/ArtifactCell.tsx

@@ -1,7 +1,8 @@
 import { useNavigation } from "@react-navigation/native";
 import { Image } from "expo-image";
-import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
+import { StyleSheet, View, TouchableOpacity } from "react-native";
 
+import Text from "@/app/UI/Text.tsx";
 import type { DestinyItem } from "@/app/inventory/logic/Types.ts";
 import { DEFAULT_OVERLAP_COLOR } from "@/app/utilities/Constants.ts";
 import { ICON_SIZE, INNER_FRAME_SIZE } from "@/app/utilities/UISize.ts";

native/app/inventory/cells/DestinyCell.tsx

@@ -1,7 +1,8 @@
 import { useNavigation } from "@react-navigation/native";
 import { Image } from "expo-image";
-import { Text, View, TouchableOpacity, StyleSheet } from "react-native";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
 
+import Text from "@/app/UI/Text.tsx";
 import { DestinyIconStyles, ICON_SIZE } from "@/app/utilities/UISize.ts";
 import { CRAFTED_OVERLAY, ENHANCED_OVERLAY, getDamageTypeIconUri } from "@/app/utilities/Constants.ts";
 import type { DestinyItem } from "@/app/inventory/logic/Types.ts";

native/app/inventory/cells/EngramCell.tsx

@@ -1,7 +1,8 @@
 import { useNavigation } from "@react-navigation/native";
 import { Image } from "expo-image";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
 
+import Text from "@/app/UI/Text.tsx";
 import { INNER_FRAME_SIZE, common } from "@/app/utilities/UISize.ts";
 import { EMPTY_ENGRAM } from "@/app/utilities/Constants.ts";
 import type { DestinyItem } from "@/app/inventory/logic/Types.ts";

native/app/inventory/pages/InventoryPage.tsx

@@ -144,14 +144,11 @@ export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashLis
                   />
                 }
                 onLoad={() => {
-                  if (index === pageData.length - 1) {
-                    const p1 = useGGStore.getState().appStartupTime;
-                    const p2 = performance.now();
-                    console.log("load time", `${(p2 - p1).toFixed(4)} ms`);
+                  if (index === useGGStore.getState().currentListIndex) {
                     setPageReady(true);
                     jumpToCharacterRef.current();
                     opacity.value = withSpring(1, {
-                      duration: 750,
+                      duration: 1250,
                       reduceMotion: ReduceMotion.System,
                     });
                   }

native/app/inventory/pages/InventoryPages.tsx

@@ -8,7 +8,7 @@ import ArmorPage from "@/app/inventory/pages/ArmorPage.tsx";
 import GeneralPage from "@/app/inventory/pages/GeneralPage.tsx";
 import { InventoryPageEnums } from "@/app/inventory/logic/Helpers.ts";
 import { useGGStore } from "@/app/store/GGStore.ts";
-import OptionsMenu from "@/app/inventory/pages/OptionsMenu.tsx";
+import OptionsMenu from "@/components/ui/OptionsMenu.tsx";
 
 function pageEnumToPageName(pageEnum: InventoryPageEnums): string {
   switch (pageEnum) {
@@ -39,6 +39,7 @@ export default function InventoryPages() {
         detachInactiveScreens={true}
         initialRouteName={pageEnumToPageName(useGGStore.getState().currentInventoryPage)}
         screenOptions={() => ({
+          tabBarAllowFontScaling: false,
           lazy: false,
           tabBarActiveTintColor: "white",
           tabBarInactiveTintColor: "gray",

native/app/inventory/pages/SearchView.tsx

@@ -218,6 +218,7 @@ export default function SearchView() {
           >
             <Image source={SEARCH_ICON} style={{ width: 28, height: 28, opacity: 0.4, alignSelf: "center" }} />
             <TextInput
+              allowFontScaling={false}
               ref={textInputRef}
               keyboardAppearance="dark"
               cursorColor="white"

native/app/inventory/pages/TransferEquipButtons.tsx

@@ -1,6 +1,7 @@
-import { View, StyleSheet, Text, TouchableOpacity } from "react-native";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { Image } from "expo-image";
 
+import Text from "@/app/UI/Text.tsx";
 import type { DestinyItem } from "@/app/inventory/logic/Types.ts";
 import { useGGStore } from "@/app/store/GGStore.ts";
 import {

native/app/inventory/pages/details/DetailsView.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { StyleSheet, Text, View, Platform, ScrollView } from "react-native";
+import { StyleSheet, View, Platform, ScrollView } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { NavigationProp, RouteProp } from "@react-navigation/native";
 import { useIsFocused } from "@react-navigation/native";
@@ -13,6 +13,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { TouchableOpacity } from "react-native-gesture-handler";
 
+import Text from "@/app/UI/Text.tsx";
 import { useGGStore } from "@/app/store/GGStore.ts";
 import { startTransfer } from "@/app/inventory/logic/Transfer.ts";
 import { findDestinyItem } from "@/app/store/Account/AccountLogic";

native/app/inventory/pages/details/QuantityPicker.tsx

@@ -1,5 +1,6 @@
-import { View, Text, TextInput, StyleSheet } from "react-native";
+import { View, TextInput, StyleSheet } from "react-native";
 
+import Text from "@/app/UI/Text.tsx";
 import type { DestinyItem } from "@/app/inventory/logic/Types.ts";
 import { useGGStore } from "@/app/store/GGStore.ts";
 
@@ -16,6 +17,7 @@ export default function QuantityPicker({ destinyItem }: Props) {
       <Text style={styles.quantityTitle}>{"Quantity to transfer:"}</Text>
       <View style={styles.quantity}>
         <TextInput
+          allowFontScaling={false}
           inputMode="numeric"
           style={styles.quantityText}
           value={quantity === 0 ? "" : quantity.toString()}

native/app/inventory/pages/details/ScreenInfo.tsx

@@ -1,6 +1,7 @@
-import { View, StyleSheet, Platform, Dimensions, Text } from "react-native";
+import { View, StyleSheet, Platform, Dimensions } from "react-native";
 import { Image } from "expo-image";
 
+import Text from "@/app/UI/Text.tsx";
 import type { DestinyItem } from "@/app/inventory/logic/Types.ts";
 import {
   LARGE_CRAFTED,

native/app/inventory/sections/GuardianDetails.tsx

@@ -1,9 +1,10 @@
 import { useGGStore } from "@/app/store/GGStore.ts";
-import { StyleSheet, View, Text } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { Image } from "expo-image";
 import { POWER_LEVEL, VAULT_CHARACTER_ID } from "@/app/utilities/Constants.ts";
 import { getGuardianClassType, getGuardianRaceType } from "@/app/utilities/Helpers.ts";
 import { DESTINY_TEXT } from "@/app/store/Definitions.ts";
+import Text from "@/app/UI/Text.tsx";
 
 const styles = StyleSheet.create({
   root: {

native/app/inventory/sections/SeparatorUI.tsx

@@ -1,5 +1,6 @@
-import { StyleSheet, View, Text } from "react-native";
+import { StyleSheet, View } from "react-native";
 
+import Text from "@/app/UI/Text.tsx";
 import { SEPARATOR_HEIGHT, DEFAULT_MARGIN } from "@/app/utilities/UISize.ts";
 import { useGGStore } from "@/app/store/GGStore.ts";
 import { VAULT_CHARACTER_ID } from "@/app/utilities/Constants.ts";

native/app/stats/RecoilStat.tsx

@@ -1,5 +1,6 @@
-import { View, StyleSheet, Text } from "react-native";
+import { View, StyleSheet } from "react-native";
 import Svg, { Circle, Line, Path } from "react-native-svg";
+import Text from "@/app/UI/Text.tsx";
 
 /**
  * A value from 100 to -100 where positive is right and negative is left and zero is straight up

native/app/stats/ReusablePlugs.tsx

@@ -1,10 +1,11 @@
-import { View, StyleSheet, Text } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { useState } from "react";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
+import Text from "@/app/UI/Text.tsx";
 import { TierType } from "@/app/bungie/Enums.ts";
 import type { SocketCategory, SocketEntry } from "@/app/inventory/logic/Sockets.ts";
 import PerkCircle from "@/app/stats/PerkCircle.tsx";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
 type Props = {
   readonly socketCategory: SocketCategory;

native/app/stats/StatBars.tsx

@@ -1,5 +1,6 @@
-import { View, Text, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 
+import Text from "@/app/UI/Text.tsx";
 import { ItemSubType, ItemType, StatType } from "@/app/bungie/Enums.ts";
 import { ArmorStatInvestments } from "@/app/inventory/logic/Helpers.ts";
 import type { DestinyItem } from "@/app/inventory/logic/Types.ts";