set allowFontScaling to false in disclosure screens (#1843)

Co-authored-by: Justin Hernandez <justin.hernandez@self.xyz>

app/src/components/documents/IDSelectorItem.tsx

@@ -113,10 +113,16 @@ export const IDSelectorItem: React.FC<IDSelectorItemProps> = ({
               fontSize={18}
               fontWeight="500"
               color={textColor}
+              allowFontScaling={false}
             >
               {documentName}
             </Text>
-            <Text fontFamily={dinot} fontSize={14} color={subtitleColor}>
+            <Text
+              fontFamily={dinot}
+              fontSize={14}
+              color={subtitleColor}
+              allowFontScaling={false}
+            >
               {subtitleText}
             </Text>
           </YStack>

app/src/components/documents/IDSelectorSheet.tsx

@@ -81,6 +81,7 @@ export const IDSelectorSheet: React.FC<IDSelectorSheetProps> = ({
             fontWeight="500"
             color={black}
             marginBottom={32}
+            allowFontScaling={false}
           >
             Select an ID
           </Text>
@@ -140,6 +141,7 @@ export const IDSelectorSheet: React.FC<IDSelectorSheetProps> = ({
                 fontSize={18}
                 fontWeight="500"
                 color={black}
+                allowFontScaling={false}
               >
                 Dismiss
               </Text>
@@ -162,6 +164,7 @@ export const IDSelectorSheet: React.FC<IDSelectorSheetProps> = ({
                 fontSize={18}
                 fontWeight="500"
                 color={white}
+                allowFontScaling={false}
               >
                 Select
               </Text>

app/src/components/proof-request/BottomActionBar.tsx

@@ -92,6 +92,7 @@ export const BottomActionBar: React.FC<BottomActionBarProps> = ({
               fontSize={18}
               color={proofRequestColors.slate900}
               numberOfLines={1}
+              allowFontScaling={false}
             >
               {selectedDocumentName}
             </Text>
@@ -135,6 +136,7 @@ export const BottomActionBar: React.FC<BottomActionBarProps> = ({
                 fontSize={18}
                 color={proofRequestColors.white}
                 textAlign="center"
+                allowFontScaling={false}
               >
                 Select
               </Text>

app/src/components/proof-request/ConnectedWalletBadge.tsx

@@ -56,6 +56,7 @@ export const ConnectedWalletBadge: React.FC<ConnectedWalletBadgeProps> = ({
           fontSize={12}
           color={proofRequestColors.white}
           textTransform="uppercase"
+          allowFontScaling={false}
         >
           {label}
         </Text>
@@ -68,6 +69,7 @@ export const ConnectedWalletBadge: React.FC<ConnectedWalletBadgeProps> = ({
           fontSize={12}
           color={proofRequestColors.white}
           textAlign="right"
+          allowFontScaling={false}
           testID={`${testID}-address`}
         >
           {truncateAddress(address)}

app/src/components/proof-request/DisclosureItem.tsx

@@ -62,6 +62,7 @@ export const DisclosureItem: React.FC<DisclosureItemProps> = ({
           color={proofRequestColors.slate900}
           textTransform="uppercase"
           letterSpacing={0.48}
+          allowFontScaling={false}
           testID={`${testID}-text`}
         >
           {text}

app/src/components/proof-request/ProofMetadataBar.tsx

@@ -41,6 +41,7 @@ export const ProofMetadataBar: React.FC<ProofMetadataBarProps> = ({
             fontWeight="500"
             color={proofRequestColors.slate400}
             textTransform="uppercase"
+            allowFontScaling={false}
           >
             Proofs Requested
           </Text>
@@ -52,6 +53,7 @@ export const ProofMetadataBar: React.FC<ProofMetadataBarProps> = ({
           fontSize={12}
           fontWeight="500"
           color={proofRequestColors.slate400}
+          allowFontScaling={false}
         >
           •
         </Text>
@@ -62,6 +64,7 @@ export const ProofMetadataBar: React.FC<ProofMetadataBarProps> = ({
           fontSize={12}
           fontWeight="500"
           color={proofRequestColors.slate400}
+          allowFontScaling={false}
           testID={`${testID}-timestamp`}
         >
           {timestamp}

app/src/components/proof-request/ProofRequestCard.tsx

@@ -68,18 +68,34 @@ export const ProofRequestCard: React.FC<ProofRequestCardProps> = ({
   // Build request message with highlighted app name and document type
   const requestMessage = (
     <>
-      <Text color={proofRequestColors.white} fontFamily={dinot}>
+      <Text
+        color={proofRequestColors.white}
+        fontFamily={dinot}
+        allowFontScaling={false}
+      >
         {appName}
       </Text>
-      <Text color={proofRequestColors.slate400} fontFamily={dinot}>
+      <Text
+        color={proofRequestColors.slate400}
+        fontFamily={dinot}
+        allowFontScaling={false}
+      >
         {
           ' is requesting access to the following information from your verified '
         }
       </Text>
-      <Text color={proofRequestColors.white} fontFamily={dinot}>
+      <Text
+        color={proofRequestColors.white}
+        fontFamily={dinot}
+        allowFontScaling={false}
+      >
         {documentType}
       </Text>
-      <Text color={proofRequestColors.slate400} fontFamily={dinot}>
+      <Text
+        color={proofRequestColors.slate400}
+        fontFamily={dinot}
+        allowFontScaling={false}
+      >
         .
       </Text>
     </>

app/src/components/proof-request/ProofRequestHeader.tsx

@@ -61,12 +61,13 @@ export const ProofRequestHeader: React.FC<ProofRequestHeaderProps> = ({
             />
           </View>
         )}
-        <YStack>
+        <YStack flexShrink={1}>
           <Text
             fontFamily={advercase}
             fontSize={28}
             color={proofRequestColors.white}
             letterSpacing={1}
+            allowFontScaling={false}
             testID={`${testID}-app-name`}
           >
             {appName}
@@ -77,6 +78,7 @@ export const ProofRequestHeader: React.FC<ProofRequestHeaderProps> = ({
                 fontFamily={plexMono}
                 fontSize={12}
                 color={proofRequestColors.zinc500}
+                allowFontScaling={false}
                 testID={`${testID}-app-url`}
                 numberOfLines={1}
                 ellipsizeMode="middle"
@@ -95,6 +97,7 @@ export const ProofRequestHeader: React.FC<ProofRequestHeaderProps> = ({
         color={proofRequestColors.slate400}
         lineHeight={24}
         minHeight={75}
+        allowFontScaling={false}
         testID={`${testID}-request-message`}
       >
         {requestMessage}

packages/mobile-sdk-alpha/src/components/buttons/AbstractButton.tsx

@@ -111,7 +111,9 @@ export default function AbstractButton({
       ]}
     >
       {animatedComponent}
-      <Text style={[styles.text, { color, fontSize: fontSize ?? 18 }]}>{children}</Text>
+      <Text allowFontScaling={false} style={[styles.text, { color, fontSize: fontSize ?? 18 }]}>
+        {children}
+      </Text>
     </Pressable>
   );
 }

packages/mobile-sdk-alpha/src/components/typography/Description.tsx

@@ -14,7 +14,12 @@ type DescriptionProps = TextProps & {
 
 const Description = ({ children, style, color, ...props }: DescriptionProps) => {
   return (
-    <Text {...props} textBreakStrategy="balanced" style={[styles.description, color ? { color } : {}, style]}>
+    <Text
+      {...props}
+      allowFontScaling={false}
+      textBreakStrategy="balanced"
+      style={[styles.description, color ? { color } : {}, style]}
+    >
       {children}
     </Text>
   );