Skip to content

Commit

Permalink
fix(IT Wallet): [SIW-1734] Add "back to top" in the wallet home screen (
Browse files Browse the repository at this point in the history
#6491)

## Short description
This PR adds the ability to return to the top of the wallet screen when
tapping on the wallet tab navigation icon

## List of changes proposed in this pull request
- Added `useTabItemPressWhenScreenActive` handler in `WalletHomeScreen`

## How to test
Navigate to the Wallet home screen, scroll to the bottom, tap on the tab
navigation icon and check that the scroll view scrolls back to the top

## Preview


https://github.com/user-attachments/assets/f9194597-cadd-4da3-a583-8e34c4e56a54

Co-authored-by: Damiano Plebani <damiano.plebani@pagopa.it>
  • Loading branch information
mastro993 and dmnplb authored Dec 4, 2024
1 parent 2767743 commit 2fbaa6c
Showing 1 changed file with 19 additions and 8 deletions.
27 changes: 19 additions & 8 deletions ts/features/wallet/screens/WalletHomeScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
import { IOStyles, IOToast } from "@pagopa/io-app-design-system";
import { useFocusEffect } from "@react-navigation/native";
import React from "react";
import { ScrollView } from "react-native";
import Animated, { useAnimatedRef } from "react-native-reanimated";
import { IOScrollView } from "../../../components/ui/IOScrollView";
import { useTabItemPressWhenScreenActive } from "../../../hooks/useTabItemPressWhenScreenActive";
import I18n from "../../../i18n";
import {
IOStackNavigationRouteProps,
useIONavigation
} from "../../../navigation/params/AppParamsList";
import { MainTabParamsList } from "../../../navigation/params/MainTabParamsList";
import { useIODispatch, useIOSelector } from "../../../store/hooks";
import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
import { cgnDetails } from "../../bonus/cgn/store/actions/details";
import { idPayWalletGet } from "../../idpay/wallet/store/actions";
import {
trackOpenWalletScreen,
trackWalletAdd
} from "../../itwallet/analytics";
import { ITW_ROUTES } from "../../itwallet/navigation/routes";
import { getPaymentsWalletUserMethods } from "../../payments/wallet/store/actions";
import { WalletCardsContainer } from "../components/WalletCardsContainer";
import { WalletCategoryFilterTabs } from "../components/WalletCategoryFilterTabs";
import { walletToggleLoadingState } from "../store/actions/placeholders";
import { selectWalletCards } from "../store/selectors";
import {
trackOpenWalletScreen,
trackWalletAdd
} from "../../itwallet/analytics";
import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";

export type WalletHomeNavigationParams = Readonly<{
newMethodAdded: boolean;
Expand Down Expand Up @@ -70,6 +71,7 @@ const WalletHomeScreen = ({ route }: Props) => {
};

const WalletScrollView = ({ children }: React.PropsWithChildren<any>) => {
const animatedScrollViewRef = useAnimatedRef<Animated.ScrollView>();
const navigation = useIONavigation();
const cards = useIOSelector(selectWalletCards);

Expand All @@ -80,21 +82,30 @@ const WalletScrollView = ({ children }: React.PropsWithChildren<any>) => {
});
};

useTabItemPressWhenScreenActive(
React.useCallback(() => {
animatedScrollViewRef.current?.scrollTo({ y: 0, animated: true });
}, [animatedScrollViewRef]),
false
);

if (cards.length === 0) {
return (
<ScrollView
<Animated.ScrollView
ref={animatedScrollViewRef}
contentContainerStyle={[
IOStyles.flex,
IOStyles.horizontalContentPadding
]}
>
{children}
</ScrollView>
</Animated.ScrollView>
);
}

return (
<IOScrollView
animatedRef={animatedScrollViewRef}
actions={{
type: "SingleButton",
primary: {
Expand Down

0 comments on commit 2fbaa6c

Please sign in to comment.