varnitgoyal95/super-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Chirayu Mor <chirayu.mor@navi.com>
This commit is contained in:
Prajjaval Verma
2025-02-12 21:38:48 +05:30
committed by GitHub
parent e868d70806
commit c962fe3114
8 changed files with 142 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
App/common/constants/StringConstant.ts
View File

@@ -57,6 +57,7 @@ export const NETWORK_ERROR = "Network Error";
export const HOME = "home";
export const ADVERSE = "adverse";
export const HARDWARE_BACK_PRESS = "hardwareBackPress";
export const LOTTIE_VIEW = "LottieView";
export enum SeparatorType {
DASHED = "dashed",
SOLID = "solid",

12
App/common/interface/widgets/widgetData/TitleWidgetData.ts
View File

@@ -1,4 +1,4 @@
import { ImageStyle, TextStyle, ViewStyle } from "react-native";
import { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
import { CtaData } from "../..";
import { GenericActionPayload } from "../../../actions/GenericAction";
import { GenericWidgetData } from "../Widget";
@@ -56,3 +56,13 @@ export interface LottieFieldData {
delayAnimationBy?: number;
actions?: GenericActionPayload;
}
export type LottieViewProps = {
style?: StyleProp<ViewStyle>;
animationName?: string;
url: string;
lottieStyle?: StyleProp<ViewStyle>;
autoPlay?: boolean;
loop?: boolean;
delayAnimation: number;
};

7
components/reusable/cta-button/CtaButton.tsx
View File

@@ -6,7 +6,6 @@ import { StyledLottie } from "../../widgets/styled-lottie/StyledLottie";
import styles from "./CtaButtonStyle";
import { Platform } from "react-native";
import { OsTypeConstants } from "../../../App/common/constants/BuildConfigConstants";
import LottieView from "../../widgets/styled-lottie/StyledLottieIos";
const CtaButton = ({
onPress,
@@ -32,11 +31,7 @@ const CtaButton = ({
style={[styles.footerButtonContainer, style]}
>
{state === ButtonState.LOADING ? (
Platform.OS === OsTypeConstants.IOS ? (
<LottieView />
) : (
<StyledLottie lottieFieldData={loaderData} />
)
<StyledLottie lottieFieldData={loaderData} />
) : (
children
)}

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

@@ -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,
},

55
components/widgets/styled-lottie/GenericLottieView.tsx Normal file
View File

@@ -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;

43
components/widgets/styled-lottie/StyledLottie.tsx
View File

@@ -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}
/>
);
};

16
components/widgets/styled-lottie/StyledLottieIos.tsx
View File

@@ -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;

55
components/widgets/styled-lottie/StyledLottieRN.tsx Normal file
View File

@@ -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;