From c388ed6748bf3e04de45bfb9fb7195c6be98e7ec Mon Sep 17 00:00:00 2001
From: Abdelrahman Ashraf <a.theashraf@gmail.com>
Date: Wed, 18 Dec 2024 17:42:06 +0700
Subject: [PATCH] fix(react): add missing `layout` prop (#433)

---
 .changeset/sixty-shoes-roll.md                |  5 +++
 packages/react/src/base-dotlottie-react.tsx   |  9 ++++
 packages/react/tests/dotlottie-react.spec.tsx | 44 +++++++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 .changeset/sixty-shoes-roll.md

diff --git a/.changeset/sixty-shoes-roll.md b/.changeset/sixty-shoes-roll.md
new file mode 100644
index 00000000..472c9e2f
--- /dev/null
+++ b/.changeset/sixty-shoes-roll.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-react': patch
+---
+
+fix: add missing layout prop
diff --git a/packages/react/src/base-dotlottie-react.tsx b/packages/react/src/base-dotlottie-react.tsx
index e07a878f..3e5ee762 100644
--- a/packages/react/src/base-dotlottie-react.tsx
+++ b/packages/react/src/base-dotlottie-react.tsx
@@ -54,6 +54,7 @@ export const BaseDotLottieReact = <T extends DotLottie | DotLottieWorker>({
   createDotLottie,
   data,
   dotLottieRefCallback,
+  layout,
   loop,
   mode,
   playOnHover,
@@ -89,6 +90,7 @@ export const BaseDotLottieReact = <T extends DotLottie | DotLottieWorker>({
     workerId,
     src,
     data,
+    layout,
     renderConfig,
   };
 
@@ -223,6 +225,13 @@ export const BaseDotLottieReact = <T extends DotLottie | DotLottieWorker>({
     dotLottieRef.current?.setThemeData(themeData ?? '');
   }, [themeData]);
 
+  useEffect(() => {
+    dotLottieRef.current?.setLayout({
+      align: layout?.align ?? [0.5, 0.5],
+      fit: layout?.fit ?? 'contain',
+    });
+  }, [layout?.align[0], layout?.align[1], layout?.fit]);
+
   return (
     <div
       className={className}
diff --git a/packages/react/tests/dotlottie-react.spec.tsx b/packages/react/tests/dotlottie-react.spec.tsx
index 6e099e64..78d89df1 100644
--- a/packages/react/tests/dotlottie-react.spec.tsx
+++ b/packages/react/tests/dotlottie-react.spec.tsx
@@ -684,4 +684,48 @@ describe.each([
       speed: 2,
     });
   });
+
+  test('calls dotLottie.setLayout when layout prop changes', async () => {
+    const onLoad = vi.fn();
+    const dotLottieRefCallback = vi.fn();
+
+    const { rerender } = render(<Component src={dotLottieSrc} autoplay dotLottieRefCallback={dotLottieRefCallback} />);
+
+    await vi.waitFor(() => {
+      expect(dotLottieRefCallback).toHaveBeenCalledTimes(1);
+    });
+
+    const dotLottie = dotLottieRefCallback.mock.calls[0]?.[0];
+
+    dotLottie?.addEventListener('load', onLoad);
+
+    await vi.waitFor(() => {
+      expect(onLoad).toHaveBeenCalledTimes(1);
+    });
+
+    const setLayout = vi.spyOn(dotLottie, 'setLayout');
+
+    rerender(
+      <Component
+        src={dotLottieSrc}
+        autoplay
+        layout={{ align: [0.5, 0.5], fit: 'contain' }}
+        dotLottieRefCallback={dotLottieRefCallback}
+      />,
+    );
+
+    await vi.waitFor(() => {
+      expect(setLayout).toHaveBeenCalledTimes(1);
+    });
+
+    expect(setLayout).toHaveBeenCalledWith({ align: [0.5, 0.5], fit: 'contain' });
+
+    rerender(<Component src={dotLottieSrc} autoplay dotLottieRefCallback={dotLottieRefCallback} />);
+
+    await vi.waitFor(() => {
+      expect(setLayout).toHaveBeenCalledTimes(2);
+    });
+
+    expect(setLayout).toHaveBeenCalledWith({ align: [0.5, 0.5], fit: 'contain' });
+  });
 });