Merge pull request #14363 from LedgerHQ/feat/support-lottie

Feat: support dotlottie

Author: sarneijim

.changeset/lottie-splash-support.md

@@ -0,0 +1,9 @@
+---
+"live-mobile": minor
+---
+
+feat(mobile): Lottie splash screen support (.lottie only, no JSON fallback)
+
+- Add LottieLauncher component and .lottie format (Splashscreen.lottie) for the splash screen
+- Use lottie-react-native for animated splash
+- Splash screen load time improved from ~4s to ~3.4s

apps/ledger-live-desktop/src/mvvm/components/LoadingOverlay/index.tsx

@@ -13,7 +13,7 @@ export const LoadingOverlay = ({ theme }: { theme: "light" | "dark" }) => {
       <Box
         position="absolute"
         zIndex={1}
-        height={"100%"}
+        height="100%"
         width="100%"
         style={{
           backgroundImage: `linear-gradient(180deg, ${backgroundColor}, 80%, rgba(0,0,0,0))`,

apps/ledger-live-mobile/__mocks__/lottieMock.js

@@ -0,0 +1,3 @@
+// Global Jest mock for .lottie (dotLottie) files.
+// See: https://github.com/lottie-react-native/lottie-react-native#setup-jest-for-dotlottie-files
+module.exports = "lottie-test-file-stub";

apps/ledger-live-mobile/__mocks__/react-native-config.ts

@@ -1,4 +1,6 @@
+// Mirror runtime: env vars are strings when set. DETOX undefined = disabled (use "1" in Detox test env).
 export default {
   DEVICE_PROXY_URL: null,
   MOCK: true,
+  DETOX: undefined,
 };

apps/ledger-live-mobile/__tests__/jest-setup.js

@@ -71,6 +71,31 @@ jest.mock("react-native-share", () => ({
   default: jest.fn(),
 }));
 
+// Global mocks for Lottie and env config (used by LaunchScreen and other components)
+jest.mock("lottie-react-native", () => {
+  const React = require("react");
+  const { View, Text } = require("react-native");
+  const MockLottie = ({ source }) =>
+    React.createElement(
+      View,
+      { testID: "lottie-mock" },
+      React.createElement(Text, { testID: "lottie-source" }, JSON.stringify(source)),
+    );
+  return MockLottie;
+});
+
+// Mirror runtime: react-native-config exposes env as strings (e.g. "1"/"true" for DETOX).
+// Use undefined so (1) DETOX_ENABLED stays false and (2) truthiness checks (Config.DETOX) are falsy in unit tests.
+jest.mock("react-native-config", () => {
+  const config = { DETOX: undefined };
+  return {
+    __esModule: true,
+    get default() {
+      return config;
+    },
+  };
+});
+
 export const mockSimulateBarcodeScanned = jest.fn();
 export const mockGetCameraPermissionStatus = jest.fn(() => "granted");
 

apps/ledger-live-mobile/index.d.ts

@@ -7,3 +7,9 @@ declare module "*.png";
 declare module "*.jpg";
 declare module "*.jpeg";
 declare module "*.webp";
+
+// For Lottie/DotLottie asset (Metro resolves to asset id number)
+declare module "*.lottie" {
+  const value: number;
+  export default value;
+}

apps/ledger-live-mobile/jest.config.js

@@ -109,5 +109,7 @@ module.exports = {
       "<rootDir>/../../node_modules/.pnpm/@tanstack+react-query@5.28.9_react@19.0.0/node_modules/@tanstack/react-query",
     // Redirect to mock for pre-compiled dependencies (like @ledgerhq/native-ui)
     "^react-native-worklets$": "<rootDir>/__mocks__/react-native-worklets.js",
+    // Global mock for .lottie (dotLottie) files
+    "\\.(lottie)$": "<rootDir>/__mocks__/lottieMock.js",
   },
 };

apps/ledger-live-mobile/metro.config.js

@@ -31,6 +31,8 @@ const forcedDependencies = [
 const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
 const removeStarPath = moduleName => moduleName.replace("/*", "");
 
+const defaultConfig = getDefaultConfig(__dirname);
+
 const buildTsAlias = (conf = {}) =>
   Object.keys(conf).reduce(
     (acc, moduleName) => ({
@@ -115,6 +117,9 @@ const metroConfig = {
     unstable_conditionNames: ["require", "react-native", "browser"],
     nodeModulesPaths,
     resolverMainFields: ["react-native", "browser", "main"],
+    assetExts: [
+      ...new Set([...(defaultConfig.resolver?.assetExts ?? []), "lottie"]),
+    ],
     extraNodeModules: {
       ...require("node-libs-react-native"),
       fs: require.resolve("react-native-level-fs"),
@@ -141,7 +146,7 @@ const metroConfig = {
   },
 };
 
-module.exports = withRozenite(mergeConfig(getDefaultConfig(__dirname), metroConfig), {
+module.exports = withRozenite(mergeConfig(defaultConfig, metroConfig), {
   enabled: process.env.WITH_ROZENITE === "true",
   include: [
     "@rozenite/network-activity-plugin",

apps/ledger-live-mobile/src/mvvm/components/Lottie/Lottie.test.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { render, screen } from "@tests/test-renderer";
+import { Lottie } from "./index";
+
+describe("Lottie", () => {
+  beforeEach(() => {
+    const Config = require("react-native-config").default;
+    Config.DETOX = undefined;
+  });
+
+  it("renders LottieView when source has uri", () => {
+    render(<Lottie source={{ uri: "file:///test.lottie" }} />);
+    expect(screen.getByTestId("lottie-source")).toBeOnTheScreen();
+    expect(screen.getByTestId("lottie-mock")).toBeOnTheScreen();
+    expect(screen.getByTestId("lottie-source").props.children).toContain("file:///test.lottie");
+  });
+
+  it("renders empty view when source is null", () => {
+    render(<Lottie source={null} />);
+    expect(screen.queryByTestId("lottie-mock")).toBeNull();
+  });
+
+  it("renders empty view when source has no uri", () => {
+    render(<Lottie source={{ width: 1, height: 1 } as unknown as { uri: string }} />);
+    expect(screen.queryByTestId("lottie-mock")).toBeNull();
+  });
+
+  it("uses default testID for detox view", () => {
+    const Config = require("react-native-config").default;
+    Config.DETOX = "1";
+    render(<Lottie source={{ uri: "file:///test.lottie" }} />);
+    expect(screen.getByTestId("lottie-detox")).toBeOnTheScreen();
+    expect(screen.queryByTestId("lottie-mock")).toBeNull();
+    Config.DETOX = undefined;
+  });
+
+  it("uses custom testID for detox view when provided", () => {
+    const Config = require("react-native-config").default;
+    Config.DETOX = "1";
+    render(<Lottie source={{ uri: "file:///test.lottie" }} testID="splash-lottie" />);
+    expect(screen.getByTestId("splash-lottie-detox")).toBeOnTheScreen();
+    expect(screen.queryByTestId("lottie-mock")).toBeNull();
+    Config.DETOX = undefined;
+  });
+});

apps/ledger-live-mobile/src/mvvm/components/Lottie/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { View, ViewStyle } from "react-native";
+import LottieView from "lottie-react-native";
+import Config from "react-native-config";
+
+export type LottieSource = { uri: string } | null;
+
+type LottieProps = {
+  source: LottieSource;
+  style?: ViewStyle;
+  loop?: boolean;
+  autoPlay?: boolean;
+  speed?: number;
+  testID?: string;
+};
+
+/**
+ * Shared Lottie wrapper that handles Detox bypass (empty view in E2E)
+ * and invalid source. Use this instead of lottie-react-native directly
+ * so Detox logic is consistent across the app.
+ */
+export function Lottie({
+  source,
+  style,
+  loop = false,
+  autoPlay = true,
+  speed = 1,
+  testID = "lottie",
+}: LottieProps) {
+  if (Config.DETOX) {
+    return <View testID={`${testID}-detox`} style={style} />;
+  }
+  if (!source?.uri) {
+    return <View style={style} />;
+  }
+  return (
+    <LottieView
+      testID={testID}
+      source={source}
+      style={style}
+      loop={loop}
+      autoPlay={autoPlay}
+      speed={speed}
+    />
+  );
+}