fix: better animation adjustement height

Signed-off-by: clegirar <[email protected]>
TERITORI · Jan 14, 2025 · 1d6ed94 · 1d6ed94
1 parent 86ac782
commit 1d6ed94
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/packages/screens/Rakki/RakkiScreen.tsx b/packages/screens/Rakki/RakkiScreen.tsx
@@ -22,10 +22,13 @@ import { layout } from "@/utils/style/layout";
 
 export const RakkiScreen: ScreenFC<"Rakki"> = () => {
   const networkId = useSelectedNetworkId();
-  const { height } = useMaxResolution();
+  const { height, width } = useMaxResolution();
   const { rakkiInfo } = useRakkiInfo(networkId);
   const [isLottie, setIsLottie] = useState<boolean>(false);
 
+  // Lottie animation is in a square
+  const lottieAnimationHeight = width;
+
   const launchAnimation = () => {
     setIsLottie(true);
   };
@@ -98,28 +101,35 @@ export const RakkiScreen: ScreenFC<"Rakki"> = () => {
             source={require("../../../assets/lottie/confetti-lottie.json")}
             autoPlay
             loop
-            webStyle={{ position: "absolute", height, width: "100%", top: 0 }}
+            webStyle={{
+              position: "absolute",
+              height: lottieAnimationHeight,
+              width: "100%",
+              top: 0,
+            }}
           />
+
           <LottieView
             source={require("../../../assets/lottie/confetti-lottie.json")}
             autoPlay
             loop
             webStyle={{
               position: "absolute",
-              height,
               width: "100%",
-              top: height / 2,
+              height: lottieAnimationHeight,
+              top: lottieAnimationHeight / 2,
             }}
           />
+
           <LottieView
             source={require("../../../assets/lottie/confetti-lottie.json")}
             autoPlay
             loop
             webStyle={{
               position: "absolute",
+              height: lottieAnimationHeight,
               width: "100%",
-              height,
-              top: height,
+              top: lottieAnimationHeight,
             }}
           />
         </View>