Remove useWindowDimensions from ProfileBadges (#10738)

src/alf/util/dimensions.ts

@@ -0,0 +1,19 @@
+import {useEffect, useState} from 'react'
+import {Dimensions} from 'react-native'
+
+/**
+ * Same as `useWindowDimensions().fontScale`, but avoids rerendering
+ * whenever the screen size changes
+ */
+export function useNativeFontScale() {
+  const [fontScale, setFontScale] = useState(Dimensions.get('window').fontScale)
+
+  useEffect(() => {
+    const sub = Dimensions.addEventListener('change', evt => {
+      setFontScale(evt.window.fontScale)
+    })
+    return () => sub.remove()
+  }, [])
+
+  return fontScale
+}

src/components/ProfileBadges.tsx

@@ -1,7 +1,8 @@
-import {useWindowDimensions, View} from 'react-native'
+import {View} from 'react-native'
 
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {atoms as a, useAlf, type ViewStyleProp} from '#/alf'
+import {useNativeFontScale} from '#/alf/util/dimensions'
 import {BotBadge, BotBadgeButton, isBotAccount} from '#/components/BotBadge'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
@@ -40,7 +41,7 @@ export function ProfileBadges({
 }) {
   const shadowed = useProfileShadow(profile)
   const verification = useSimpleVerificationState({profile})
-  const {fontScale: nativeScaleMultiplier} = useWindowDimensions()
+  const nativeScaleMultiplier = useNativeFontScale()
   const {
     fonts: {scaleMultiplier: alfScaleMultiplier},
   } = useAlf()