diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 1f08d51d24a8..a4a8089c9c05 100644 --- 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 index 9a029b06ced4..6eb71d25914b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,7 +57,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", @@ -38014,22 +38014,11 @@ "loose-envify": "cli.js" } }, - "node_modules/lottie-ios": { - "version": "3.5.0", - "license": "Apache-2.0", - "peer": true - }, "node_modules/lottie-react-native": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-5.1.6.tgz", - "integrity": "sha512-vhdeZstXMfuVKwnddYWjJgQ/1whGL58IJEJu/iSf0XQ5gAb4pp/+vy91mdYQLezlb8Aw4Vu3fKnqErJL2hwchg==", - "license": "Apache-2.0", - "dependencies": { - "invariant": "^2.2.2", - "react-native-safe-modules": "^1.0.3" - }, + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-6.3.1.tgz", + "integrity": "sha512-M18nAVYeGMF//bhL27D2zuMcrFPH0jbD/deBvcWi0CCcfZf6LQfx45xt+cuDqwr5nh6dMm+ta8KfZJmkbNhtlg==", "peerDependencies": { - "lottie-ios": "^3.4.0", "react": "*", "react-native": ">=0.46", "react-native-windows": ">=0.63.x" @@ -38040,24 +38029,6 @@ } } }, - "node_modules/lottie-react-native/node_modules/dedent": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.6.0.tgz", - "integrity": "sha512-cSfRWjXJtZQeRuZGVvDrJroCR5V2UvBNUMHsPCdNYzuAG8b9V8aAy3KUcdQrGQPXs17Y+ojbPh1aOCplg9YR9g==", - "license": "MIT" - }, - "node_modules/lottie-react-native/node_modules/react-native-safe-modules": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/react-native-safe-modules/-/react-native-safe-modules-1.0.3.tgz", - "integrity": "sha512-DUxti4Z+AgJ/ZsO5U7p3uSCUBko8JT8GvFlCeOXk9bMd+4qjpoDvMYpfbixXKgL88M+HwmU/KI1YFN6gsQZyBA==", - "license": "MIT", - "dependencies": { - "dedent": "^0.6.0" - }, - "peerDependencies": { - "react-native": "*" - } - }, "node_modules/lottie-web": { "version": "5.10.2", "license": "MIT" @@ -80389,33 +80360,11 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, - "lottie-ios": { - "version": "3.5.0", - "peer": true - }, "lottie-react-native": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-5.1.6.tgz", - "integrity": "sha512-vhdeZstXMfuVKwnddYWjJgQ/1whGL58IJEJu/iSf0XQ5gAb4pp/+vy91mdYQLezlb8Aw4Vu3fKnqErJL2hwchg==", - "requires": { - "invariant": "^2.2.2", - "react-native-safe-modules": "^1.0.3" - }, - "dependencies": { - "dedent": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.6.0.tgz", - "integrity": "sha512-cSfRWjXJtZQeRuZGVvDrJroCR5V2UvBNUMHsPCdNYzuAG8b9V8aAy3KUcdQrGQPXs17Y+ojbPh1aOCplg9YR9g==" - }, - "react-native-safe-modules": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/react-native-safe-modules/-/react-native-safe-modules-1.0.3.tgz", - "integrity": "sha512-DUxti4Z+AgJ/ZsO5U7p3uSCUBko8JT8GvFlCeOXk9bMd+4qjpoDvMYpfbixXKgL88M+HwmU/KI1YFN6gsQZyBA==", - "requires": { - "dedent": "^0.6.0" - } - } - } + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-6.3.1.tgz", + "integrity": "sha512-M18nAVYeGMF//bhL27D2zuMcrFPH0jbD/deBvcWi0CCcfZf6LQfx45xt+cuDqwr5nh6dMm+ta8KfZJmkbNhtlg==", + "requires": {} }, "lottie-web": { "version": "5.10.2" diff --git a/package.json b/package.json index 4533fa30d502..e0f296fd3eb7 100644 --- 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 index ffa3c780f154..4549d6ca6072 100644 --- 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 index ac916117094b..c45f5e2452dd 100644 --- 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 new file mode 100644 index 000000000000..97c7e8fffdd1 --- /dev/null +++ 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((props: LottieViewProps, ref) => ( + +)); + +export default Lottie; diff --git a/src/components/Lottie/index.js b/src/components/Lottie/index.js new file mode 100644 index 000000000000..ec4ae54b355d --- /dev/null +++ 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 index 21aac35f4005..bd3011a74ffb 100644 --- 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 index e67497a20e15..6d53aa25e9af 100644 --- 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 index 6f08e5c5303e..6d1c3e700236 100644 --- 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, },