NTP-32065| Chirayu| Generic Lottie Handling for IOS (#14818) (#14951)

Co-authored-by: Chirayu Mor <chirayu.mor@navi.com>

components/widgets/select-card-with-footer-widget/SelectCardWithFooterWidgetStyles.ts

@@ -24,7 +24,7 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.white,
     shadowColor: Colors.black,
     shadowOffset: { width: 3, height: 3 },
-    shadowOpacity: 0.3,
+    shadowOpacity: 0.2,
     shadowRadius: 16,
     elevation: 5,
   },

components/widgets/styled-lottie/GenericLottieView.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from "react";
+import {
+  requireNativeComponent,
+  ViewStyle,
+  NativeModules,
+  Platform,
+} from "react-native";
+import type { StyleProp } from "react-native";
+import LottieView from "lottie-react-native";
+import styles from "./StyledLottieComponentStyle";
+import { LOTTIE_VIEW, OsTypeConstants } from "../../../App/common/constants";
+import { LottieViewProps } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
+
+const { LottieViewManager } = NativeModules;
+
+const LottieViewNative = requireNativeComponent<LottieViewProps>(LOTTIE_VIEW);
+
+const GenericLottieView = ({
+  url,
+  lottieStyle,
+  autoPlay = true,
+  loop = true,
+  delayAnimation,
+  style,
+}: LottieViewProps) => {
+  const animationRef = useRef<LottieView | null>(null);
+  useEffect(() => {
+    if (Platform.OS === OsTypeConstants.IOS && url) {
+      LottieViewManager.updateAnimation(url);
+    } else {
+      const timeoutId = setTimeout(() => {
+        animationRef.current?.play();
+      }, delayAnimation ?? 0);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [url]);
+
+  return Platform.OS === OsTypeConstants.IOS ? (
+    <LottieViewNative
+      style={[styles.lottie, lottieStyle]}
+      url={url}
+      delayAnimation={delayAnimation}
+    />
+  ) : (
+    <LottieView
+      ref={animationRef}
+      source={{ uri: url }}
+      autoPlay={autoPlay}
+      loop={loop}
+      style={[styles.lottie, lottieStyle]}
+    />
+  );
+};
+
+export default GenericLottieView;

components/widgets/styled-lottie/StyledLottie.tsx

@@ -1,10 +1,11 @@
-import LottieView from "lottie-react-native";
 import React, { useEffect, useRef } from "react";
-import { TouchableOpacity } from "react-native";
+import { Platform, TouchableOpacity } from "react-native";
 import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
 import { CtaData } from "../../../App/common/interface";
 import { LottieFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
 import styles from "./StyledLottieComponentStyle";
+import { OsTypeConstants } from "../../../App/common/constants";
+import GenericLottieView from "./GenericLottieView";
 
 export const StyledLottie = ({
   lottieFieldData,
@@ -18,8 +19,6 @@ export const StyledLottie = ({
     actionPayloadList: GenericActionPayload | undefined,
   ) => void;
 }) => {
-  const animationRef = useRef<LottieView | null>(null);
-
   const handleLottieClick = () => {
     const { cta, actions } = lottieFieldData;
     if (actions && handleActions) {
@@ -29,38 +28,32 @@ export const StyledLottie = ({
     }
   };
 
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      animationRef.current?.play();
-    }, lottieFieldData?.delayAnimationBy ?? 0);
+  if (!lottieFieldData?.url) return null;
 
-    return () => clearTimeout(timeoutId);
-  }, [lottieFieldData]);
-
-  if (!lottieFieldData?.url) return <></>;
-  const { cta, actions } = lottieFieldData;
+  const { cta, actions, lottieStyle, url, autoPlay, loop } = lottieFieldData;
   const isInteractive = (cta && handleClick) || (actions && handleActions);
+
   return isInteractive ? (
     <TouchableOpacity
       onPress={handleLottieClick}
       style={styles.touchableOpacity}
       activeOpacity={1}
     >
-      <LottieView
-        ref={animationRef}
-        source={{ uri: lottieFieldData?.url }}
-        autoPlay={lottieFieldData?.autoPlay ?? true}
-        loop={lottieFieldData?.loop ?? true}
-        style={[styles.lottie, lottieFieldData?.lottieStyle]}
+      <GenericLottieView
+        url={url}
+        lottieStyle={lottieStyle}
+        autoPlay={autoPlay}
+        loop={loop}
+        delayAnimation={lottieFieldData?.delayAnimationBy ?? 0}
       />
     </TouchableOpacity>
   ) : (
-    <LottieView
-      ref={animationRef}
-      source={{ uri: lottieFieldData?.url }}
-      autoPlay={lottieFieldData?.autoPlay ?? true}
-      loop={lottieFieldData?.loop ?? true}
-      style={[styles.lottie, lottieFieldData?.lottieStyle]}
+    <GenericLottieView
+      url={url}
+      lottieStyle={lottieStyle}
+      autoPlay={autoPlay}
+      loop={loop}
+      delayAnimation={lottieFieldData?.delayAnimationBy ?? 0}
     />
   );
 };

components/widgets/styled-lottie/StyledLottieIos.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { requireNativeComponent, ViewStyle } from "react-native";
-import type { StyleProp } from "react-native";
-import styles from "./StyledLottieComponentStyle";
-
-type LottieViewProps = {
-  style?: StyleProp<ViewStyle>;
-};
-
-const LottieViewNative = requireNativeComponent<LottieViewProps>("LottieView");
-
-const LottieView = () => {
-  return <LottieViewNative style={styles.lottie} />;
-};
-
-export default LottieView;

components/widgets/styled-lottie/StyledLottieRN.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from "react";
+import {
+  requireNativeComponent,
+  ViewStyle,
+  NativeModules,
+  Platform,
+} from "react-native";
+import type { StyleProp } from "react-native";
+import LottieView from "lottie-react-native";
+import styles from "./StyledLottieComponentStyle";
+import { LOTTIE_VIEW, OsTypeConstants } from "../../../App/common/constants";
+import { LottieViewProps } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
+
+const { LottieViewManager } = NativeModules;
+
+const LottieViewNative = requireNativeComponent<LottieViewProps>(LOTTIE_VIEW);
+
+const LottieViewRN = ({
+  url,
+  lottieStyle,
+  autoPlay = true,
+  loop = true,
+  delayAnimation,
+  style,
+}: LottieViewProps) => {
+  const animationRef = useRef<LottieView | null>(null);
+  useEffect(() => {
+    if (Platform.OS === OsTypeConstants.IOS && url) {
+      LottieViewManager.updateAnimation(url);
+    } else {
+      const timeoutId = setTimeout(() => {
+        animationRef.current?.play();
+      }, delayAnimation ?? 0);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [url]);
+
+  return Platform.OS === OsTypeConstants.IOS ? (
+    <LottieViewNative
+      style={[styles.lottie, lottieStyle]}
+      url={url}
+      delayAnimation={delayAnimation}
+    />
+  ) : (
+    <LottieView
+      ref={animationRef}
+      source={{ uri: url }}
+      autoPlay={autoPlay}
+      loop={loop}
+      style={[styles.lottie, lottieStyle]}
+    />
+  );
+};
+
+export default LottieViewRN;