-
Notifications
You must be signed in to change notification settings - Fork 80
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
### Description Adds the tab navigator and associated icons. Behavior is enabled with the `use_tab_navigator` feature gate. Please disregard the header display as this will be covered in ACT-1108. | Android | iOS 15 Pro Max - Large Font | iOS SE (3rd Generation) | | ----- | ----- | ----- | | ![](https://github.com/valora-inc/wallet/assets/26950305/e65dbbd2-c449-4b17-8b7b-904bfa3463f9 "Android Assets") | ![](https://github.com/valora-inc/wallet/assets/26950305/d74ae00e-4ae8-4ae2-9a4b-bb54377da375 "iOS 15 Pro Max Assets") | ![](https://github.com/valora-inc/wallet/assets/26950305/ee815632-29ee-46de-9145-8a9c420ac01a "iOS SE (3rd Generation) Assets") | ### Test plan - [x] Tested locally on iOS with feature flag enabled and disabled - [x] Tested locally on Android with feature flag enabled and disabled - [x] Unit tests updated ### Related issues - Fixes ACT-1103 ### Backwards compatibility Yes - behind the `use_tab_navigator` feature gate. ### Network scalability N/A --------- Co-authored-by: Satish Ravi <satish.ravi@valoraapp.com>
- Loading branch information
1 parent
df00a4d
commit d2ae03d
Showing
17 changed files
with
207 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import * as React from 'react' | ||
import Svg, { Path } from 'react-native-svg' | ||
|
||
interface Props { | ||
color?: string | ||
size?: number | ||
} | ||
|
||
const Discover = ({ color, size }: Props) => ( | ||
<Svg width={size} height={size} viewBox="0 0 20 20" fill="none"> | ||
<Path | ||
fill={color} | ||
d="M15.417 14.492a1.672 1.672 0 0 0-1.584-1.159H13v-2.5a.833.833 0 0 0-.833-.833h-5V8.333h1.666a.833.833 0 0 0 .834-.833V5.833h1.666A1.667 1.667 0 0 0 13 4.167v-.342a6.654 6.654 0 0 1 2.417 10.667Zm-5.75 2.116A6.657 6.657 0 0 1 3.833 10c0-.517.067-1.017.175-1.492L8 12.5v.833A1.667 1.667 0 0 0 9.667 15M10.5 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Z" | ||
/> | ||
</Svg> | ||
) | ||
export default Discover |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import * as React from 'react' | ||
import Svg, { Path } from 'react-native-svg' | ||
|
||
interface Props { | ||
color?: string | ||
size?: number | ||
} | ||
|
||
const Home = ({ color, size }: Props) => ( | ||
<Svg width={size} height={size} viewBox="0 0 20 20" fill="none"> | ||
<Path | ||
fill={color} | ||
d="M11.844 15.809c.603-4.704 2.814-7.38 6.156-9.807L16.291 3.75c-2.186 1.676-4.572 4.053-5.678 7.33-.904-2.677-2.789-5.028-5.83-7.33L3 6.052c3.794 2.702 5.704 5.729 6.231 9.757h2.613Z" | ||
/> | ||
</Svg> | ||
) | ||
export default Home |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import * as React from 'react' | ||
import Svg, { Path } from 'react-native-svg' | ||
|
||
interface Props { | ||
color?: string | ||
size?: number | ||
} | ||
|
||
const Wallet = ({ color, size }: Props) => ( | ||
<Svg width={size} height={size} viewBox="0 0 20 20" fill="none"> | ||
<Path | ||
fill={color} | ||
d="M13.333 11.25c.361 0 .66-.118.896-.354s.354-.535.354-.896-.118-.66-.354-.896a1.214 1.214 0 0 0-.896-.354c-.36 0-.66.118-.896.354a1.214 1.214 0 0 0-.354.896c0 .361.118.66.354.896.237.236.535.354.896.354ZM4.167 17.5c-.459 0-.851-.163-1.178-.49a1.602 1.602 0 0 1-.489-1.177V4.167c0-.459.163-.851.49-1.178.327-.326.719-.49 1.177-.489h11.666c.459 0 .851.163 1.178.49.326.327.49.719.489 1.177V6.25h-1.667V4.167H4.167v11.666h11.666V13.75H17.5v2.083c0 .459-.163.851-.49 1.178-.327.326-.719.49-1.177.489H4.167Zm6.666-3.333c-.458 0-.85-.164-1.177-.49a1.602 1.602 0 0 1-.49-1.177v-5c0-.458.164-.85.49-1.178.327-.326.72-.49 1.177-.489h5.834c.458 0 .85.164 1.177.49.327.327.49.72.49 1.177v5c0 .458-.164.85-.49 1.178-.327.326-.72.49-1.177.489h-5.834Zm5.834-1.667v-5h-5.834v5h5.834Z" | ||
/> | ||
</Svg> | ||
) | ||
export default Wallet |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' | ||
import { NativeStackScreenProps } from '@react-navigation/native-stack' | ||
import React from 'react' | ||
import { useTranslation } from 'react-i18next' | ||
import { StyleSheet } from 'react-native' | ||
import DAppsExplorerScreenSearchFilter from 'src/dappsExplorer/DAppsExplorerScreenSearchFilter' | ||
import WalletHome from 'src/home/WalletHome' | ||
import Discover from 'src/icons/navigator/Discover' | ||
import Home from 'src/icons/navigator/Home' | ||
import Wallet from 'src/icons/navigator/Wallet' | ||
import { Screens } from 'src/navigator/Screens' | ||
import { StackParamList } from 'src/navigator/types' | ||
import Colors from 'src/styles/colors' | ||
import { typeScale } from 'src/styles/fonts' | ||
import { Spacing } from 'src/styles/styles' | ||
import variables from 'src/styles/variables' | ||
import AssetsScreen from 'src/tokens/Assets' | ||
|
||
const Tab = createBottomTabNavigator() | ||
|
||
type Props = NativeStackScreenProps<StackParamList, Screens.TabNavigator> | ||
|
||
export default function TabNavigator({ route }: Props) { | ||
const initialScreen = route.params?.initialScreen ?? Screens.TabHome | ||
const { t } = useTranslation() | ||
|
||
return ( | ||
<Tab.Navigator | ||
initialRouteName={initialScreen} | ||
screenOptions={{ | ||
headerShown: true, | ||
headerShadowVisible: false, | ||
headerTitleAllowFontScaling: false, | ||
tabBarActiveTintColor: Colors.black, | ||
tabBarInactiveTintColor: Colors.gray3, | ||
tabBarLabelStyle: styles.label, | ||
tabBarItemStyle: styles.tabBarItem, | ||
tabBarAllowFontScaling: false, | ||
tabBarStyle: { | ||
height: variables.height * 0.1, | ||
}, | ||
}} | ||
> | ||
<Tab.Screen | ||
// TODO(act-1104) new assets screen | ||
name={Screens.TabWallet} | ||
// @ts-expect-error Type '{}' is missing the following properties from type 'Props': navigation, route | ||
component={AssetsScreen} | ||
options={{ | ||
tabBarLabel: t('bottomTabsNavigator.wallet.tabName') as string, | ||
tabBarIcon: Wallet, | ||
}} | ||
/> | ||
<Tab.Screen | ||
// TODO(act-1105) new home tab screen | ||
name={Screens.TabHome} | ||
component={WalletHome} | ||
options={{ | ||
freezeOnBlur: false, | ||
lazy: false, | ||
tabBarLabel: t('bottomTabsNavigator.home.tabName') as string, | ||
tabBarIcon: Home, | ||
}} | ||
/> | ||
<Tab.Screen | ||
// TODO(act-1106) discover tab screen | ||
name={Screens.TabDiscover} | ||
component={DAppsExplorerScreenSearchFilter} | ||
options={{ | ||
tabBarLabel: t('bottomTabsNavigator.discover.tabName') as string, | ||
tabBarIcon: Discover, | ||
}} | ||
/> | ||
</Tab.Navigator> | ||
) | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
label: { | ||
...typeScale.labelSemiBoldSmall, | ||
}, | ||
tabBarItem: { | ||
paddingVertical: Spacing.Smallest8, | ||
}, | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters