Fix crashes caused by zero or negative fontSize values

samholmes · samholmes · commit b659e4f9388c · 2025-08-19T14:38:53.000-07:00
React Native crashes when fontSize is 0 or negative. Added safeFontSize utility to ensure minimum fontSize of 1 pixel. Fixed potentially dangerous calculations in IconBadge, FilledTextInput, FiatIcon, and ThemedIcons components.
diff --git a/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap b/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap
@@ -146,7 +146,7 @@ exports[`FilledTextInput should render with some props 1`] = `
             "value": {
               "color": "rgba(255, 255, 255, 0.5019607843137255)",
               "fontFamily": "anticon",
-              "fontSize": 0,
+              "fontSize": 1,
               "fontStyle": "normal",
               "fontWeight": "normal",
             },
@@ -158,7 +158,7 @@ exports[`FilledTextInput should render with some props 1`] = `
             {
               "color": "rgba(255, 255, 255, 0.5019607843137255)",
               "fontFamily": "anticon",
-              "fontSize": 0,
+              "fontSize": 1,
               "fontStyle": "normal",
               "fontWeight": "normal",
             },
diff --git a/src/__tests__/modals/__snapshots__/AddressModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/AddressModal.test.tsx.snap
@@ -660,7 +660,7 @@ exports[`AddressModalComponent should render with loaded props 1`] = `
                   "value": {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "anticon",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
@@ -672,7 +672,7 @@ exports[`AddressModalComponent should render with loaded props 1`] = `
                   {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "anticon",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
diff --git a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
@@ -2514,7 +2514,7 @@ exports[`CategoryModal should render with an empty subcategory 1`] = `
                   "value": {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "anticon",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
@@ -2526,7 +2526,7 @@ exports[`CategoryModal should render with an empty subcategory 1`] = `
                   {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "anticon",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
diff --git a/src/__tests__/modals/__snapshots__/CountryListModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CountryListModal.test.tsx.snap
@@ -661,7 +661,7 @@ exports[`CountryListModal should render with a country list 1`] = `
                   "value": {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "anticon",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
@@ -673,7 +673,7 @@ exports[`CountryListModal should render with a country list 1`] = `
                   {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "anticon",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
diff --git a/src/__tests__/modals/__snapshots__/LogsModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/LogsModal.test.tsx.snap
@@ -839,7 +839,7 @@ exports[`LogsModal should render with a logs modal 1`] = `
                       "value": {
                         "color": "rgba(255, 255, 255, 0.5019607843137255)",
                         "fontFamily": "anticon",
-                        "fontSize": 0,
+                        "fontSize": 1,
                         "fontStyle": "normal",
                         "fontWeight": "normal",
                       },
@@ -851,7 +851,7 @@ exports[`LogsModal should render with a logs modal 1`] = `
                       {
                         "color": "rgba(255, 255, 255, 0.5019607843137255)",
                         "fontFamily": "anticon",
-                        "fontSize": 0,
+                        "fontSize": 1,
                         "fontStyle": "normal",
                         "fontWeight": "normal",
                       },
diff --git a/src/__tests__/modals/__snapshots__/PasswordReminderModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/PasswordReminderModal.test.tsx.snap
@@ -767,7 +767,7 @@ Please enter your password below. A successful verification will prevent this wa
                   "value": {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "anticon",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
@@ -779,7 +779,7 @@ Please enter your password below. A successful verification will prevent this wa
                   {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "anticon",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
diff --git a/src/__tests__/modals/__snapshots__/TextInputModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/TextInputModal.test.tsx.snap
@@ -584,7 +584,7 @@ exports[`TextInputModal should render with a blank input field 1`] = `
                     "value": {
                       "color": "rgba(255, 255, 255, 0.5019607843137255)",
                       "fontFamily": "anticon",
-                      "fontSize": 0,
+                      "fontSize": 1,
                       "fontStyle": "normal",
                       "fontWeight": "normal",
                     },
@@ -596,7 +596,7 @@ exports[`TextInputModal should render with a blank input field 1`] = `
                     {
                       "color": "rgba(255, 255, 255, 0.5019607843137255)",
                       "fontFamily": "anticon",
-                      "fontSize": 0,
+                      "fontSize": 1,
                       "fontStyle": "normal",
                       "fontWeight": "normal",
                     },
diff --git a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap
@@ -482,7 +482,7 @@ exports[`WalletListModal should render with loading props 1`] = `
                       "value": {
                         "color": "rgba(255, 255, 255, 0.5019607843137255)",
                         "fontFamily": "Material Icons",
-                        "fontSize": 0,
+                        "fontSize": 1,
                         "fontStyle": "normal",
                         "fontWeight": "normal",
                       },
@@ -494,7 +494,7 @@ exports[`WalletListModal should render with loading props 1`] = `
                       {
                         "color": "rgba(255, 255, 255, 0.5019607843137255)",
                         "fontFamily": "Material Icons",
-                        "fontSize": 0,
+                        "fontSize": 1,
                         "fontStyle": "normal",
                         "fontWeight": "normal",
                       },
@@ -665,7 +665,7 @@ exports[`WalletListModal should render with loading props 1`] = `
                       "value": {
                         "color": "rgba(255, 255, 255, 0.5019607843137255)",
                         "fontFamily": "anticon",
-                        "fontSize": 0,
+                        "fontSize": 1,
                         "fontStyle": "normal",
                         "fontWeight": "normal",
                       },
@@ -677,7 +677,7 @@ exports[`WalletListModal should render with loading props 1`] = `
                       {
                         "color": "rgba(255, 255, 255, 0.5019607843137255)",
                         "fontFamily": "anticon",
-                        "fontSize": 0,
+                        "fontSize": 1,
                         "fontStyle": "normal",
                         "fontWeight": "normal",
                       },
diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap
@@ -845,7 +845,7 @@ exports[`CreateWalletAccountSelect renders 1`] = `
                     "value": {
                       "color": "rgba(255, 255, 255, 0.5019607843137255)",
                       "fontFamily": "anticon",
-                      "fontSize": 0,
+                      "fontSize": 1,
                       "fontStyle": "normal",
                       "fontWeight": "normal",
                     },
@@ -857,7 +857,7 @@ exports[`CreateWalletAccountSelect renders 1`] = `
                     {
                       "color": "rgba(255, 255, 255, 0.5019607843137255)",
                       "fontFamily": "anticon",
-                      "fontSize": 0,
+                      "fontSize": 1,
                       "fontStyle": "normal",
                       "fontWeight": "normal",
                     },
diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap
@@ -813,7 +813,7 @@ exports[`CreateWalletImportScene should render with loading props 1`] = `
                       "value": {
                         "color": "rgba(255, 255, 255, 0.5019607843137255)",
                         "fontFamily": "anticon",
-                        "fontSize": 0,
+                        "fontSize": 1,
                         "fontStyle": "normal",
                         "fontWeight": "normal",
                       },
@@ -825,7 +825,7 @@ exports[`CreateWalletImportScene should render with loading props 1`] = `
                       {
                         "color": "rgba(255, 255, 255, 0.5019607843137255)",
                         "fontFamily": "anticon",
-                        "fontSize": 0,
+                        "fontSize": 1,
                         "fontStyle": "normal",
                         "fontWeight": "normal",
                       },
diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap
@@ -588,7 +588,7 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = `
                   "value": {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "Material Icons",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
@@ -600,7 +600,7 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = `
                   {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "Material Icons",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
@@ -772,7 +772,7 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = `
                   "value": {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "anticon",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
@@ -784,7 +784,7 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = `
                   {
                     "color": "rgba(255, 255, 255, 0.5019607843137255)",
                     "fontFamily": "anticon",
-                    "fontSize": 0,
+                    "fontSize": 1,
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                   },
diff --git a/src/__tests__/scenes/__snapshots__/DefaultFiatSettingScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/DefaultFiatSettingScene.test.tsx.snap
@@ -587,7 +587,7 @@ exports[`DefaultFiatSettingComponent should render with loading props 1`] = `
                     "value": {
                       "color": "rgba(255, 255, 255, 0.5019607843137255)",
                       "fontFamily": "Material Icons",
-                      "fontSize": 0,
+                      "fontSize": 1,
                       "fontStyle": "normal",
                       "fontWeight": "normal",
                     },
@@ -599,7 +599,7 @@ exports[`DefaultFiatSettingComponent should render with loading props 1`] = `
                     {
                       "color": "rgba(255, 255, 255, 0.5019607843137255)",
                       "fontFamily": "Material Icons",
-                      "fontSize": 0,
+                      "fontSize": 1,
                       "fontStyle": "normal",
                       "fontWeight": "normal",
                     },
@@ -772,7 +772,7 @@ exports[`DefaultFiatSettingComponent should render with loading props 1`] = `
                     "value": {
                       "color": "rgba(255, 255, 255, 0.5019607843137255)",
                       "fontFamily": "anticon",
-                      "fontSize": 0,
+                      "fontSize": 1,
                       "fontStyle": "normal",
                       "fontWeight": "normal",
                     },
@@ -784,7 +784,7 @@ exports[`DefaultFiatSettingComponent should render with loading props 1`] = `
                     {
                       "color": "rgba(255, 255, 255, 0.5019607843137255)",
                       "fontFamily": "anticon",
-                      "fontSize": 0,
+                      "fontSize": 1,
                       "fontStyle": "normal",
                       "fontWeight": "normal",
                     },
diff --git a/src/components/icons/FiatIcon.tsx b/src/components/icons/FiatIcon.tsx
@@ -4,6 +4,7 @@ import FastImage from 'react-native-fast-image'
 
 import { getFiatSymbol } from '../../constants/WalletAndCurrencyConstants'
 import { getCurrencyIconUris } from '../../util/CdnUris'
+import { safeFontSize } from '../../util/safeFontSize'
 import { fixSides, mapSides, sidesToMargin } from '../../util/sides'
 import { fixFiatCurrencyCode } from '../../util/utils'
 import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
@@ -54,7 +55,9 @@ export const FiatIconComponent = (props: Props) => {
   }, [marginRem, sizeRem, styles.fiatIcon, theme])
 
   const textStyle = React.useMemo(() => {
-    const fiatSymbolSizing = { fontSize: theme.rem(sizeRem * 0.625) }
+    const fiatSymbolSizing = {
+      fontSize: safeFontSize(theme.rem(sizeRem * 0.625))
+    }
 
     return [styles.fiatSymbol, fiatSymbolSizing]
   }, [sizeRem, styles.fiatSymbol, theme])
diff --git a/src/components/icons/IconBadge.tsx b/src/components/icons/IconBadge.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { Platform, type StyleProp, View, type ViewStyle } from 'react-native'
 
+import { safeFontSize } from '../../util/safeFontSize'
 import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
 import { EdgeText } from '../themed/EdgeText'
 
@@ -83,13 +84,13 @@ const getStyles = cacheStyles((theme: Theme) => {
       justifyContent: 'center'
     },
     textIos: {
-      fontSize: theme.rem(0.5) - 1,
+      fontSize: safeFontSize(theme.rem(0.5) - 1),
       fontFamily: theme.fontFaceBold,
       marginLeft: 2,
       marginRight: 1
     },
     textAndroid: {
-      fontSize: theme.rem(0.5) - 1,
+      fontSize: safeFontSize(theme.rem(0.5) - 1),
       fontFamily: theme.fontFaceBold,
       marginTop: 1.5,
       marginHorizontal: 2
diff --git a/src/components/icons/ThemedIcons.tsx b/src/components/icons/ThemedIcons.tsx
@@ -9,6 +9,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons'
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 
 import { Fontello } from '../../assets/vector'
+import { safeFontSize } from '../../util/safeFontSize'
 import { useTheme } from '../services/ThemeContext'
 
 //
@@ -52,7 +53,7 @@ function AnimatedFontIcon(
   const style = useAnimatedStyle(() => ({
     color: color?.value ?? defaultColor,
     fontFamily,
-    fontSize: size?.value ?? defaultSize,
+    fontSize: safeFontSize(size?.value ?? defaultSize ?? 1),
     fontStyle: 'normal',
     fontWeight: 'normal'
   }))
diff --git a/src/components/themed/FilledTextInput.tsx b/src/components/themed/FilledTextInput.tsx
@@ -37,6 +37,7 @@ import {
   formatToNativeNumber,
   isValidInput
 } from '../../locales/intl'
+import { safeFontSize } from '../../util/safeFontSize'
 import { EdgeTouchableWithoutFeedback } from '../common/EdgeTouchableWithoutFeedback'
 import { styled, styledWithRef } from '../hoc/styled'
 import {
@@ -725,7 +726,7 @@ const PlaceholderText = styled(Animated.Text)<{
   theme =>
     ({ disableAnimation, focusAnimation, scale, shift, textsizeRem }) => {
       const fontSizeBase = theme.rem(textsizeRem ?? scale.value)
-      const fontSizeScaled = theme.rem(scale.value) * 0.75
+      const fontSizeScaled = safeFontSize(theme.rem(scale.value) * 0.75)
       const interpolatePlaceholderTextColor = useAnimatedColorInterpolateFn(
         theme.textInputPlaceholderColor,
         theme.textInputPlaceholderColorFocused,
@@ -785,7 +786,7 @@ const StyledAnimatedTextInput = styledWithRef(AnimatedTextInput)<{
     },
     useAnimatedStyle(() => ({
       color: interpolateTextColor(focusAnimation, disableAnimation),
-      fontSize: scale.value * rem
+      fontSize: safeFontSize(scale.value * rem)
     }))
   ]
 })
diff --git a/src/util/safeFontSize.ts b/src/util/safeFontSize.ts
@@ -0,0 +1,31 @@
+/**
+ * Ensures a font size value is safe for React Native rendering.
+ * React Native crashes when fontSize is 0 or negative on both iOS and Android.
+ *
+ * @param size - The font size value to validate
+ * @param minimumSize - The minimum allowed font size (default: 1)
+ * @returns A safe font size value that won't crash the app
+ */
+export const safeFontSize = (size: number, minimumSize: number = 1): number => {
+  // Handle non-finite values (NaN, Infinity, -Infinity)
+  if (!Number.isFinite(size)) {
+    if (__DEV__) {
+      console.warn(
+        `safeFontSize: Invalid fontSize value ${size}, using minimum ${minimumSize}`
+      )
+    }
+    return minimumSize
+  }
+
+  // Ensure size is not zero or negative
+  if (size <= 0) {
+    if (__DEV__) {
+      console.warn(
+        `safeFontSize: fontSize ${size} is <= 0, using minimum ${minimumSize}`
+      )
+    }
+    return minimumSize
+  }
+
+  return size
+}
diff --git a/yarn.lock b/yarn.lock
