feat: allow scroll

Author: tonykhaov

.changeset/quick-pugs-perform.md

@@ -1,5 +1,6 @@
 ---
 "live-mobile": minor
+"@ledgerhq/native-ui": minor
 ---
 
 feat: add trackings wallet v4 tour

apps/ledger-live-mobile/__tests__/jest-setup.js

@@ -143,7 +143,6 @@ jest.mock("~/analytics/segment", () => ({
   track: jest.fn(),
   setAnalyticsFeatureFlagMethod: jest.fn(),
   screen: jest.fn(),
-  useTrack: jest.fn(() => jest.fn()),
   useAnalytics: jest.fn(() => ({
     track: jest.fn(),
     screen: jest.fn(),

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/const.ts

@@ -0,0 +1 @@
+export const PAGE_TRACKING_WALLET_V4_TOUR = "Product Tour WV4";

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/hooks/useSlideFooterButtonViewModel.ts

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { useSlidesContext } from "@ledgerhq/native-ui";
 import { track } from "~/analytics";
+import { PAGE_TRACKING_WALLET_V4_TOUR } from "../const";
 
 export const useSlideFooterButtonViewModel = (onClose: () => void) => {
   const { totalSlides, currentIndex, goToNext, scrollProgressSharedValue } = useSlidesContext();
@@ -12,7 +13,7 @@ export const useSlideFooterButtonViewModel = (onClose: () => void) => {
     goToNext();
     track("button_clicked", {
       button: "Next",
-      page: "Product Tour WV4",
+      page: PAGE_TRACKING_WALLET_V4_TOUR,
       card: currentIndex + 1,
     });
   }, [currentIndex, goToNext]);
@@ -21,7 +22,7 @@ export const useSlideFooterButtonViewModel = (onClose: () => void) => {
     onClose();
     track("button_clicked", {
       button: "Discover my new portfolio",
-      page: "Product Tour WV4",
+      page: PAGE_TRACKING_WALLET_V4_TOUR,
     });
   }, [onClose]);
 

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/hooks/useWalletV4TourDrawerViewModel.ts

@@ -5,14 +5,14 @@ import { setHasSeenWalletV4Tour } from "~/actions/settings";
 import { hasCompletedOnboardingSelector, hasSeenWalletV4TourSelector } from "~/reducers/settings";
 import type { WalletV4TourDrawerViewModel } from "../types";
 import { useTranslation } from "~/context/Locale";
-import { useTrack } from "~/analytics";
 import animation01 from "../animations/01.lottie";
 import animation02 from "../animations/02.lottie";
 import animation03 from "../animations/03.lottie";
+import { track } from "~/analytics";
+import { PAGE_TRACKING_WALLET_V4_TOUR } from "../const";
 
 export const useWalletV4TourDrawerViewModel = (): WalletV4TourDrawerViewModel => {
   const dispatch = useDispatch();
-  const track = useTrack();
   const currentIndexRef = useRef(0);
   const hasSeenTour = useSelector(hasSeenWalletV4TourSelector);
   const hasCompletedOnboarding = useSelector(hasCompletedOnboardingSelector);
@@ -39,22 +39,19 @@ export const useWalletV4TourDrawerViewModel = (): WalletV4TourDrawerViewModel =>
   const closeDrawer = useCallback(() => {
     track("button_clicked", {
       button: "Close",
-      page: "Product Tour WV4",
+      page: PAGE_TRACKING_WALLET_V4_TOUR,
       card: currentIndexRef.current + 1,
     });
     handleCloseDrawer();
-  }, [handleCloseDrawer, track]);
+  }, [handleCloseDrawer]);
 
-  const onSlideChange = useCallback(
-    (index: number) => {
-      currentIndexRef.current = index;
-      track("product_tour_card", {
-        page: "Product Tour WV4",
-        card: index + 1,
-      });
-    },
-    [track],
-  );
+  const onSlideChange = useCallback((index: number) => {
+    currentIndexRef.current = index;
+    track("product_tour_card", {
+      page: PAGE_TRACKING_WALLET_V4_TOUR,
+      card: index + 1,
+    });
+  }, []);
 
   const { t } = useTranslation();
   const slides = useMemo(

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/index.tsx

@@ -10,6 +10,7 @@ import { SlideFooterButton } from "./components/SlideFooterButton";
 import { StyleSheet } from "react-native";
 import { ProgressIndicator } from "./components/ProgressIndicator";
 import { TrackScreen } from "~/analytics";
+import { PAGE_TRACKING_WALLET_V4_TOUR } from "./const";
 
 export const useWalletV4TourDrawer = () => {
   return useWalletV4TourDrawerViewModel();
@@ -43,13 +44,13 @@ export const WalletV4TourDrawer = ({
       noCloseButton={false}
       animateOnMount={false}
     >
-      <TrackScreen page="Product Tour WV4" source="Portfolio" />
+      <TrackScreen page={PAGE_TRACKING_WALLET_V4_TOUR} source="Wallet" />
       <Slides
-        scrollEnabled={false}
         bounces={false}
         as={AnimatedGestureHandlerFlatList}
         testID="walletv4-tour-slides-container"
         initialNumToRender={1}
+        maxToRenderPerBatch={1}
         onSlideChange={onSlideChange}
       >
         <Slides.Content>

libs/ui/packages/native/src/components/Layout/Slides/Slides.tsx

@@ -157,6 +157,27 @@ export function Slides({
     [currentIndex, totalSlides, goToNext, goToPrevious, goToSlide],
   );
 
+  const onViewableItemsChanged = useCallback(
+    ({
+      viewableItems,
+    }: {
+      viewableItems: Array<{
+        index: number;
+        key: string;
+        isViewable: boolean;
+      }>;
+    }) => {
+      const items = viewableItems.filter((item) => item.isViewable);
+
+      // Since it's a horizontal scroll view, and we display one by one, we only want to trigger the onSlideChange event when one item is visible.
+      if (items.length === 1) {
+        const index = items[0].index;
+        onSlideChange?.(index);
+      }
+    },
+    [onSlideChange],
+  );
+
   const renderOrderedChildren = useCallback(() => {
     return React.Children.map(children, (child) => {
       if (isElementOfType(child, Content)) {
@@ -177,7 +198,7 @@ export function Slides({
             scrollEventThrottle={16}
             getItemLayout={getItemLayout}
             initialScrollIndex={initialSlideIndex}
-            onViewableItemsChanged={onSlideChange}
+            onViewableItemsChanged={onViewableItemsChanged}
             {...flatListProps}
           />
         );