fix: [IOBP-950] Filter tabs behavior into biz events notices list (#6363

)

## Short description
This PR fixes a strange behavior on the filter tabs in the notices list
screen. When the user taps on a tab and it become selected, it seems
that doesn't stay in "active" mode. This PR fixes it preventing
unnecessary rerendering.

## List of changes proposed in this pull request
- Memoized the `SectionListHeaderTitle` component to avoid unnecessary
re-renders that causes an issue with the component animation of the
TabItem that loses the focus state.

## How to test
- Open the `Pagamenti` section.
- Tap on the CTA `Vedi tutte`.
- Tap on any of the three available tabs in the list and check that the
color is the one that marks the active state.

ts/features/payments/bizEventsTransaction/components/PaymentBizEventsSectionListHeader.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { H2, VSpacer } from "@pagopa/io-app-design-system";
+import { LayoutChangeEvent, View } from "react-native";
+import I18n from "../../../../i18n";
+import { PaymentBizEventsCategoryFilter } from "../types";
+import { PaymentsBizEventsFilterTabs } from "./PaymentsBizEventsFilterTabs";
+
+type PaymentBizEventsSectionListHeaderProps = {
+  onLayout: (event: LayoutChangeEvent) => void;
+  selectedCategory: PaymentBizEventsCategoryFilter;
+  onCategorySelected: (category: PaymentBizEventsCategoryFilter) => void;
+};
+
+export const PaymentBizEventsSectionListHeader = React.memo(
+  ({
+    onLayout,
+    selectedCategory,
+    onCategorySelected
+  }: PaymentBizEventsSectionListHeaderProps) => (
+    <View onLayout={onLayout}>
+      <H2
+        accessibilityLabel={I18n.t("features.payments.transactions.title")}
+        accessibilityRole="header"
+      >
+        {I18n.t("features.payments.transactions.title")}
+      </H2>
+      <VSpacer size={16} />
+      <PaymentsBizEventsFilterTabs
+        selectedCategory={selectedCategory}
+        onCategorySelected={onCategorySelected}
+      />
+    </View>
+  ),
+  (prevProps, nextProps) =>
+    prevProps.selectedCategory === nextProps.selectedCategory
+);

ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsFilterTabs.tsx

@@ -26,7 +26,9 @@ const PaymentsBizEventsFilterTabs = ({
 
   const handleFilterSelected = (index: number) => {
     const categoryByIndex = paymentsBizEventsCategoryFilters[index];
-    onCategorySelected?.(categoryByIndex);
+    if (categoryByIndex !== selectedCategory) {
+      onCategorySelected?.(categoryByIndex);
+    }
   };
 
   return (

ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx

@@ -1,7 +1,6 @@
 import {
   ButtonLink,
   Divider,
-  H2,
   IOStyles,
   ListItemHeader,
   VSpacer
@@ -35,11 +34,11 @@ import { PaymentsTransactionBizEventsRoutes } from "../navigation/routes";
 import { PaymentsTransactionRoutes } from "../../transaction/navigation/routes";
 import { NoticeListItem } from "../../../../../definitions/pagopa/biz-events/NoticeListItem";
 import * as analytics from "../analytics";
-import { PaymentsBizEventsFilterTabs } from "../components/PaymentsBizEventsFilterTabs";
 import { PaymentBizEventsCategoryFilter } from "../types";
 import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
 import { PaymentsBizEventsFadeInOutAnimationView } from "../components/PaymentsBizEventsFadeInOutAnimationView";
 import { PaymentsBizEventsTransactionLoadingList } from "../components/PaymentsBizEventsTransactionLoadingList";
+import { PaymentBizEventsSectionListHeader } from "../components/PaymentBizEventsSectionListHeader";
 
 export type PaymentsTransactionBizEventsListScreenProps = RouteProp<
   PaymentsTransactionBizEventsParamsList,
@@ -139,16 +138,19 @@ const PaymentsTransactionBizEventsListScreen = () => {
     );
   };
 
-  const handleCategorySelected = (category: PaymentBizEventsCategoryFilter) => {
-    setNoticeCategory(category);
-    dispatch(
-      getPaymentsBizEventsTransactionsAction.request({
-        firstLoad: true,
-        noticeCategory: category,
-        onSuccess: handleOnSuccess
-      })
-    );
-  };
+  const handleCategorySelected = React.useCallback(
+    (category: PaymentBizEventsCategoryFilter) => {
+      setNoticeCategory(category);
+      dispatch(
+        getPaymentsBizEventsTransactionsAction.request({
+          firstLoad: true,
+          noticeCategory: category,
+          onSuccess: handleOnSuccess
+        })
+      );
+    },
+    [setNoticeCategory, dispatch]
+  );
 
   useOnFirstRender(
     React.useCallback(() => {
@@ -177,22 +179,6 @@ const PaymentsTransactionBizEventsListScreen = () => {
     }
   }, [transactionsPot]);
 
-  const SectionListHeaderTitle = (
-    <View onLayout={getTitleHeight}>
-      <H2
-        accessibilityLabel={I18n.t("features.payments.transactions.title")}
-        accessibilityRole="header"
-      >
-        {I18n.t("features.payments.transactions.title")}
-      </H2>
-      <VSpacer size={16} />
-      <PaymentsBizEventsFilterTabs
-        selectedCategory={noticeCategory}
-        onCategorySelected={handleCategorySelected}
-      />
-    </View>
-  );
-
   const ShowLegacyTransactionsButton = () => (
     <View style={{ marginTop: 12 }}>
       <VSpacer size={16} />
@@ -240,7 +226,13 @@ const PaymentsTransactionBizEventsListScreen = () => {
       }}
       onEndReached={fetchNextPage}
       onEndReachedThreshold={0.25}
-      ListHeaderComponent={SectionListHeaderTitle}
+      ListHeaderComponent={
+        <PaymentBizEventsSectionListHeader
+          onLayout={getTitleHeight}
+          selectedCategory={noticeCategory}
+          onCategorySelected={handleCategorySelected}
+        />
+      }
       onScroll={scrollHandler}
       stickySectionHeadersEnabled={false}
       sections={