feat(suite-native): use filled icons for focused items in tab bar

trezor · Dec 17, 2024 · b03b6c3 · b03b6c3
1 parent fb4ae53
commit b03b6c3
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 53 deletions.
diff --git a/suite-common/icons/generateIconFont.ts b/suite-common/icons/generateIconFont.ts
@@ -51,6 +51,7 @@ const usedIcons = [
     'database',
     'detective',
     'discover',
+    'discoverFilled',
     'eye',
     'eyeSlash',
     'facebookLogo',
@@ -60,9 +61,11 @@ const usedIcons = [
     'flag',
     'flagCheckered',
     'gear',
+    'gearFilled',
     'githubLogo',
     'handPalm',
     'house',
+    'houseFilled',
     'image',
     'info',
     'lifebuoy',

diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json
@@ -44,53 +44,57 @@
     "lifebuoy": 61739,
     "info": 61740,
     "image": 61741,
-    "house": 61742,
-    "handPalm": 61743,
-    "githubLogo": 61744,
-    "gear": 61745,
-    "flagCheckered": 61746,
-    "flag": 61747,
-    "fingerprintSimple": 61748,
-    "fingerprint": 61749,
-    "filePdf": 61750,
-    "facebookLogo": 61751,
-    "eyeSlash": 61752,
-    "eye": 61753,
-    "discover": 61754,
-    "detective": 61755,
-    "database": 61756,
-    "cpu": 61757,
-    "copy": 61758,
-    "coins": 61759,
-    "coinVerticalCheck": 61760,
-    "clockClockwise": 61761,
-    "circleDashed": 61762,
-    "checks": 61763,
-    "checkCircleFilled": 61764,
-    "checkCircle": 61765,
-    "check": 61766,
-    "chatCircle": 61767,
-    "change": 61768,
-    "caretUpFilled": 61769,
-    "caretUpDown": 61770,
-    "caretUp": 61771,
-    "caretRight": 61772,
-    "caretLeft": 61773,
-    "caretDownFilled": 61774,
-    "caretDown": 61775,
-    "caretCircleRight": 61776,
-    "calendar": 61777,
-    "bugBeetle": 61778,
-    "bookmarkSimple": 61779,
-    "backspace": 61780,
-    "arrowsCounterClockwise": 61781,
-    "arrowUpRight": 61782,
-    "arrowUp": 61783,
-    "arrowURightDown": 61784,
-    "arrowSquareOut": 61785,
-    "arrowRight": 61786,
-    "arrowLineUpRight": 61787,
-    "arrowLineUp": 61788,
-    "arrowLineDown": 61789,
-    "arrowDown": 61790
+    "houseFilled": 61742,
+    "house": 61743,
+    "handPalm": 61744,
+    "githubLogo": 61745,
+    "gearFilled": 61746,
+    "gear": 61747,
+    "flagCheckered": 61748,
+    "flag": 61749,
+    "fingerprintSimple": 61750,
+    "fingerprint": 61751,
+    "filePdf": 61752,
+    "facebookLogo": 61753,
+    "eyeSlash": 61754,
+    "eye": 61755,
+    "discoverFilled": 61756,
+    "discover": 61757,
+    "detective": 61758,
+    "database": 61759,
+    "cpu": 61760,
+    "copy": 61761,
+    "coins": 61762,
+    "coinVerticalCheck": 61763,
+    "clockClockwise": 61764,
+    "circleDashed": 61765,
+    "checks": 61766,
+    "checkCircleFilled": 61767,
+    "checkCircle": 61768,
+    "check": 61769,
+    "chatCircle": 61770,
+    "change": 61771,
+    "caretUpFilled": 61772,
+    "caretUpDown": 61773,
+    "caretUp": 61774,
+    "caretRight": 61775,
+    "caretLeft": 61776,
+    "caretDownFilled": 61777,
+    "caretDown": 61778,
+    "caretCircleRight": 61779,
+    "calendar": 61780,
+    "bugBeetle": 61781,
+    "bookmarkSimple": 61782,
+    "backspace": 61783,
+    "arrowsCounterClockwise": 61784,
+    "arrowUpRight": 61785,
+    "arrowUp": 61786,
+    "arrowURightDown": 61787,
+    "arrowSquareOut": 61788,
+    "arrowRight": 61789,
+    "arrowLineUpRight": 61790,
+    "arrowLineUp": 61791,
+    "arrowLineDownFilled": 61792,
+    "arrowLineDown": 61793,
+    "arrowDown": 61794
 }
diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf
diff --git a/suite-native/app/app.config.ts b/suite-native/app/app.config.ts
@@ -173,7 +173,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
         slug: appSlugs[buildType],
         owner: appOwners[buildType],
         version: suiteNativeVersion,
-        runtimeVersion: '20',
+        runtimeVersion: '21',
         ...(buildType === 'production'
             ? {}
             : {

diff --git a/suite-native/app/src/navigation/enhanceTabOption.ts b/suite-native/app/src/navigation/enhanceTabOption.ts
@@ -4,6 +4,7 @@ import { AppTabsParamList } from '@suite-native/navigation';
 type TabOption<ParamList extends AppTabsParamList, RouteName extends keyof ParamList> = {
     routeName: RouteName;
     iconName: IconName;
+    focusedIconName: IconName;
     label: string;
     params?: ParamList[RouteName];
 };
@@ -14,12 +15,14 @@ export const enhanceTabOption = <
 >({
     routeName,
     iconName,
+    focusedIconName,
     label,
     params,
 }: TabOption<ParamList, RouteName>) => ({
     [routeName]: {
         routeName,
         iconName,
+        focusedIconName,
         label,
         params,
     },

diff --git a/suite-native/app/src/navigation/routes.ts b/suite-native/app/src/navigation/routes.ts
@@ -5,12 +5,14 @@ import { enhanceTabOption } from './enhanceTabOption';
 const homeStack = enhanceTabOption({
     routeName: AppTabsRoutes.HomeStack,
     iconName: 'house',
+    focusedIconName: 'houseFilled',
     label: 'Home',
 });
 
 const accountsStack = enhanceTabOption({
     routeName: AppTabsRoutes.AccountsStack,
     iconName: 'discover',
+    focusedIconName: 'discoverFilled',
     label: 'My assets',
     params: {
         screen: AccountsStackRoutes.Accounts,
@@ -21,11 +23,13 @@ const receiveStack = enhanceTabOption({
     routeName: AppTabsRoutes.ReceiveStack,
     label: 'Receive',
     iconName: 'arrowLineDown',
+    focusedIconName: 'arrowLineDown',
 });
 
 const settingsStack = enhanceTabOption({
     routeName: AppTabsRoutes.SettingsStack,
     iconName: 'gear',
+    focusedIconName: 'gearFilled',
     label: 'Settings',
 });
 

diff --git a/suite-native/navigation/src/components/TabBar.tsx b/suite-native/navigation/src/components/TabBar.tsx
@@ -43,7 +43,8 @@ export const TabBar = ({ state, navigation, tabItemOptions }: TabBarProps) => {
         >
             {state.routes.map((route, index) => {
                 const isFocused = state.index === index;
-                const { routeName, iconName, label, params } = tabItemOptions[route.name];
+                const { routeName, iconName, focusedIconName, label, params } =
+                    tabItemOptions[route.name];
 
                 const handleTabBarItemPress = () => {
                     const event = navigation.emit({
@@ -62,6 +63,7 @@ export const TabBar = ({ state, navigation, tabItemOptions }: TabBarProps) => {
                         key={route.key}
                         isFocused={isFocused}
                         iconName={iconName}
+                        focusedIconName={focusedIconName}
                         title={label}
                         onPress={handleTabBarItemPress}
                         testID={route.name}

diff --git a/suite-native/navigation/src/components/TabBarItem.tsx b/suite-native/navigation/src/components/TabBarItem.tsx
@@ -8,6 +8,7 @@ type TabBarItemProps = {
     isFocused: boolean;
     onPress: () => void;
     iconName: IconName;
+    focusedIconName: IconName;
     title?: string;
     testID: string;
 };
@@ -26,7 +27,14 @@ const tabBarItemContainerStyle = prepareNativeStyle(utils => ({
 
 const TAB_BAR_ITEM_HORIZONTAL_HIT_SLOP = 15;
 
-export const TabBarItem = ({ isFocused, onPress, iconName, title, testID }: TabBarItemProps) => {
+export const TabBarItem = ({
+    isFocused,
+    onPress,
+    iconName,
+    focusedIconName,
+    title,
+    testID,
+}: TabBarItemProps) => {
     const { applyStyle } = useNativeStyles();
 
     return (
@@ -49,7 +57,7 @@ export const TabBarItem = ({ isFocused, onPress, iconName, title, testID }: TabB
         >
             <View style={applyStyle(tabBarItemContainerStyle)}>
                 <Icon
-                    name={iconName}
+                    name={isFocused ? focusedIconName : iconName}
                     size="large"
                     color={isFocused ? 'iconPrimaryDefault' : 'iconDisabled'}
                 />

diff --git a/suite-native/navigation/src/types.tsx b/suite-native/navigation/src/types.tsx
@@ -64,6 +64,7 @@ export type TabsOptions = {
     [routeName: string]: {
         routeName: string;
         iconName: IconName;
+        focusedIconName: IconName;
         label: string;
         params?: Record<string, unknown>;
     };