fix(mobile): icons in Modal (#10637)

suite-common/icons/src/components/CryptoIcon.tsx

@@ -5,6 +5,7 @@ import { TokenAddress } from '@suite-common/wallet-types';
 
 import { CryptoIconName, cryptoIcons } from '../icons';
 import { genericTokenIcon, TokenIconName, tokenIcons } from '../tokenIcons';
+import { useRerenderOnAppStateChange } from '../useRerenderOnAppState';
 
 export type CoinSymbol = CryptoIconName | TokenAddress;
 
@@ -30,6 +31,8 @@ const getIconFile = (symbol: CoinSymbol) => {
 };
 
 export const CryptoIcon = ({ symbol, size = 'small' }: CryptoIconProps) => {
+    useRerenderOnAppStateChange();
+
     const iconFile = getIconFile(symbol);
     const svg = useSVG(iconFile);
     const sizeNumber = cryptoIconSizes[size];

suite-common/icons/src/components/FlagIcon.tsx

@@ -1,6 +1,7 @@
 import { Canvas, ImageSVG, useSVG } from '@shopify/react-native-skia';
 
 import { FlagIconName, flagIcons } from '../icons';
+import { useRerenderOnAppStateChange } from '../useRerenderOnAppState';
 
 type FlagIconProps = {
     name: FlagIconName;
@@ -16,6 +17,8 @@ const flagIconSizes = {
 type FlagIconSize = keyof typeof flagIconSizes;
 
 export const FlagIcon = ({ name, size = 'medium' }: FlagIconProps) => {
+    useRerenderOnAppStateChange();
+
     const svg = useSVG(flagIcons[name]);
     const sizeNumber = flagIconSizes[size];
     return (

suite-common/icons/src/components/Icon.tsx

@@ -6,6 +6,7 @@ import { useNativeStyles } from '@trezor/styles';
 import { Color, Colors, CSSColor } from '@trezor/theme';
 
 import { IconName, icons } from '../icons';
+import { useRerenderOnAppStateChange } from '../useRerenderOnAppState';
 
 export type IconColor = 'svgSource' | Color | CSSColor | SharedValue<CSSColor>;
 
@@ -34,7 +35,7 @@ const isReanimatedSharedValue = (value: IconColor): value is SharedValue<CSSColo
     return typeof value === 'object' && 'value' in value;
 };
 
-export function isCSSColor(value: any): value is CSSColor {
+function isCSSColor(value: any): value is CSSColor {
     'worklet';
 
     return (
@@ -60,6 +61,8 @@ const getColorCode = (color: Exclude<IconColor, 'svgSource'>, themeColors: Color
 };
 
 export const Icon = ({ name, customSize, size = 'large', color = 'iconDefault' }: IconProps) => {
+    useRerenderOnAppStateChange();
+
     const svg = useSVG(icons[name]);
     const {
         utils: { colors },

suite-common/icons/src/useRerenderOnAppState.ios.ts

@@ -0,0 +1,4 @@
+/**
+ * Hotfix is not needed for iOS.
+ */
+export const useRerenderOnAppStateChange = () => {};

suite-common/icons/src/useRerenderOnAppState.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { AppState } from 'react-native';
+
+/**
+ * It's necessary because Skia Android bug when Icon components are used in Modal component.
+ * After app is suspended to background and then resumed, icons are not rendered.
+ * This is a workaround for this issue.
+ * @see https://github.com/Shopify/react-native-skia/issues/2135
+ */
+export const useRerenderOnAppStateChange = () => {
+    const [_, setRerender] = useState(0);
+
+    useEffect(() => {
+        const handleChange = () => {
+            setRerender(prev => prev + 1);
+        };
+        const subscription = AppState.addEventListener('change', handleChange);
+
+        return () => subscription.remove();
+    }, []);
+};