Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(mobile): native tabbar #15754

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat(mobile): native tabbar #15754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions suite-native/app/app.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ const getPlugins = (): ExpoPlugins => {
},
ios: {
deploymentTarget: '15.1',
useFrameworks: 'static',
},
},
],
Expand All @@ -135,6 +136,7 @@ const getPlugins = (): ExpoPlugins => {
subdomains: '*',
},
],
'react-native-bottom-tabs',
];

return [
Expand Down
3 changes: 3 additions & 0 deletions suite-native/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"reverse-ports": "adb reverse tcp:8081 tcp:8081 && adb reverse tcp:21325 tcp:21325 && adb reverse tcp:19121 tcp:19121"
},
"dependencies": {
"@bottom-tabs/react-navigation": "^0.7.6",
"@gorhom/bottom-sheet": "5.0.5",
"@mobily/ts-belt": "^3.13.1",
"@react-native-community/netinfo": "^11.4.1",
Expand All @@ -36,6 +37,7 @@
"@suite-common/analytics": "workspace:*",
"@suite-common/connect-init": "workspace:*",
"@suite-common/formatters": "workspace:*",
"@suite-common/icons": "workspace:*",
"@suite-common/message-system": "workspace:*",
"@suite-common/redux-utils": "workspace:*",
"@suite-common/suite-constants": "workspace:*",
Expand Down Expand Up @@ -110,6 +112,7 @@
"react": "18.2.0",
"react-intl": "^6.6.8",
"react-native": "0.76.1",
"react-native-bottom-tabs": "^0.7.6",
"react-native-gesture-handler": "^2.21.0",
"react-native-keyboard-aware-scroll-view": "0.9.5",
"react-native-mmkv": "2.12.2",
Expand Down
83 changes: 68 additions & 15 deletions suite-native/app/src/navigation/AppTabNavigator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,87 @@
import { BottomTabBarProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';

import { ReceiveStackNavigator } from '@suite-native/module-receive';
import { HomeStackNavigator } from '@suite-native/module-home';
import { AccountsStackNavigator } from '@suite-native/module-accounts-management';
import { SettingsStackNavigator } from '@suite-native/module-settings';
import { AppTabsParamList, AppTabsRoutes, TabBar } from '@suite-native/navigation';
import { AppTabsRoutes } from '@suite-native/navigation';
import { useHandleDeviceRequestsPassphrase } from '@suite-native/device-authorization';
import { useNativeStyles } from '@trezor/styles';
import { useTranslate } from '@suite-native/intl';

import { rootTabsOptions } from './routes';

const Tab = createBottomTabNavigator<AppTabsParamList>();
const Tab = createNativeBottomTabNavigator();

export const AppTabNavigator = () => {
useHandleDeviceRequestsPassphrase();
const { utils } = useNativeStyles();
const { translate } = useTranslate();

return (
<Tab.Navigator
initialRouteName={AppTabsRoutes.HomeStack}
screenOptions={{
headerShown: false,
unmountOnBlur: true,
tabLabelStyle={{
fontFamily: utils.typography.label.fontFamily,
fontSize: utils.typography.label.fontSize,
}}
tabBar={(props: BottomTabBarProps) => (
<TabBar tabItemOptions={rootTabsOptions} {...props} />
)}
barTintColor={utils.colors.backgroundSurfaceElevation0}
tabBarActiveTintColor={utils.colors.iconPrimaryDefault}
activeIndicatorColor={utils.colors.backgroundNeutralDisabled}
tabBarInactiveTintColor={utils.colors.iconDisabled}
// disable page animations because it looks strange with device switcher
// we should try to move device switcher outside of navigator
disablePageAnimations
labeled={true}
>
<Tab.Screen name={AppTabsRoutes.HomeStack} component={HomeStackNavigator} />
<Tab.Screen name={AppTabsRoutes.AccountsStack} component={AccountsStackNavigator} />
<Tab.Screen name={AppTabsRoutes.ReceiveStack} component={ReceiveStackNavigator} />
<Tab.Screen name={AppTabsRoutes.SettingsStack} component={SettingsStackNavigator} />
<Tab.Screen
name={AppTabsRoutes.HomeStack}
component={HomeStackNavigator}
options={{
tabBarIcon: ({ focused }: { focused: boolean }) =>
focused
? require('@suite-common/icons/assets/houseFilled.svg')
: require('@suite-common/icons/assets/house.svg'),
tabBarLabel: translate('tabBar.home'),
tabBarButtonTestID: `@tabBar/${AppTabsRoutes.HomeStack}`,
}}
testID={`@tabBar/${AppTabsRoutes.HomeStack}`}
/>
<Tab.Screen
name={AppTabsRoutes.AccountsStack}
component={AccountsStackNavigator}
options={{
tabBarIcon: ({ focused }: { focused: boolean }) =>
focused
? require('@suite-common/icons/assets/discoverFilled.svg')
: require('@suite-common/icons/assets/discover.svg'),
tabBarLabel: translate('tabBar.accounts'),
tabBarButtonTestID: `@tabBar/${AppTabsRoutes.AccountsStack}`,
}}
testID={`@tabBar/${AppTabsRoutes.AccountsStack}`}
/>
<Tab.Screen
name={AppTabsRoutes.ReceiveStack}
component={ReceiveStackNavigator}
options={{
// filled arrow looks ugly, let's use the same icon for both focused and non-focused
tabBarIcon: () => require('@suite-common/icons/assets/arrowLineDown.svg'),
tabBarLabel: translate('tabBar.receive'),
tabBarButtonTestID: `@tabBar/${AppTabsRoutes.ReceiveStack}`,
}}
testID={`@tabBar/${AppTabsRoutes.ReceiveStack}`}
/>
<Tab.Screen
name={AppTabsRoutes.SettingsStack}
component={SettingsStackNavigator}
options={{
tabBarIcon: ({ focused }: { focused: boolean }) =>
focused
? require('@suite-common/icons/assets/gearFilled.svg')
: require('@suite-common/icons/assets/gear.svg'),
tabBarLabel: translate('tabBar.settings'),
tabBarButtonTestID: `@tabBar/${AppTabsRoutes.SettingsStack}`,
}}
testID={`@tabBar/${AppTabsRoutes.SettingsStack}`}
/>
</Tab.Navigator>
);
};
1 change: 1 addition & 0 deletions suite-native/app/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
{
"path": "../../suite-common/formatters"
},
{ "path": "../../suite-common/icons" },
{
"path": "../../suite-common/message-system"
},
Expand Down
6 changes: 6 additions & 0 deletions suite-native/intl/src/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ export const en = {
offline: "You're offline.",
tokens: '+ Tokens',
},
tabBar: {
home: 'Home',
accounts: 'Accounts',
receive: 'Receive',
settings: 'Settings',
},
messageSystem: {
killswitch: {
title: 'Update required',
Expand Down
37 changes: 37 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1867,6 +1867,20 @@ __metadata:
languageName: node
linkType: hard

"@bottom-tabs/react-navigation@npm:^0.7.6":
version: 0.7.6
resolution: "@bottom-tabs/react-navigation@npm:0.7.6"
dependencies:
color: "npm:^4.2.3"
peerDependencies:
"@react-navigation/native": ">=7"
react: "*"
react-native: "*"
react-native-bottom-tabs: "*"
checksum: 10/f8b073763aac499d5189a13bdaad7d955acb288a7719d8d2e4e86903692ba5f66d1f2788bb2b9e0a662aadede1a31b9f45b62af94e706f30d5485f17f4bb18a1
languageName: node
linkType: hard

"@braintree/sanitize-url@npm:^6.0.1":
version: 6.0.4
resolution: "@braintree/sanitize-url@npm:6.0.4"
Expand Down Expand Up @@ -9905,6 +9919,7 @@ __metadata:
dependencies:
"@babel/core": "npm:^7.20.0"
"@babel/plugin-transform-export-namespace-from": "npm:^7.23.4"
"@bottom-tabs/react-navigation": "npm:^0.7.6"
"@config-plugins/detox": "npm:^8.0.0"
"@currents/cmd": "npm:^1.6.0"
"@gorhom/bottom-sheet": "npm:5.0.5"
Expand All @@ -9924,6 +9939,7 @@ __metadata:
"@suite-common/analytics": "workspace:*"
"@suite-common/connect-init": "workspace:*"
"@suite-common/formatters": "workspace:*"
"@suite-common/icons": "workspace:*"
"@suite-common/message-system": "workspace:*"
"@suite-common/redux-utils": "workspace:*"
"@suite-common/suite-constants": "workspace:*"
Expand Down Expand Up @@ -10009,6 +10025,7 @@ __metadata:
react: "npm:18.2.0"
react-intl: "npm:^6.6.8"
react-native: "npm:0.76.1"
react-native-bottom-tabs: "npm:^0.7.6"
react-native-gesture-handler: "npm:^2.21.0"
react-native-keyboard-aware-scroll-view: "npm:0.9.5"
react-native-mmkv: "npm:2.12.2"
Expand Down Expand Up @@ -35813,6 +35830,19 @@ __metadata:
languageName: node
linkType: hard

"react-native-bottom-tabs@npm:^0.7.6":
version: 0.7.6
resolution: "react-native-bottom-tabs@npm:0.7.6"
dependencies:
sf-symbols-typescript: "npm:^2.0.0"
use-latest-callback: "npm:^0.2.1"
peerDependencies:
react: "*"
react-native: "*"
checksum: 10/29d41409b861dee18d789f676191048a6a3c8d68342252a5234da08953be46f695155baacd8909543aeb3b9f79f6576578f0f631626296079b4b1a7fc1ee31e1
languageName: node
linkType: hard

"react-native-gesture-handler@npm:^2.21.0":
version: 2.21.0
resolution: "react-native-gesture-handler@npm:2.21.0"
Expand Down Expand Up @@ -38112,6 +38142,13 @@ __metadata:
languageName: node
linkType: hard

"sf-symbols-typescript@npm:^2.0.0":
version: 2.0.0
resolution: "sf-symbols-typescript@npm:2.0.0"
checksum: 10/dde81c01265bdff16f527e1242af03793460c3c5f34ca6950ab1ca73a3bccd54ebabfcd56961658e72f94baac06ad620134a0bc03b0674dd543d4883c7d5e18f
languageName: node
linkType: hard

"sha.js@npm:^2.3.6, sha.js@npm:^2.4.0, sha.js@npm:^2.4.8":
version: 2.4.11
resolution: "sha.js@npm:2.4.11"
Expand Down
Loading