Merge pull request #29975 from software-mansion-labs/@kosmydel/lottie-react-native-web-support

Author: roryabraham

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

assets/animations/ExpensifyLounge.json

@@ -180,6 +180,10 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                 resourceQuery: /raw/,
                 type: 'asset/source',
             },
+            {
+                test: /\.lottie$/,
+                type: 'asset/resource',
+            },
         ],
     },
     resolve: {

assets/animations/ExpensifyLounge.lottie

@@ -26,4 +26,7 @@ module.exports = {
     setupFiles: ['<rootDir>/jest/setup.js', './node_modules/@react-native-google-signin/google-signin/jest/build/setup.js'],
     setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect', '<rootDir>/jest/setupAfterEnv.js'],
     cacheDirectory: '<rootDir>/.jest-cache',
+    moduleNameMapper: {
+        '\\.(lottie)$': '<rootDir>/__mocks__/fileMock.js',
+    },
 };

assets/animations/FastMoney.json

@@ -23,7 +23,7 @@ const e2eSourceExts = ['e2e.js', 'e2e.ts'];
  */
 const config = {
     resolver: {
-        assetExts: _.filter(defaultAssetExts, (ext) => ext !== 'svg'),
+        assetExts: [..._.filter(defaultAssetExts, (ext) => ext !== 'svg'), 'lottie'],
         // When we run the e2e tests we want files that have the extension e2e.js to be resolved as source files
         sourceExts: [...(isE2ETesting ? e2eSourceExts : []), ...defaultSourceExts, 'jsx', 'svg'],
         resolveRequest: (context, moduleName, platform) => {

assets/animations/FastMoney.lottie

@@ -70,7 +70,6 @@
     "@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",

assets/animations/Fireworks.json

@@ -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 = {

assets/animations/Fireworks.lottie

@@ -1,22 +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) => {
-    const aspectRatioStyle = styles.aspectRatioLottie(props.source);
+type Props = {
+    source: DotLottieAnimation;
+} & Omit<LottieViewProps, 'source'>;
+
+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 (
-        <View style={[aspectRatioStyle, styles.w100]}>
-            <LottieView
-                // eslint-disable-next-line
-                {...props}
-                ref={ref}
-                style={[aspectRatioStyle, props.style]}
-                webStyle={{...aspectRatioStyle, ...props.webStyle}}
-            />
-        </View>
+        <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 Lottie;
+export default forwardRef(Lottie);

assets/animations/Hands.json

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

assets/animations/Hands.lottie

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

assets/animations/Magician.json

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

assets/animations/Magician.lottie

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

assets/animations/PreferencesDJ.json

@@ -4,7 +4,7 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import MenuItem from '@components/MenuItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';

assets/animations/PreferencesDJ.lottie

@@ -4,7 +4,7 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Switch from '@components/Switch';
 import TestToolMenu from '@components/TestToolMenu';

assets/animations/ReviewingBankInfo.json

@@ -1,7 +1,7 @@
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';

assets/animations/ReviewingBankInfo.lottie

@@ -5,7 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';

assets/animations/Safe.json

@@ -1,6 +1,6 @@
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import useLocalize from '@hooks/useLocalize';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';

assets/animations/Safe.lottie

@@ -7,7 +7,7 @@ import _ from 'underscore';
 import BigNumberPad from '@components/BigNumberPad';
 import Button from '@components/Button';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import MagicCodeInput from '@components/MagicCodeInput';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';

assets/animations/SaveTheWorld.json

@@ -4,7 +4,7 @@ import Button from '@components/Button';
 import FeatureList from '@components/FeatureList';
 import * as Illustrations from '@components/Icon/Illustrations';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import themeColors from '@styles/themes/default';

assets/animations/SaveTheWorld.lottie

@@ -1,6 +1,6 @@
 import React from 'react';
 import Lottie from '@components/Lottie';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import styles from '@styles/styles';
 import variables from '@styles/variables';

assets/animations/WorkspacePlanet.json

@@ -7,7 +7,7 @@ import FeatureList from '@components/FeatureList';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
-import * as LottieAnimations from '@components/LottieAnimations';
+import LottieAnimations from '@components/LottieAnimations';
 import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import useLocalize from '@hooks/useLocalize';

assets/animations/WorkspacePlanet.lottie

@@ -6,6 +6,7 @@ import {AnimatableNumericValue, Animated, ImageStyle, TextStyle, ViewStyle} from
 import {CustomAnimation} from 'react-native-animatable';
 import {PickerStyle} from 'react-native-picker-select';
 import {MixedStyleDeclaration, MixedStyleRecord} from 'react-native-render-html';
+import DotLottieAnimation from '@components/LottieAnimations/types';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
 import addOutlineWidth from './addOutlineWidth';
@@ -3976,12 +3977,7 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightXLarge,
         },
 
-        aspectRatioLottie: (source) => {
-            if (!source.uri && typeof source === 'object' && source.w && source.h) {
-                return {aspectRatio: source.w / source.h};
-            }
-            return {};
-        },
+        aspectRatioLottie: (animation: DotLottieAnimation) => ({aspectRatio: animation.w / animation.h, width: '100%'}),
 
         receiptDropHeaderGap: {
             backgroundColor: theme.receiptDropUIBG,

config/webpack/webpack.common.js

@@ -16,4 +16,9 @@ declare module '*.svg' {
     export default content;
 }
 
+declare module '*.lottie' {
+    const value: import('lottie-react-native').LottieViewProps.source;
+    export default value;
+}
+
 declare module 'react-native-device-info/jest/react-native-device-info-mock';

jest.config.js

@@ -123,6 +123,10 @@
             transition-duration: 250ms;
             transition-property: opacity;
         }
+
+        .animation {
+            display: flex;
+        }
     </style>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, interactive-widget=resizes-content">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">