Merge pull request #30772 from software-mansion-labs/@kosmydel/upgrade-lottie-6-4-0

Upgrade `lottie-react-native` to 6.4.0

Author: roryabraham

config/webpack/webpack.common.js

@@ -187,7 +187,6 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             'react-native-config': 'react-web-config',
             'react-native$': '@expensify/react-native-web',
             'react-native-web': '@expensify/react-native-web',
-            'lottie-react-native': 'react-native-web-lottie',
 
             // Module alias for web & desktop
             // https://webpack.js.org/configuration/resolve/#resolvealias

package-lock.json

@@ -58,6 +58,7 @@
     "setup-https": "mkcert -install && mkcert -cert-file config/webpack/certificate.pem -key-file config/webpack/key.pem dev.new.expensify.com localhost 127.0.0.1"
   },
   "dependencies": {
+    "@dotlottie/react-player": "^1.6.3",
     "@expensify/react-native-web": "0.18.15",
     "@formatjs/intl-datetimeformat": "^6.10.0",
     "@formatjs/intl-getcanonicallocales": "^2.2.0",
@@ -69,6 +70,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",
@@ -105,7 +107,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",
@@ -161,7 +163,6 @@
     "react-native-view-shot": "^3.6.0",
     "react-native-vision-camera": "^2.16.2",
     "react-native-web-linear-gradient": "^1.1.2",
-    "react-native-web-lottie": "^1.4.4",
     "react-native-webview": "^11.17.2",
     "react-pdf": "^6.2.2",
     "react-plaid-link": "3.3.2",
@@ -174,8 +175,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",
@@ -186,6 +185,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": "^2.1.0",
     "@jest/globals": "^29.5.0",
     "@octokit/core": "4.0.4",
@@ -205,6 +205,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",

package.json

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

patches/react-native-web-lottie+1.4.4.patch

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

src/components/ConfirmationPage.js

@@ -2,13 +2,18 @@ import LottieView, {LottieViewProps} from 'lottie-react-native';
 import React, {forwardRef} from 'react';
 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]}
-    />
-));
+const Lottie = forwardRef<LottieView, LottieViewProps>((props: LottieViewProps, ref) => {
+    const aspectRatioStyle = styles.aspectRatioLottie(props.source);
+
+    return (
+        <LottieView
+            // eslint-disable-next-line
+            {...props}
+            ref={ref}
+            style={[aspectRatioStyle, props.style]}
+            webStyle={{...aspectRatioStyle, ...props.webStyle}}
+        />
+    );
+});
 
 export default Lottie;

src/components/IllustratedHeaderPageLayout.js

@@ -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/components/Lottie/Lottie.tsx

@@ -34,6 +34,7 @@ function SignInHeroImage(props) {
             loop
             autoPlay
             style={[styles.alignSelfCenter, imageSize]}
+            webStyle={{...styles.alignSelfCenter, ...imageSize}}
         />
     );
 }