Skip to content

Commit d1e1e8c

Browse files
swansontecswansontec
committed
Fix animated icon glitches
Swapping the eye icon was leading to color glitches, due to some bug deep within react-native-reanimated. The solution involves rendering a single `Animated.Text` component, and simply changing the text content inside. This avoids re-wiring the Reanimated dependency graph, which is what seems to be causing the problem. We achieve this with *almost* the same icon API as before by adding an `off` property to the eye icon, to switch between the two variants. We also refactor the animated icon implementation to use a raw text element, instead of the react-native-vector-icon wrapper component.
1 parent 435537d commit d1e1e8c

File tree

7 files changed

+122
-182
lines changed

7 files changed

+122
-182
lines changed

‎src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -704,25 +704,14 @@ exports[`CategoryModal should render with a subcategory 1`] = `
704704
}
705705
>
706706
<Text
707-
adjustsFontSizeToFit={true}
708-
allowFontScaling={false}
709707
style={
710-
[
711-
{
712-
"color": undefined,
713-
"fontSize": 12,
714-
},
715-
{
716-
"color": "#FFFFFF",
717-
"fontSize": 22,
718-
},
719-
{
720-
"fontFamily": "anticon",
721-
"fontStyle": "normal",
722-
"fontWeight": "normal",
723-
},
724-
{},
725-
]
708+
{
709+
"color": "#FFFFFF",
710+
"fontFamily": "anticon",
711+
"fontSize": 22,
712+
"fontStyle": "normal",
713+
"fontWeight": "normal",
714+
}
726715
}
727716
>
728717
@@ -2135,25 +2124,14 @@ exports[`CategoryModal should render with an empty subcategory 1`] = `
21352124
}
21362125
>
21372126
<Text
2138-
adjustsFontSizeToFit={true}
2139-
allowFontScaling={false}
21402127
style={
2141-
[
2142-
{
2143-
"color": undefined,
2144-
"fontSize": 12,
2145-
},
2146-
{
2147-
"color": "#FFFFFF",
2148-
"fontSize": 0,
2149-
},
2150-
{
2151-
"fontFamily": "anticon",
2152-
"fontStyle": "normal",
2153-
"fontWeight": "normal",
2154-
},
2155-
{},
2156-
]
2128+
{
2129+
"color": "#FFFFFF",
2130+
"fontFamily": "anticon",
2131+
"fontSize": 0,
2132+
"fontStyle": "normal",
2133+
"fontWeight": "normal",
2134+
}
21572135
}
21582136
>
21592137

‎src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -209,25 +209,14 @@ exports[`WalletListModal should render with loading props 1`] = `
209209
}
210210
>
211211
<Text
212-
adjustsFontSizeToFit={true}
213-
allowFontScaling={false}
214212
style={
215-
[
216-
{
217-
"color": undefined,
218-
"fontSize": 12,
219-
},
220-
{
221-
"color": "#FFFFFF",
222-
"fontSize": 22,
223-
},
224-
{
225-
"fontFamily": "anticon",
226-
"fontStyle": "normal",
227-
"fontWeight": "normal",
228-
},
229-
{},
230-
]
213+
{
214+
"color": "#FFFFFF",
215+
"fontFamily": "anticon",
216+
"fontSize": 22,
217+
"fontStyle": "normal",
218+
"fontWeight": "normal",
219+
}
231220
}
232221
>
233222
@@ -392,25 +381,14 @@ exports[`WalletListModal should render with loading props 1`] = `
392381
}
393382
>
394383
<Text
395-
adjustsFontSizeToFit={true}
396-
allowFontScaling={false}
397384
style={
398-
[
399-
{
400-
"color": undefined,
401-
"fontSize": 12,
402-
},
403-
{
404-
"color": "#FFFFFF",
405-
"fontSize": 0,
406-
},
407-
{
408-
"fontFamily": "anticon",
409-
"fontStyle": "normal",
410-
"fontWeight": "normal",
411-
},
412-
{},
413-
]
385+
{
386+
"color": "#FFFFFF",
387+
"fontFamily": "anticon",
388+
"fontSize": 0,
389+
"fontStyle": "normal",
390+
"fontWeight": "normal",
391+
}
414392
}
415393
>
416394

‎src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -639,25 +639,14 @@ exports[`CreateWalletAccountSelect renders 1`] = `
639639
}
640640
>
641641
<Text
642-
adjustsFontSizeToFit={true}
643-
allowFontScaling={false}
644642
style={
645-
[
646-
{
647-
"color": undefined,
648-
"fontSize": 12,
649-
},
650-
{
651-
"color": "#FFFFFF",
652-
"fontSize": 0,
653-
},
654-
{
655-
"fontFamily": "anticon",
656-
"fontStyle": "normal",
657-
"fontWeight": "normal",
658-
},
659-
{},
660-
]
643+
{
644+
"color": "#FFFFFF",
645+
"fontFamily": "anticon",
646+
"fontSize": 0,
647+
"fontStyle": "normal",
648+
"fontWeight": "normal",
649+
}
661650
}
662651
>
663652

‎src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -613,25 +613,14 @@ exports[`CreateWalletImportScene should render with loading props 1`] = `
613613
}
614614
>
615615
<Text
616-
adjustsFontSizeToFit={true}
617-
allowFontScaling={false}
618616
style={
619-
[
620-
{
621-
"color": undefined,
622-
"fontSize": 12,
623-
},
624-
{
625-
"color": "#FFFFFF",
626-
"fontSize": 0,
627-
},
628-
{
629-
"fontFamily": "anticon",
630-
"fontStyle": "normal",
631-
"fontWeight": "normal",
632-
},
633-
{},
634-
]
617+
{
618+
"color": "#FFFFFF",
619+
"fontFamily": "anticon",
620+
"fontSize": 0,
621+
"fontStyle": "normal",
622+
"fontWeight": "normal",
623+
}
635624
}
636625
>
637626

‎src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -379,25 +379,14 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = `
379379
}
380380
>
381381
<Text
382-
adjustsFontSizeToFit={true}
383-
allowFontScaling={false}
384382
style={
385-
[
386-
{
387-
"color": undefined,
388-
"fontSize": 12,
389-
},
390-
{
391-
"color": "#FFFFFF",
392-
"fontSize": 22,
393-
},
394-
{
395-
"fontFamily": "anticon",
396-
"fontStyle": "normal",
397-
"fontWeight": "normal",
398-
},
399-
{},
400-
]
383+
{
384+
"color": "#FFFFFF",
385+
"fontFamily": "anticon",
386+
"fontSize": 22,
387+
"fontStyle": "normal",
388+
"fontWeight": "normal",
389+
}
401390
}
402391
>
403392
@@ -563,25 +552,14 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = `
563552
}
564553
>
565554
<Text
566-
adjustsFontSizeToFit={true}
567-
allowFontScaling={false}
568555
style={
569-
[
570-
{
571-
"color": undefined,
572-
"fontSize": 12,
573-
},
574-
{
575-
"color": "#FFFFFF",
576-
"fontSize": 0,
577-
},
578-
{
579-
"fontFamily": "anticon",
580-
"fontStyle": "normal",
581-
"fontWeight": "normal",
582-
},
583-
{},
584-
]
556+
{
557+
"color": "#FFFFFF",
558+
"fontFamily": "anticon",
559+
"fontSize": 0,
560+
"fontStyle": "normal",
561+
"fontWeight": "normal",
562+
}
585563
}
586564
>
587565

0 commit comments

Comments
 (0)