diff --git a/src/alf/util/dimensions.ts b/src/alf/util/dimensions.ts new file mode 100644 index 0000000000..31af2ffa99 --- /dev/null +++ b/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 +} diff --git a/src/components/ProfileBadges.tsx b/src/components/ProfileBadges.tsx index cb257e78b6..b4684cc2f2 100644 --- a/src/components/ProfileBadges.tsx +++ b/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()