Skip to content

Commit a4c7123

Browse files
NodoniskoNodonisko
committed
feat(mobile): native tabbar
1 parent 7ec9813 commit a4c7123

File tree

6 files changed

+99
-15
lines changed

6 files changed

+99
-15
lines changed

‎suite-native/app/app.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ const getPlugins = (): ExpoPlugins => {
114114
},
115115
ios: {
116116
deploymentTarget: '15.1',
117+
useFrameworks: 'static',
117118
},
118119
},
119120
],
@@ -131,6 +132,7 @@ const getPlugins = (): ExpoPlugins => {
131132
subdomains: '*',
132133
},
133134
],
135+
'react-native-bottom-tabs',
134136
];
135137

136138
return [

‎suite-native/app/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"reverse-ports": "adb reverse tcp:8081 tcp:8081 && adb reverse tcp:21325 tcp:21325 && adb reverse tcp:19121 tcp:19121"
2222
},
2323
"dependencies": {
24+
"@bottom-tabs/react-navigation": "^0.7.1",
2425
"@gorhom/bottom-sheet": "5.0.5",
2526
"@mobily/ts-belt": "^3.13.1",
2627
"@react-native-community/netinfo": "^11.4.1",
@@ -36,6 +37,7 @@
3637
"@suite-common/analytics": "workspace:*",
3738
"@suite-common/connect-init": "workspace:*",
3839
"@suite-common/formatters": "workspace:*",
40+
"@suite-common/icons": "workspace:*",
3941
"@suite-common/message-system": "workspace:*",
4042
"@suite-common/redux-utils": "workspace:*",
4143
"@suite-common/suite-constants": "workspace:*",
@@ -107,6 +109,7 @@
107109
"react": "18.2.0",
108110
"react-intl": "^6.6.8",
109111
"react-native": "0.76.1",
112+
"react-native-bottom-tabs": "^0.7.1",
110113
"react-native-gesture-handler": "^2.21.0",
111114
"react-native-keyboard-aware-scroll-view": "0.9.5",
112115
"react-native-mmkv": "2.12.2",

‎suite-native/app/src/navigation/AppTabNavigator.tsx‎

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,69 @@
1-
import { BottomTabBarProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
1+
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
22

33
import { ReceiveStackNavigator } from '@suite-native/module-receive';
44
import { HomeStackNavigator } from '@suite-native/module-home';
55
import { AccountsStackNavigator } from '@suite-native/module-accounts-management';
66
import { SettingsStackNavigator } from '@suite-native/module-settings';
7-
import { AppTabsParamList, AppTabsRoutes, TabBar } from '@suite-native/navigation';
7+
import { AppTabsRoutes } from '@suite-native/navigation';
88
import { useHandleDeviceRequestsPassphrase } from '@suite-native/device-authorization';
9+
import { useNativeStyles } from '@trezor/styles';
10+
import { useTranslate } from '@suite-native/intl';
911

10-
import { rootTabsOptions } from './routes';
11-
12-
const Tab = createBottomTabNavigator<AppTabsParamList>();
12+
const Tab = createNativeBottomTabNavigator();
1313

1414
export const AppTabNavigator = () => {
1515
useHandleDeviceRequestsPassphrase();
16+
const { utils } = useNativeStyles();
17+
const { translate } = useTranslate();
1618

1719
return (
1820
<Tab.Navigator
1921
initialRouteName={AppTabsRoutes.HomeStack}
20-
screenOptions={{
21-
headerShown: false,
22-
unmountOnBlur: true,
22+
tabLabelStyle={{
23+
fontFamily: utils.typography.label.fontFamily,
24+
fontSize: utils.typography.label.fontSize,
2325
}}
24-
tabBar={(props: BottomTabBarProps) => (
25-
<TabBar tabItemOptions={rootTabsOptions} {...props} />
26-
)}
26+
barTintColor={utils.colors.backgroundSurfaceElevation0}
27+
tabBarActiveTintColor={utils.colors.iconPrimaryDefault}
28+
activeIndicatorColor={utils.colors.backgroundNeutralDisabled}
29+
tabBarInactiveTintColor={utils.colors.iconDisabled}
30+
// disable page animations because it looks strange with device switcher
31+
// we should try to move device switcher outside of navigator
32+
disablePageAnimations
33+
labeled
2734
>
28-
<Tab.Screen name={AppTabsRoutes.HomeStack} component={HomeStackNavigator} />
29-
<Tab.Screen name={AppTabsRoutes.AccountsStack} component={AccountsStackNavigator} />
30-
<Tab.Screen name={AppTabsRoutes.ReceiveStack} component={ReceiveStackNavigator} />
31-
<Tab.Screen name={AppTabsRoutes.SettingsStack} component={SettingsStackNavigator} />
35+
<Tab.Screen
36+
name={AppTabsRoutes.HomeStack}
37+
component={HomeStackNavigator}
38+
options={{
39+
tabBarIcon: () => require('@suite-common/icons/assets/house.svg'),
40+
tabBarLabel: translate('tabBar.home'),
41+
}}
42+
/>
43+
<Tab.Screen
44+
name={AppTabsRoutes.AccountsStack}
45+
component={AccountsStackNavigator}
46+
options={{
47+
tabBarIcon: () => require('@suite-common/icons/assets/discover.svg'),
48+
tabBarLabel: translate('tabBar.accounts'),
49+
}}
50+
/>
51+
<Tab.Screen
52+
name={AppTabsRoutes.ReceiveStack}
53+
component={ReceiveStackNavigator}
54+
options={{
55+
tabBarIcon: () => require('@suite-common/icons/assets/arrowLineDown.svg'),
56+
tabBarLabel: translate('tabBar.receive'),
57+
}}
58+
/>
59+
<Tab.Screen
60+
name={AppTabsRoutes.SettingsStack}
61+
component={SettingsStackNavigator}
62+
options={{
63+
tabBarIcon: () => require('@suite-common/icons/assets/gear.svg'),
64+
tabBarLabel: translate('tabBar.settings'),
65+
}}
66+
/>
3267
</Tab.Navigator>
3368
);
3469
};

‎suite-native/app/tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
{
1212
"path": "../../suite-common/formatters"
1313
},
14+
{ "path": "../../suite-common/icons" },
1415
{
1516
"path": "../../suite-common/message-system"
1617
},

‎suite-native/intl/src/en.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ export const en = {
2727
offline: "You're offline.",
2828
tokens: '+ Tokens',
2929
},
30+
tabBar: {
31+
home: 'Home',
32+
accounts: 'Accounts',
33+
receive: 'Receive',
34+
settings: 'Settings',
35+
},
3036
messageSystem: {
3137
killswitch: {
3238
title: 'Update required',

‎yarn.lock‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1867,6 +1867,20 @@ __metadata:
18671867
languageName: node
18681868
linkType: hard
18691869

1870+
"@bottom-tabs/react-navigation@npm:^0.7.1":
1871+
version: 0.7.1
1872+
resolution: "@bottom-tabs/react-navigation@npm:0.7.1"
1873+
dependencies:
1874+
color: "npm:^4.2.3"
1875+
peerDependencies:
1876+
"@react-navigation/native": ">=7"
1877+
react: "*"
1878+
react-native: "*"
1879+
react-native-bottom-tabs: "*"
1880+
checksum: 10/112c599d392ca608bb9562f4d7de182e7a37ac897d22cb5fa921c6264eb6ccb30541cdab1a06e6f1fc361422e248fba6a2c76c686b2fe2360aab9dd625fe648a
1881+
languageName: node
1882+
linkType: hard
1883+
18701884
"@braintree/sanitize-url@npm:^6.0.1":
18711885
version: 6.0.4
18721886
resolution: "@braintree/sanitize-url@npm:6.0.4"
@@ -9640,6 +9654,7 @@ __metadata:
96409654
dependencies:
96419655
"@babel/core": "npm:^7.20.0"
96429656
"@babel/plugin-transform-export-namespace-from": "npm:^7.23.4"
9657+
"@bottom-tabs/react-navigation": "npm:^0.7.1"
96439658
"@config-plugins/detox": "npm:^8.0.0"
96449659
"@gorhom/bottom-sheet": "npm:5.0.5"
96459660
"@mobily/ts-belt": "npm:^3.13.1"
@@ -9657,6 +9672,7 @@ __metadata:
96579672
"@suite-common/analytics": "workspace:*"
96589673
"@suite-common/connect-init": "workspace:*"
96599674
"@suite-common/formatters": "workspace:*"
9675+
"@suite-common/icons": "workspace:*"
96609676
"@suite-common/message-system": "workspace:*"
96619677
"@suite-common/redux-utils": "workspace:*"
96629678
"@suite-common/suite-constants": "workspace:*"
@@ -9738,6 +9754,7 @@ __metadata:
97389754
react: "npm:18.2.0"
97399755
react-intl: "npm:^6.6.8"
97409756
react-native: "npm:0.76.1"
9757+
react-native-bottom-tabs: "npm:^0.7.1"
97419758
react-native-gesture-handler: "npm:^2.21.0"
97429759
react-native-keyboard-aware-scroll-view: "npm:0.9.5"
97439760
react-native-mmkv: "npm:2.12.2"
@@ -35197,6 +35214,19 @@ __metadata:
3519735214
languageName: node
3519835215
linkType: hard
3519935216

35217+
"react-native-bottom-tabs@npm:^0.7.1":
35218+
version: 0.7.1
35219+
resolution: "react-native-bottom-tabs@npm:0.7.1"
35220+
dependencies:
35221+
sf-symbols-typescript: "npm:^2.0.0"
35222+
use-latest-callback: "npm:^0.2.1"
35223+
peerDependencies:
35224+
react: "*"
35225+
react-native: "*"
35226+
checksum: 10/58cac47e9f81c44ebc7cae26406fcc3b13d43f88b122175de2c0328a87cb18bc9e89ba5341ba066c7f87bd3ecd81b5cbf38901f53b68a3836c08ceb6d69873e8
35227+
languageName: node
35228+
linkType: hard
35229+
3520035230
"react-native-gesture-handler@npm:^2.21.0":
3520135231
version: 2.21.0
3520235232
resolution: "react-native-gesture-handler@npm:2.21.0"
@@ -37473,6 +37503,13 @@ __metadata:
3747337503
languageName: node
3747437504
linkType: hard
3747537505

37506+
"sf-symbols-typescript@npm:^2.0.0":
37507+
version: 2.0.0
37508+
resolution: "sf-symbols-typescript@npm:2.0.0"
37509+
checksum: 10/dde81c01265bdff16f527e1242af03793460c3c5f34ca6950ab1ca73a3bccd54ebabfcd56961658e72f94baac06ad620134a0bc03b0674dd543d4883c7d5e18f
37510+
languageName: node
37511+
linkType: hard
37512+
3747637513
"sha.js@npm:^2.3.6, sha.js@npm:^2.4.0, sha.js@npm:^2.4.8":
3747737514
version: 2.4.11
3747837515
resolution: "sha.js@npm:2.4.11"

0 commit comments

Comments
 (0)