diff --git a/locales/base/translation.json b/locales/base/translation.json index a1518cbd2dd..218766a263f 100644 --- a/locales/base/translation.json +++ b/locales/base/translation.json @@ -2201,7 +2201,8 @@ "title": "Welcome" }, "discover": { - "tabName": "Discover" + "tabName": "Discover", + "title": "Discover" } }, "jumpstartStatus": { diff --git a/src/analytics/Events.tsx b/src/analytics/Events.tsx index a408200e168..7c9239c1796 100644 --- a/src/analytics/Events.tsx +++ b/src/analytics/Events.tsx @@ -34,6 +34,7 @@ export enum AppEvents { export enum HomeEvents { hamburger_tapped = 'hamburger_tapped', + account_circle_tapped = 'account_circle_tapped', drawer_navigation = 'drawer_navigation', drawer_address_copy = 'drawer_address_copy', profile_address_copy = 'profile_address_copy', diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx index acb5b5c88b8..8102376b6a4 100644 --- a/src/analytics/Properties.tsx +++ b/src/analytics/Properties.tsx @@ -154,6 +154,7 @@ interface AppEventsProperties { interface HomeEventsProperties { [HomeEvents.hamburger_tapped]: undefined + [HomeEvents.account_circle_tapped]: undefined [HomeEvents.drawer_navigation]: { navigateTo: string } diff --git a/src/analytics/docs.ts b/src/analytics/docs.ts index b699e18fc9d..ecbbf7203db 100644 --- a/src/analytics/docs.ts +++ b/src/analytics/docs.ts @@ -72,6 +72,7 @@ export const eventDocs: Record = { [AppEvents.multichain_beta_contact_support]: `When the user taps the Contact Support button on the multichain beta screen`, [AppEvents.handle_deeplink]: `When a deeplink that leads into the app is detected and handled`, [HomeEvents.hamburger_tapped]: ``, + [HomeEvents.account_circle_tapped]: `When the account circle used in the tab navigation is tapped`, [HomeEvents.drawer_navigation]: ``, [HomeEvents.drawer_address_copy]: ``, [HomeEvents.profile_address_copy]: `When a user copies their wallet address from the profile screen`, diff --git a/src/components/AccountCircleButton.tsx b/src/components/AccountCircleButton.tsx new file mode 100644 index 00000000000..995887ff5e8 --- /dev/null +++ b/src/components/AccountCircleButton.tsx @@ -0,0 +1,45 @@ +import React from 'react' +import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native' +import { HomeEvents } from 'src/analytics/Events' +import ValoraAnalytics from 'src/analytics/ValoraAnalytics' +import Touchable from 'src/components/Touchable' +import AccountCircle from 'src/icons/AccountCircle' +import { navigate } from 'src/navigator/NavigationService' +import { Screens } from 'src/navigator/Screens' +import { Spacing } from 'src/styles/styles' + +interface Props { + style?: StyleProp + size?: number + testID?: string +} + +export default function AccountCircleButton({ style, size, testID }: Props) { + const onPress = () => { + ValoraAnalytics.track(HomeEvents.account_circle_tapped) + navigate(Screens.ProfileMenu) + } + + return ( + + + + + + ) +} + +const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + alignItems: 'center', + }, + button: { + padding: Spacing.Small12, + }, +}) diff --git a/src/components/QrScanButton.tsx b/src/components/QrScanButton.tsx index f8e7f5d358a..df765ff30ee 100644 --- a/src/components/QrScanButton.tsx +++ b/src/components/QrScanButton.tsx @@ -1,11 +1,12 @@ import React from 'react' -import { StyleProp, ViewStyle } from 'react-native' +import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native' import { QrScreenEvents } from 'src/analytics/Events' import ValoraAnalytics from 'src/analytics/ValoraAnalytics' +import Touchable from 'src/components/Touchable' import ScanIcon from 'src/icons/ScanIcon' import { navigate } from 'src/navigator/NavigationService' import { Screens } from 'src/navigator/Screens' -import { TopBarIconButton } from 'src/navigator/TopBarButton' +import { Spacing } from 'src/styles/styles' interface Props { style?: StyleProp @@ -20,11 +21,25 @@ export default function QrScanButton({ style, size, testID }: Props) { } return ( - } - onPress={onPress} - style={style} - /> + + + + + ) } + +const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + alignItems: 'center', + }, + button: { + padding: Spacing.Small12, + }, +}) diff --git a/src/components/TokenBalance.tsx b/src/components/TokenBalance.tsx index 5d4190f8b2f..7a7b0abb092 100644 --- a/src/components/TokenBalance.tsx +++ b/src/components/TokenBalance.tsx @@ -167,7 +167,7 @@ export function AssetsTokenBalance({ isWalletTab, }: { showInfo: boolean - // temporary parameter while we build the tab navigator, should be cleaned up + // TODO(act-1133): temporary parameter while we build the tab navigator, should be cleaned up // when we remove the DrawerNavigator isWalletTab: boolean }) { diff --git a/src/dappsExplorer/DAppsExplorerScreenSearchFilter.tsx b/src/dappsExplorer/DAppsExplorerScreenSearchFilter.tsx index dc85641a046..4926710075f 100644 --- a/src/dappsExplorer/DAppsExplorerScreenSearchFilter.tsx +++ b/src/dappsExplorer/DAppsExplorerScreenSearchFilter.tsx @@ -1,9 +1,17 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack' import React, { useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import { RefreshControl, SectionList, SectionListProps, StyleSheet, Text, View } from 'react-native' +import { + LayoutChangeEvent, + RefreshControl, + SectionList, + SectionListProps, + StyleSheet, + Text, + View, +} from 'react-native' import { ScrollView } from 'react-native-gesture-handler' -import Animated from 'react-native-reanimated' +import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated' import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context' import { DappExplorerEvents } from 'src/analytics/Events' import ValoraAnalytics from 'src/analytics/ValoraAnalytics' @@ -31,10 +39,11 @@ import { currentLanguageSelector } from 'src/i18n/selectors' import DrawerTopBar from 'src/navigator/DrawerTopBar' import { styles as headerStyles } from 'src/navigator/Headers' import { Screens } from 'src/navigator/Screens' +import useScrollAwareHeader from 'src/navigator/ScrollAwareHeader' import { StackParamList } from 'src/navigator/types' import { useDispatch, useSelector } from 'src/redux/hooks' -import colors from 'src/styles/colors' -import fontStyles from 'src/styles/fonts' +import { Colors } from 'src/styles/colors' +import fontStyles, { typeScale } from 'src/styles/fonts' import { Spacing } from 'src/styles/styles' const AnimatedSectionList = @@ -52,21 +61,24 @@ type Props = NativeStackScreenProps< Screens.DAppsExplorerScreen | Screens.TabDiscover > -export function DAppsExplorerScreenSearchFilter({ route }: Props) { +export function DAppsExplorerScreenSearchFilter({ navigation, route }: Props) { const { t } = useTranslation() - // temporary parameter while we build the tab navigator, should be cleaned up + // TODO(act-1133): temporary parameter while we build the tab navigator, should be cleaned up // when we remove the drawer const isTabNavigator = !!route.params?.isTabNavigator const insets = useSafeAreaInsets() const sectionListRef = useRef(null) - const scrollPosition = useRef(new Animated.Value(0)).current + + // Old scroll handler for Drawer Header + const scrollPositionValue = useRef(new Animated.Value(0)).current + const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: scrollPositionValue } } }]) + const horizontalScrollView = useRef(null) const dappRankingsBottomSheetRef = useRef(null) - const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: scrollPosition } } }]) const dispatch = useDispatch() const loading = useSelector(dappsListLoadingSelector) const error = useSelector(dappsListErrorSelector) @@ -136,6 +148,26 @@ export function DAppsExplorerScreenSearchFilter({ route }: Props) { }) } + // Scroll Aware Header + const scrollPosition = useSharedValue(0) + const [titleHeight, setTitleHeight] = useState(0) + + const handleMeasureTitleHeight = (event: LayoutChangeEvent) => { + setTitleHeight(event.nativeEvent.layout.height) + } + + const handleScroll = useAnimatedScrollHandler((event) => { + scrollPosition.value = event.contentOffset.y + }) + + useScrollAwareHeader({ + navigation, + title: isTabNavigator ? t('bottomTabsNavigator.discover.title') : '', + scrollPosition, + startFadeInPosition: titleHeight - titleHeight * 0.33, + animationDistance: titleHeight * 0.33, + }) + const sections: SectionData[] = useMemo(() => { const dappsMatchingFilter = selectedFilter ? nonFavoriteDappsWithCategoryNames.filter((dapp) => selectedFilter.filterFn(dapp)) @@ -193,7 +225,7 @@ export function DAppsExplorerScreenSearchFilter({ route }: Props) { } middleElement={{t('dappsScreen.title')}} - scrollPosition={scrollPosition} + scrollPosition={scrollPositionValue} /> )} <> @@ -206,8 +238,8 @@ export function DAppsExplorerScreenSearchFilter({ route }: Props) { dispatch(fetchDappsList())} @@ -221,6 +253,11 @@ export function DAppsExplorerScreenSearchFilter({ route }: Props) { } ListHeaderComponent={ <> + {isTabNavigator && ( + + {t('bottomTabsNavigator.discover.title')} + + )} { @@ -228,7 +265,7 @@ export function DAppsExplorerScreenSearchFilter({ route }: Props) { }} value={searchTerm} multiline={false} - placeholderTextColor={colors.gray4} + placeholderTextColor={Colors.gray4} underlineColorAndroid="transparent" placeholder={t('dappsScreen.searchPlaceHolder') ?? undefined} showClearButton={true} @@ -237,8 +274,8 @@ export function DAppsExplorerScreenSearchFilter({ route }: Props) { @@ -252,7 +289,7 @@ export function DAppsExplorerScreenSearchFilter({ route }: Props) { // Workaround iOS setting an incorrect automatic inset at the top scrollIndicatorInsets={{ top: 0.01 }} scrollEventThrottle={16} - onScroll={onScroll} + onScroll={isTabNavigator ? handleScroll : onScroll} sections={sections} renderItem={({ item: dapp, index, section }) => { return ( @@ -322,19 +359,19 @@ const styles = StyleSheet.create({ flexGrow: 1, }, refreshControl: { - backgroundColor: colors.white, + backgroundColor: Colors.white, }, sectionList: { flex: 1, }, sectionTitle: { ...fontStyles.label, - color: colors.gray4, + color: Colors.gray4, marginTop: Spacing.Large32, }, disclaimer: { ...fontStyles.xsmall, - color: colors.gray4, + color: Colors.gray4, textAlign: 'center', marginTop: Spacing.Large32, marginBottom: Spacing.Regular16, @@ -343,6 +380,11 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: 'flex-end', }, + title: { + ...typeScale.titleMedium, + color: Colors.black, + marginBottom: Spacing.Large32, + }, }) export default DAppsExplorerScreenSearchFilter diff --git a/src/escrow/EscrowedPaymentListScreen.tsx b/src/escrow/EscrowedPaymentListScreen.tsx index a8aa215e4fc..74d33d633b1 100644 --- a/src/escrow/EscrowedPaymentListScreen.tsx +++ b/src/escrow/EscrowedPaymentListScreen.tsx @@ -4,12 +4,11 @@ import { EscrowedPayment } from 'src/escrow/actions' import EscrowedPaymentListItem from 'src/escrow/EscrowedPaymentListItem' import { getReclaimableEscrowPayments } from 'src/escrow/reducer' import i18n from 'src/i18n' -import { - NotificationList, - titleWithBalanceNavigationOptions, -} from 'src/notifications/NotificationList' +import { HeaderTitleWithBalance, headerWithBackButton } from 'src/navigator/Headers' +import { NotificationList } from 'src/notifications/NotificationList' import { useSelector } from 'src/redux/hooks' import { Spacing } from 'src/styles/styles' +import { Currency } from 'src/utils/currencies' export const listItemRenderer = (payment: EscrowedPayment, key: number | undefined = undefined) => { return ( @@ -24,9 +23,12 @@ export default function EscrowedPaymentListScreen() { return } -EscrowedPaymentListScreen.navigationOptions = titleWithBalanceNavigationOptions( - i18n.t('escrowedPaymentReminder') -) +EscrowedPaymentListScreen.navigationOptions = () => ({ + ...headerWithBackButton, + headerTitle: () => ( + + ), +}) const styles = StyleSheet.create({ listItem: { diff --git a/src/home/NotificationBell.tsx b/src/home/NotificationBell.tsx index f76a1fac0aa..9469ade8d35 100644 --- a/src/home/NotificationBell.tsx +++ b/src/home/NotificationBell.tsx @@ -1,13 +1,14 @@ import React from 'react' -import { StyleProp, ViewStyle } from 'react-native' +import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native' import { HomeEvents } from 'src/analytics/Events' import ValoraAnalytics from 'src/analytics/ValoraAnalytics' +import Touchable from 'src/components/Touchable' import { useNotifications } from 'src/home/NotificationCenter' import NotificationBellIcon from 'src/icons/NotificationBellIcon' import { navigate } from 'src/navigator/NavigationService' import { Screens } from 'src/navigator/Screens' -import { TopBarIconButton } from 'src/navigator/TopBarButton' import colors from 'src/styles/colors' +import { Spacing } from 'src/styles/styles' interface Props { style?: StyleProp @@ -29,11 +30,25 @@ export default function NotificationBell({ style, size, testID }: Props) { } return ( - } - onPress={onPress} - style={style} - /> + + + + + ) } + +const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + alignItems: 'center', + }, + button: { + padding: Spacing.Small12, + }, +}) diff --git a/src/home/WalletHome.test.tsx b/src/home/WalletHome.test.tsx index ef59d6f82d1..c37bca2140e 100644 --- a/src/home/WalletHome.test.tsx +++ b/src/home/WalletHome.test.tsx @@ -182,7 +182,8 @@ describe('WalletHome', () => { jest.runOnlyPendingTimers() }) - expect(tree.getByText('bottomTabsNavigator.home.title')).toBeTruthy() + // Multiple elements use this text with the scroll aware header + expect(tree.queryAllByText('bottomTabsNavigator.home.title')).toBeTruthy() expect(tree.queryByTestId('HomeActionsCarousel')).toBeTruthy() expect(tree.queryByText('notificationCenterSpotlight.message')).toBeFalsy() expect(tree.queryByTestId('HomeTokenBalance')).toBeFalsy() diff --git a/src/home/WalletHome.tsx b/src/home/WalletHome.tsx index a0281e13d77..7c4668a5d50 100644 --- a/src/home/WalletHome.tsx +++ b/src/home/WalletHome.tsx @@ -1,9 +1,10 @@ import { useIsFocused } from '@react-navigation/native' import { NativeStackScreenProps } from '@react-navigation/native-stack' import _ from 'lodash' -import React, { useEffect, useRef } from 'react' +import React, { useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import { + LayoutChangeEvent, RefreshControl, RefreshControlProps, SectionList, @@ -11,7 +12,7 @@ import { Text, View, } from 'react-native' -import Animated from 'react-native-reanimated' +import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated' import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context' import { showMessage } from 'src/alert/actions' import { AppState } from 'src/app/actions' @@ -37,6 +38,7 @@ import { showNftCelebrationSelector, showNftRewardSelector } from 'src/home/sele import { importContacts } from 'src/identity/actions' import DrawerTopBar from 'src/navigator/DrawerTopBar' import { Screens } from 'src/navigator/Screens' +import useScrollAwareHeader from 'src/navigator/ScrollAwareHeader' import { StackParamList } from 'src/navigator/types' import { phoneRecipientCacheSelector } from 'src/recipients/reducer' import { useDispatch, useSelector } from 'src/redux/hooks' @@ -53,7 +55,7 @@ const AnimatedSectionList = Animated.createAnimatedComponent(SectionList) type Props = NativeStackScreenProps -function WalletHome({ route }: Props) { +function WalletHome({ navigation, route }: Props) { const { t } = useTranslation() const appState = useSelector(appStateSelector) @@ -62,13 +64,15 @@ function WalletHome({ route }: Props) { const isNumberVerified = useSelector(phoneNumberVerifiedSelector) const showNotificationSpotlight = useSelector(showNotificationSpotlightSelector) - // temporary parameter while we build the tab navigator, should be cleaned up + // TODO(act-1133): temporary parameter while we build the tab navigator, should be cleaned up // when we remove the drawer const isTabNavigator = !!route.params?.isTabNavigator const insets = useSafeAreaInsets() - const scrollPosition = useRef(new Animated.Value(0)).current - const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: scrollPosition } } }]) + + // Old scroll handler for Drawer Header + const scrollPositionValue = useRef(new Animated.Value(0)).current + const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: scrollPositionValue } } }]) const dispatch = useDispatch() @@ -96,6 +100,26 @@ function WalletHome({ route }: Props) { ) } + // Scroll Aware Header + const scrollPosition = useSharedValue(0) + const [titleHeight, setTitleHeight] = useState(0) + + const handleMeasureTitleHeight = (event: LayoutChangeEvent) => { + setTitleHeight(event.nativeEvent.layout.height) + } + + const handleScroll = useAnimatedScrollHandler((event) => { + scrollPosition.value = event.contentOffset.y + }) + + useScrollAwareHeader({ + navigation, + title: isTabNavigator ? t('bottomTabsNavigator.home.title') : '', + scrollPosition, + startFadeInPosition: titleHeight - titleHeight * 0.33, + animationDistance: titleHeight * 0.33, + }) + const tryImportContacts = async () => { // Skip if contacts have already been imported or the user hasn't verified their phone number. if (Object.keys(recipientCache).length || !isNumberVerified) { @@ -141,7 +165,9 @@ function WalletHome({ route }: Props) { const homeTabTitleSection = { data: [{}], renderItem: () => ( - {t('bottomTabsNavigator.home.title')} + + {t('bottomTabsNavigator.home.title')} + ), } @@ -189,8 +215,8 @@ function WalletHome({ route }: Props) { const topRightElements = ( - - + + ) @@ -204,14 +230,14 @@ function WalletHome({ route }: Props) { )} ( + + + +) +export default AccountCircle diff --git a/src/navigator/Headers.tsx b/src/navigator/Headers.tsx index ce4a6031b88..e5d02c48cda 100644 --- a/src/navigator/Headers.tsx +++ b/src/navigator/Headers.tsx @@ -2,11 +2,14 @@ import { NativeStackNavigationOptions } from '@react-navigation/native-stack' import * as React from 'react' import { Trans } from 'react-i18next' import { Dimensions, PixelRatio, Platform, Pressable, StyleSheet, Text, View } from 'react-native' +import AccountCircleButton from 'src/components/AccountCircleButton' import BackButton from 'src/components/BackButton' import CancelButton from 'src/components/CancelButton' import CurrencyDisplay from 'src/components/CurrencyDisplay' import LegacyTokenDisplay from 'src/components/LegacyTokenDisplay' +import QrScanButton from 'src/components/QrScanButton' import TokenDisplay from 'src/components/TokenDisplay' +import NotificationBell from 'src/home/NotificationBell' import i18n from 'src/i18n' import BackChevronCentered from 'src/icons/BackChevronCentered' import Times from 'src/icons/Times' @@ -14,7 +17,8 @@ import { navigateBack } from 'src/navigator/NavigationService' import { TopBarIconButton } from 'src/navigator/TopBarButton' import DisconnectBanner from 'src/shared/DisconnectBanner' import colors from 'src/styles/colors' -import fontStyles from 'src/styles/fonts' +import { typeScale } from 'src/styles/fonts' +import { Spacing } from 'src/styles/styles' import { useTokenInfoByCurrency } from 'src/tokens/hooks' import { TokenBalance } from 'src/tokens/slice' import { Currency } from 'src/utils/currencies' @@ -67,7 +71,7 @@ export const headerTransparentWithBack: NativeStackNavigationOptions = { export const styles = StyleSheet.create({ headerTitle: { - ...fontStyles.navigationHeader, + ...typeScale.labelSemiBoldMedium, maxWidth: Dimensions.get('window').width * 0.6, }, headerSubTitle: { @@ -98,6 +102,10 @@ export const styles = StyleSheet.create({ shadowRadius: 4, width: 32, }, + topElementsContainer: { + flexDirection: 'row', + alignItems: 'center', + }, }) export const nuxNavigationOptions: NativeStackNavigationOptions = { @@ -277,6 +285,21 @@ export function HeaderTitleWithSubtitle({ ) } +export const tabHeader: NativeStackNavigationOptions = { + ...emptyHeader, + headerRight: () => ( + + + + + ), + headerLeft: () => ( + + + + ), +} + HeaderTitleWithBalance.defaultProps = { token: Currency.Dollar, } diff --git a/src/navigator/TabNavigator.test.tsx b/src/navigator/TabNavigator.test.tsx new file mode 100644 index 00000000000..98093a7c169 --- /dev/null +++ b/src/navigator/TabNavigator.test.tsx @@ -0,0 +1,83 @@ +import { CommonActions } from '@react-navigation/native' +import { fireEvent, render } from '@testing-library/react-native' +import React from 'react' +import { Provider } from 'react-redux' +import { Screens } from 'src/navigator/Screens' +import TabNavigator from 'src/navigator/TabNavigator' +import { getFeatureGate } from 'src/statsig' +import { StatsigFeatureGates } from 'src/statsig/types' +import MockedNavigator from 'test/MockedNavigator' +import { createMockStore } from 'test/utils' + +jest.mock('src/statsig') + +describe('TabNavigator', () => { + beforeEach(() => { + jest.clearAllMocks() + jest + .mocked(getFeatureGate) + .mockImplementation((featureGate) => featureGate !== StatsigFeatureGates.USE_TAB_NAVIGATOR) + }) + + it('shows the expected tabs', () => { + const store = createMockStore({}) + const { queryByText, getByTestId } = render( + + + + ) + + // By Text + expect(queryByText('bottomTabsNavigator.wallet.tabName')).toBeTruthy() + expect(queryByText('bottomTabsNavigator.home.tabName')).toBeTruthy() + expect(queryByText('bottomTabsNavigator.discover.tabName')).toBeTruthy() + + // By testId - useful for e2e tests + expect(getByTestId('Tab/Wallet')).toBeTruthy() + expect(getByTestId('Tab/Home')).toBeTruthy() + expect(getByTestId('Tab/Discover')).toBeTruthy() + }) + + it.each([ + { + testId: 'Tab/Wallet', + tabName: 'bottomTabsNavigator.wallet.tabName', + expectedScreen: Screens.TabWallet, + }, + { + testId: 'Tab/Discover', + tabName: 'bottomTabsNavigator.discover.tabName', + expectedScreen: Screens.TabDiscover, + }, + ])( + `navigates to non initial screens $expectedScreen`, + async ({ testId, tabName, expectedScreen }) => { + const store = createMockStore({}) + const { getByText, getByTestId } = render( + + + + ) + + // Check that the tab contains the correct text + expect(getByTestId(testId)).toContainElement(getByText(tabName)) + + // Check tab navigation + await fireEvent.press(getByTestId(testId)) + expect(CommonActions.navigate).toHaveBeenCalledWith({ merge: true, name: expectedScreen }) + } + ) + + it('does not attempt navigate to current screen', async () => { + const store = createMockStore({}) + const { getByText, getByTestId } = render( + + + + ) + + expect(getByTestId('Tab/Home')).toContainElement(getByText('bottomTabsNavigator.home.tabName')) + await fireEvent.press(getByTestId('Tab/Home')) + expect(CommonActions.navigate).not.toHaveBeenCalled() + }) +}) diff --git a/src/navigator/TabNavigator.tsx b/src/navigator/TabNavigator.tsx index 7dde019e325..324a84f5d5d 100644 --- a/src/navigator/TabNavigator.tsx +++ b/src/navigator/TabNavigator.tsx @@ -1,5 +1,5 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' -import { NativeStackScreenProps } from '@react-navigation/native-stack' +import { NativeStackHeaderProps, NativeStackScreenProps } from '@react-navigation/native-stack' import React from 'react' import { useTranslation } from 'react-i18next' import { StyleSheet } from 'react-native' @@ -8,6 +8,7 @@ import WalletHome from 'src/home/WalletHome' import ValoraV from 'src/icons/ValoraV' import Discover from 'src/icons/navigator/Discover' import Wallet from 'src/icons/navigator/Wallet' +import { tabHeader } from 'src/navigator/Headers' import { Screens } from 'src/navigator/Screens' import { StackParamList } from 'src/navigator/types' import Colors from 'src/styles/colors' @@ -39,6 +40,7 @@ export default function TabNavigator({ route }: Props) { tabBarStyle: { height: variables.height * 0.1, }, + ...(tabHeader as NativeStackHeaderProps), }} > diff --git a/src/navigator/TopBarButton.tsx b/src/navigator/TopBarButton.tsx index a97618b840d..09dc1c162cb 100644 --- a/src/navigator/TopBarButton.tsx +++ b/src/navigator/TopBarButton.tsx @@ -56,6 +56,11 @@ export type TopBarIconButtonProps = CommonProps & { icon: JSX.Element } +/** + * Please avoid use in new header icons + * TODO: ACT-1134 alternative component + * @deprecated + */ export function TopBarIconButton(props: TopBarIconButtonProps) { return {props.icon} } diff --git a/src/notifications/NotificationList.tsx b/src/notifications/NotificationList.tsx index e79b080fa87..79d8b6743f2 100644 --- a/src/notifications/NotificationList.tsx +++ b/src/notifications/NotificationList.tsx @@ -2,11 +2,9 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { ScrollView, StyleSheet, Text, View } from 'react-native' import { SafeAreaView } from 'react-native-safe-area-context' -import { HeaderTitleWithBalance, headerWithBackButton } from 'src/navigator/Headers' import DisconnectBanner from 'src/shared/DisconnectBanner' import fontStyles from 'src/styles/fonts' import variables from 'src/styles/variables' -import { Currency } from 'src/utils/currencies' const { contentPadding } = variables @@ -33,13 +31,6 @@ export function NotificationList(props: Props) { ) } -export function titleWithBalanceNavigationOptions(title: string) { - return { - ...headerWithBackButton, - headerTitle: , - } -} - const styles = StyleSheet.create({ container: { flex: 1, diff --git a/src/tokens/AssetList.tsx b/src/tokens/AssetList.tsx index 04c6ccdb6b6..e838d365fa4 100644 --- a/src/tokens/AssetList.tsx +++ b/src/tokens/AssetList.tsx @@ -88,7 +88,7 @@ export default function AssetList({ activeTab: AssetTabType listHeaderHeight: number handleScroll: (event: NativeSyntheticEvent) => void - // temporary parameter while we build the tab navigator, should be cleaned up + // TODO(act-1133): temporary parameter while we build the tab navigator, should be cleaned up // when we remove the drawer isWalletTab?: boolean }) { diff --git a/src/tokens/Assets.tsx b/src/tokens/Assets.tsx index 5a34ef23d1e..2803cee02ff 100644 --- a/src/tokens/Assets.tsx +++ b/src/tokens/Assets.tsx @@ -171,7 +171,6 @@ function AssetsScreen({ navigation, route }: Props) { }) }, [navigation, isWalletTab]) - // TODO(ACT-1108): adjust title style useScrollAwareHeader({ navigation, title: isWalletTab ? t('bottomTabsNavigator.wallet.title') : t('totalAssets'), @@ -205,9 +204,16 @@ function AssetsScreen({ navigation, route }: Props) { } return ( - <> + // Transparency issue on Android present when a fragment is used - Nested Animated.View prevents it + )} - + ) } @@ -266,8 +272,6 @@ AssetsScreen.navigationOptions = { const styles = StyleSheet.create({ listHeaderContainer: { ...getShadowStyle(Shadow.SoftLight), - paddingHorizontal: Spacing.Thick24, - paddingTop: Spacing.Smallest8, paddingBottom: Spacing.Regular16, backgroundColor: Colors.white, position: 'absolute',