Merge pull request #28267 from ZhenjaHorbach/upgrade-lottie-react-native

Upgrade lottie-react-native to 6.3.1
Expensify · Oct 11, 2023 · ac1bdf3 · ac1bdf3
2 parents 7968c01 + 1c08452
commit ac1bdf3
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 71 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -233,9 +233,9 @@ PODS:
   - libwebp/mux (1.2.4):
     - libwebp/demux
   - libwebp/webp (1.2.4)
-  - lottie-ios (3.4.4)
-  - lottie-react-native (5.1.6):
-    - lottie-ios (~> 3.4.0)
+  - lottie-ios (4.3.3)
+  - lottie-react-native (6.3.1):
+    - lottie-ios (~> 4.3.0)
     - React-Core
   - MapboxCommon (23.6.0)
   - MapboxCoreMaps (10.14.0):
@@ -809,7 +809,7 @@ PODS:
   - RNScreens (3.21.0):
     - React-Core
     - React-RCTImage
-  - RNSVG (13.13.0):
+  - RNSVG (13.14.0):
     - React-Core
   - SDWebImage (5.11.1):
     - SDWebImage/Core (= 5.11.1)
@@ -1197,8 +1197,8 @@ SPEC CHECKSUMS:
   hermes-engine: 81191603c4eaa01f5e4ae5737a9efcf64756c7b2
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
-  lottie-ios: 8f97d3271e155c2d688875c29cd3c74908aef5f8
-  lottie-react-native: 8f9d4be452e23f6e5ca0fdc11669dc99ab52be81
+  lottie-ios: 25e7b2675dad5c3ddad369ac9baab03560c5bfdd
+  lottie-react-native: c9f1db4f4124dcce9f8159e65d8dc6e8bcb11fb4
   MapboxCommon: 4a0251dd470ee37e7fadda8e285c01921a5e1eb0
   MapboxCoreMaps: eb07203bbb0b1509395db5ab89cd3ad6c2e3c04c
   MapboxMaps: af50ec61a7eb3b032c3f7962c6bd671d93d2a209
@@ -1282,7 +1282,7 @@ SPEC CHECKSUMS:
   RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
   RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87
   RNScreens: d037903436160a4b039d32606668350d2a808806
-  RNSVG: ed492aaf3af9ca01bc945f7a149d76d62e73ec82
+  RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -100,7 +100,7 @@
     "idb-keyval": "^6.2.1",
     "jest-when": "^3.5.2",
     "lodash": "4.17.21",
-    "lottie-react-native": "^5.1.6",
+    "lottie-react-native": "^6.3.1",
     "mapbox-gl": "^2.15.0",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.31",

diff --git a/src/components/ConfirmationPage.js b/src/components/ConfirmationPage.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Lottie from 'lottie-react-native';
+import Lottie from './Lottie';
 import * as LottieAnimations from './LottieAnimations';
 import Text from './Text';
 import styles from '../styles/styles';

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Lottie from 'lottie-react-native';
+import Lottie from './Lottie';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';

diff --git a/src/components/Lottie/Lottie.tsx b/src/components/Lottie/Lottie.tsx
@@ -0,0 +1,14 @@
+import React, {forwardRef} from 'react';
+import LottieView, {LottieViewProps} from 'lottie-react-native';
+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]}
+    />
+));
+
+export default Lottie;
diff --git a/src/components/Lottie/index.js b/src/components/Lottie/index.js
@@ -0,0 +1,3 @@
+import Lottie from './Lottie';
+
+export default Lottie;
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import PropTypes from 'prop-types';
-import Lottie from 'lottie-react-native';
+import Lottie from './Lottie';
 import * as LottieAnimations from './LottieAnimations';
 import styles from '../styles/styles';
 import useLocalize from '../hooks/useLocalize';

diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Lottie from 'lottie-react-native';
+import Lottie from '../../components/Lottie';
 import * as LottieAnimations from '../../components/LottieAnimations';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import styles from '../../styles/styles';

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -3785,6 +3785,13 @@ const styles = (theme) => ({
         lineHeight: variables.lineHeightLarge,
     },
 
+    aspectRatioLottie: (source) => {
+        if (!source.uri && typeof source === 'object' && source.w && source.h) {
+            return {aspectRatio: source.w / source.h};
+        }
+        return {};
+    },
+
     receiptDropHeaderGap: {
         backgroundColor: theme.receiptDropUIBG,
     },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Lottie from './Lottie';

		export default Lottie;