NTP-44488| Chirayu| BackSwipe gesture Handling IOS (#15353)

Co-authored-by: Kshitij Pramod Ghongadi <kshitij.pramod@navi.com>

App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx

@@ -28,6 +28,7 @@ import { isValidHexColor } from "../../../../common/utilities/ValidateColors";
 import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen";
 import WaitingPeriodShimmerScreen from "../waiting-period-screen/shimmer-screen/WaitingPeriodShimmerScreen";
 import styles from "./BenefitScreenStyles";
+import { useBackSwipeListener } from "../../../../common/hooks";
 
 const BenefitScreen = ({
   ctaData,
@@ -84,7 +85,7 @@ const BenefitScreen = ({
     handleClick && backCta && handleClick(backCta);
     return true;
   };
-
+  useBackSwipeListener(navigation, backCta, BENEFIT_SCREEN);
   useEffect(() => {
     if (backCta) {
       BackHandler.addEventListener(HARDWARE_BACK_PRESS, handleBackButtonClick);

App/Container/Navi-Insurance/screen/generic-error-screen/GenericErrorScreen.tsx

@@ -14,12 +14,19 @@ import {
 import { CtaData } from "../../../../common/interface";
 import { globalHandleClick } from "../../../../common/utilities/NavigationUtil";
 import { styles } from "./GenericErrorScreenStyle";
+import { useBackSwipeListener } from "../../../../common/hooks";
 
 const GenericErrorScreen = () => {
   const navigation = useNavigation();
   const handleClick = (cta?: CtaData) => {
     globalHandleClick(navigation, cta, GENERIC_ERROR_SCREEN);
   };
+  useBackSwipeListener(
+    navigation,
+    ConstantCta.STATIC_HEADER_LEFT_ICON_CTA,
+    GENERIC_ERROR_SCREEN,
+  );
+
   return (
     <View style={styles.container}>
       <StaticHeader

App/Container/Navi-Insurance/screen/migration-benefit-screen/MigrationBenefitScreen.tsx

@@ -33,6 +33,7 @@ import { isValidHexColor } from "../../../../common/utilities/ValidateColors";
 import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen";
 import WaitingPeriodShimmerScreen from "../waiting-period-screen/shimmer-screen/WaitingPeriodShimmerScreen";
 import styles from "./MigrationBenefitScreenStyles";
+import { useBackSwipeListener } from "../../../../common/hooks";
 
 const MigrationBenefitScreen = ({
   ctaData,
@@ -95,7 +96,7 @@ const MigrationBenefitScreen = ({
     handleClick && backCta && handleClick(backCta);
     return true;
   };
-
+  useBackSwipeListener(navigation, backCta, MIGRATION_BENEFIT_SCREEN);
   useEffect(() => {
     if (backCta) {
       BackHandler.addEventListener(HARDWARE_BACK_PRESS, handleBackButtonClick);

App/common/constants/EventNameConstants.ts

@@ -1,4 +1,5 @@
 export enum NativeEventNameConstants {
-    reloadPage = "reloadPage",
-    reloadPageWithCtaData = "reloadPageWithCtaData",
-}
+  reloadPage = "reloadPage",
+  reloadPageWithCtaData = "reloadPageWithCtaData",
+  BackSwipe = "BackSwipe",
+}

App/common/hooks/index.ts

@@ -1 +1,2 @@
 export { useAnalyticsEvent } from "./useAnalyticsEvent";
+export { useBackSwipeListener } from "./useBackSwipeListener";

App/common/hooks/useBackSwipeListener.ts

@@ -0,0 +1,38 @@
+import { useRef } from "react";
+import { NativeEventEmitter, NativeModules, Platform } from "react-native";
+import React from "react";
+import { NavigationProp, useFocusEffect } from "@react-navigation/native";
+import { NativeEventNameConstants, OsTypeConstants } from "../constants";
+import { CtaData } from "../interface";
+import { globalHandleClick } from "../utilities/NavigationUtil";
+
+const nativeEventListener = new NativeEventEmitter(
+  NativeModules.DeviceEventEmitterModule,
+);
+
+export const useBackSwipeListener = (
+  navigation: NavigationProp<any>,
+  cta?: CtaData,
+  screenName?: string,
+) => {
+  if (Platform.OS === OsTypeConstants.ANDROID) {
+    return;
+  }
+  const backSwipeListenerRef = useRef<any>(null);
+  useFocusEffect(
+    React.useCallback(() => {
+      backSwipeListenerRef.current = nativeEventListener.addListener(
+        NativeEventNameConstants.BackSwipe,
+        () => {
+          globalHandleClick(navigation, cta, screenName);
+        },
+      );
+      return () => {
+        if (backSwipeListenerRef.current) {
+          backSwipeListenerRef.current.remove();
+          backSwipeListenerRef.current = null;
+        }
+      };
+    }, [navigation, cta, screenName]),
+  );
+};

components/widgets/HeaderWithAssetsWidget.tsx

@@ -14,7 +14,10 @@ import { HeaderWithAssetsWidgetData } from "../../App/common/interface/widgets/w
 import { StyledImage } from "../StyledImage";
 import { StyledLottie } from "./styled-lottie/StyledLottie";
 import { StyledText } from "./styled-text/StyledText";
+import { useNavigation } from "@react-navigation/native";
+import { useBackSwipeListener } from "../../App/common/hooks";
 
+const navigation = useNavigation();
 const HeaderWithAssetsWidget = ({
   widgetData,
   widgetStyle,
@@ -38,6 +41,7 @@ const HeaderWithAssetsWidget = ({
       handleClick(widgetData?.leftIcon?.cta);
     return true;
   };
+  useBackSwipeListener(navigation, widgetData?.leftIcon?.cta, "");
 
   useEffect(() => {
     BackHandler.addEventListener(HARDWARE_BACK_PRESS, handleBackButtonClick);