diff --git a/packages/components/src/components/Icon/Icon.tsx b/packages/components/src/components/Icon/Icon.tsx index 97bced5c..8447fceb 100644 --- a/packages/components/src/components/Icon/Icon.tsx +++ b/packages/components/src/components/Icon/Icon.tsx @@ -1,7 +1,7 @@ -import { AppState, AppStateStatus, ColorValue, PixelRatio } from 'react-native' +import { ColorValue, useWindowDimensions } from 'react-native' import { Colors } from '@department-of-veterans-affairs/mobile-tokens' import { SvgProps } from 'react-native-svg' -import React, { FC, useEffect, useState } from 'react' +import React, { FC } from 'react' import { useColorScheme } from '../../utils' @@ -214,26 +214,9 @@ export const Icon: FC = ({ }) => { const colorScheme = useColorScheme() const isDarkMode = colorScheme === 'dark' - const [fontScale, setFontScale] = useState(PixelRatio.getFontScale()) + const fontScale = useWindowDimensions().fontScale const fs = (val: number) => fontScale * val - useEffect(() => { - // Listener for the current app state, updates the font scale when app state - // is active and the font scale has changed - const sub = AppState.addEventListener( - 'change', - (newState: AppStateStatus): void => { - if (newState === 'active') { - const fontScaleUpdated = PixelRatio.getFontScale() - if (fontScale !== fontScaleUpdated) { - setFontScale(fontScaleUpdated) - } - } - }, - ) - return (): void => sub?.remove() - }, [fontScale]) - const _Icon: FC = name ? IconMap[name] : svg if (typeof fill === 'object') { diff --git a/packages/components/src/components/Link/Link.tsx b/packages/components/src/components/Link/Link.tsx index cabb6cc8..fa3f6dac 100644 --- a/packages/components/src/components/Link/Link.tsx +++ b/packages/components/src/components/Link/Link.tsx @@ -8,6 +8,7 @@ import { TextStyle, View, ViewStyle, + useWindowDimensions, } from 'react-native' import React, { FC } from 'react' @@ -139,6 +140,7 @@ export const Link: FC = ({ url, }) => { const colorScheme = useColorScheme() + const fontScale = useWindowDimensions().fontScale const isDarkMode = colorScheme === 'dark' const launchExternalLink = useExternalLink() @@ -231,7 +233,7 @@ export const Link: FC = ({ marginRight: 5, // Spacer to text // Below keeps icon aligned with first row of text, centered, and scalable alignSelf: 'flex-start', - minHeight: 30, + minHeight: 30 * fontScale, alignItems: 'center', justifyContent: 'center', }