Adding fix to keep Link icon centered in front of text, eliminating u…

…nnecessary custom scaling logic in Icon

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<IconProps> = ({
 }) => {
   const colorScheme = useColorScheme()
   const isDarkMode = colorScheme === 'dark'
-  const [fontScale, setFontScale] = useState<number>(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<SvgProps> = name ? IconMap[name] : svg
 
   if (typeof fill === 'object') {

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<LinkProps> = ({
   url,
 }) => {
   const colorScheme = useColorScheme()
+  const fontScale = useWindowDimensions().fontScale
   const isDarkMode = colorScheme === 'dark'
   const launchExternalLink = useExternalLink()
 
@@ -231,7 +233,7 @@ export const Link: FC<LinkProps> = ({
     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',
   }