Migrate animations to app assets and .lottie files

config/webpack/webpack.common.js

@@ -180,6 +180,10 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                 resourceQuery: /raw/,
                 type: 'asset/source',
             },
+            {
+                test: /\.lottie$/,
+                type: 'asset/resource',
+            },
         ],
     },
     resolve: {
@@ -188,7 +192,6 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             'react-native$': '@expensify/react-native-web',
             'react-native-web': '@expensify/react-native-web',
             'react-content-loader/native': 'react-content-loader',
-            'lottie-react-native': 'react-native-web-lottie',
 
             // Module alias for web & desktop
             // https://webpack.js.org/configuration/resolve/#resolvealias

ios/Podfile.lock

@@ -234,8 +234,8 @@ PODS:
     - libwebp/demux
   - libwebp/webp (1.2.4)
   - lottie-ios (4.3.3)
-  - lottie-react-native (6.3.1):
-    - lottie-ios (~> 4.3.0)
+  - lottie-react-native (6.4.0):
+    - lottie-ios (~> 4.3.3)
     - React-Core
   - MapboxCommon (23.6.0)
   - MapboxCoreMaps (10.14.0):
@@ -1203,7 +1203,7 @@ SPEC CHECKSUMS:
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
   lottie-ios: 25e7b2675dad5c3ddad369ac9baab03560c5bfdd
-  lottie-react-native: c9f1db4f4124dcce9f8159e65d8dc6e8bcb11fb4
+  lottie-react-native: 3a3084faddd3891c276f23fd6e797b83f2021bbc
   MapboxCommon: 4a0251dd470ee37e7fadda8e285c01921a5e1eb0
   MapboxCoreMaps: eb07203bbb0b1509395db5ab89cd3ad6c2e3c04c
   MapboxMaps: af50ec61a7eb3b032c3f7962c6bd671d93d2a209

metro.config.js

@@ -21,7 +21,7 @@ if (isUsingMockAPI) {
  */
 const config = {
     resolver: {
-        assetExts: _.filter(defaultAssetExts, (ext) => ext !== 'svg'),
+        assetExts: [..._.filter(defaultAssetExts, (ext) => ext !== 'svg'), 'lottie'],
         sourceExts: [...defaultSourceExts, 'jsx', 'svg'],
         resolveRequest: (context, moduleName, platform) => {
             const resolution = context.resolveRequest(context, moduleName, platform);

package.json

@@ -68,6 +68,7 @@
     "@invertase/react-native-apple-authentication": "^2.2.2",
     "@kie/act-js": "^2.0.1",
     "@kie/mock-github": "^1.0.0",
+    "@lottiefiles/react-lottie-player": "^3.5.3",
     "@oguzhnatly/react-native-image-manipulator": "github:Expensify/react-native-image-manipulator#5cdae3d4455b03a04c57f50be3863e2fe6c92c52",
     "@onfido/react-native-sdk": "8.3.0",
     "@react-native-async-storage/async-storage": "^1.17.10",
@@ -104,7 +105,7 @@
     "idb-keyval": "^6.2.1",
     "jest-when": "^3.5.2",
     "lodash": "4.17.21",
-    "lottie-react-native": "^6.3.1",
+    "lottie-react-native": "^6.4.0",
     "mapbox-gl": "^2.15.0",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.31",
@@ -173,8 +174,6 @@
     "underscore": "^1.13.1"
   },
   "devDependencies": {
-    "@dword-design/eslint-plugin-import-alias": "^4.0.8",
-    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@actions/core": "1.10.0",
     "@actions/github": "5.1.1",
     "@babel/core": "^7.20.0",
@@ -185,6 +184,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.21.5",
     "@babel/runtime": "^7.20.0",
+    "@dword-design/eslint-plugin-import-alias": "^4.0.8",
     "@electron/notarize": "^1.2.3",
     "@jest/globals": "^29.5.0",
     "@octokit/core": "4.0.4",
@@ -204,6 +204,7 @@
     "@svgr/webpack": "^6.0.0",
     "@testing-library/jest-native": "5.4.1",
     "@testing-library/react-native": "11.5.1",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/concurrently": "^7.0.0",
     "@types/jest": "^29.5.2",
     "@types/jest-when": "^3.5.2",

src/components/ConfirmationPage.js

@@ -5,7 +5,7 @@ import styles from '@styles/styles';
 import Button from './Button';
 import FixedFooter from './FixedFooter';
 import Lottie from './Lottie';
-import * as LottieAnimations from './LottieAnimations';
+import LottieAnimations from './LottieAnimations';
 import Text from './Text';
 
 const propTypes = {
@@ -47,6 +47,7 @@ function ConfirmationPage(props) {
                     autoPlay
                     loop
                     style={styles.confirmationAnimation}
+                    webStyle={styles.confirmationAnimationWeb}
                 />
                 <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2]}>{props.heading}</Text>
                 <Text style={styles.textAlignCenter}>{props.description}</Text>

src/components/IllustratedHeaderPageLayout.js

@@ -41,6 +41,7 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                     <Lottie
                         source={illustration}
                         style={styles.w100}
+                        webStyle={styles.w100}
                         autoPlay
                         loop
                     />

src/components/Lottie/Lottie.tsx

@@ -1,14 +1,39 @@
 import LottieView, {LottieViewProps} from 'lottie-react-native';
-import React, {forwardRef} from 'react';
+import React, {ForwardedRef, forwardRef} from 'react';
+import {View} from 'react-native';
+import DotLottieAnimation from '@components/LottieAnimations/types';
+import useNetwork from '@hooks/useNetwork';
 import styles from '@styles/styles';
 
-const Lottie = forwardRef<LottieView, LottieViewProps>((props: LottieViewProps, ref) => (
-    <LottieView
-        // eslint-disable-next-line
-        {...props}
-        ref={ref}
-        style={[styles.aspectRatioLottie(props.source), props.style]}
-    />
-));
+type Props = {
+    source: DotLottieAnimation;
+} & Omit<LottieViewProps, 'source'>;
 
-export default Lottie;
+function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieView>) {
+    const [isError, setIsError] = React.useState(false);
+
+    useNetwork({onReconnect: () => setIsError(false)});
+
+    const aspectRatioStyle = styles.aspectRatioLottie(source);
+
+    // If the image fails to load, we'll just render an empty view
+    if (isError) {
+        return <View style={aspectRatioStyle} />;
+    }
+
+    return (
+        <LottieView
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            source={source.file}
+            ref={ref}
+            style={[aspectRatioStyle, props.style]}
+            webStyle={{...aspectRatioStyle, ...webStyle}}
+            onAnimationFailure={() => setIsError(true)}
+        />
+    );
+}
+
+Lottie.displayName = 'Lottie';
+
+export default forwardRef(Lottie);

src/components/LottieAnimations/index.tsx

@@ -0,0 +1,56 @@
+import DotLottieAnimation from './types';
+
+const DotLottieAnimations: Record<string, DotLottieAnimation> = {
+    ExpensifyLounge: {
+        file: require('@assets/animations/ExpensifyLounge.lottie'),
+        w: 1920,
+        h: 1080,
+    },
+    FastMoney: {
+        file: require('@assets/animations/FastMoney.lottie'),
+        w: 375,
+        h: 240,
+    },
+    Fireworks: {
+        file: require('@assets/animations/Fireworks.lottie'),
+        w: 360,
+        h: 360,
+    },
+    Hands: {
+        file: require('@assets/animations/Hands.lottie'),
+        w: 375,
+        h: 375,
+    },
+    PreferencesDJ: {
+        file: require('@assets/animations/PreferencesDJ.lottie'),
+        w: 375,
+        h: 240,
+    },
+    ReviewingBankInfo: {
+        file: require('@assets/animations/ReviewingBankInfo.lottie'),
+        w: 280,
+        h: 280,
+    },
+    WorkspacePlanet: {
+        file: require('@assets/animations/WorkspacePlanet.lottie'),
+        w: 375,
+        h: 240,
+    },
+    SaveTheWorld: {
+        file: require('@assets/animations/SaveTheWorld.lottie'),
+        w: 375,
+        h: 240,
+    },
+    Safe: {
+        file: require('@assets/animations/Safe.lottie'),
+        w: 625,
+        h: 400,
+    },
+    Magician: {
+        file: require('@assets/animations/Magician.lottie'),
+        w: 853,
+        h: 480,
+    },
+};
+
+export default DotLottieAnimations;

src/components/LottieAnimations/types.ts

@@ -0,0 +1,10 @@
+import {LottieViewProps} from 'lottie-react-native';
+
+type DotLottieAnimation = {
+    name?: string;
+    file: LottieViewProps['source'];
+    w: number;
+    h: number;
+};
+
+export default DotLottieAnimation;

src/components/ReimbursementAccountLoadingIndicator.js

@@ -7,7 +7,7 @@ import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlocking
 import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import Lottie from './Lottie';
-import * as LottieAnimations from './LottieAnimations';
+import LottieAnimations from './LottieAnimations';
 import ScreenWrapper from './ScreenWrapper';
 import Text from './Text';
 
@@ -39,6 +39,7 @@ function ReimbursementAccountLoadingIndicator(props) {
                             autoPlay
                             loop
                             style={styles.loadingVBAAnimation}
+                            webStyle={styles.loadingVBAAnimationWeb}
                         />
                         <View style={[styles.ph6]}>
                             <Text style={[styles.textAlignCenter]}>{translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>

src/pages/EnablePayments/ActivateStep.js

@@ -3,7 +3,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import ConfirmationPage from '@components/ConfirmationPage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import compose from '@libs/compose';
 import * as PaymentMethods from '@userActions/PaymentMethods';