Merge pull request #14393 from Expensify/Rory-Lottie

Setup Lottie

config/webpack/webpack.common.js

@@ -210,6 +210,7 @@ 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',
         },
 
         // React Native libraries may have web-specific module implementations that appear with the extension `.web.js`

ios/Podfile.lock

@@ -212,6 +212,10 @@ PODS:
   - libwebp/mux (1.2.4):
     - libwebp/demux
   - libwebp/webp (1.2.4)
+  - lottie-ios (3.4.4)
+  - lottie-react-native (5.1.4):
+    - lottie-ios (~> 3.4.0)
+    - React-Core
   - nanopb (2.30908.0):
     - nanopb/decode (= 2.30908.0)
     - nanopb/encode (= 2.30908.0)
@@ -677,6 +681,7 @@ DEPENDENCIES:
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../node_modules/react-native/sdks/hermes/hermes-engine.podspec`)
   - libevent (~> 2.1.12)
+  - lottie-react-native (from `../node_modules/lottie-react-native`)
   - "onfido-react-native-sdk (from `../node_modules/@onfido/react-native-sdk`)"
   - OpenSSL-Universal (= 1.1.1100)
   - Permission-Camera (from `../node_modules/react-native-permissions/ios/Camera`)
@@ -775,6 +780,7 @@ SPEC REPOS:
     - GoogleUtilities
     - libevent
     - libwebp
+    - lottie-ios
     - nanopb
     - Onfido
     - OpenSSL-Universal
@@ -798,6 +804,8 @@ EXTERNAL SOURCES:
     :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
   hermes-engine:
     :podspec: "../node_modules/react-native/sdks/hermes/hermes-engine.podspec"
+  lottie-react-native:
+    :path: "../node_modules/lottie-react-native"
   onfido-react-native-sdk:
     :path: "../node_modules/@onfido/react-native-sdk"
   Permission-Camera:
@@ -966,6 +974,8 @@ SPEC CHECKSUMS:
   hermes-engine: 3623325e0d0676a45fbc544d72c57dd79fce7446
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
+  lottie-ios: 8f97d3271e155c2d688875c29cd3c74908aef5f8
+  lottie-react-native: b702fab740cdb952a8e2354713d3beda63ff97b0
   nanopb: a0ba3315591a9ae0a16a309ee504766e90db0c96
   Onfido: bdbc3ed45598aa106ab2ea021d94e2e28c6b5be3
   onfido-react-native-sdk: 5856e76fbfc0eb7b70b0f76fa1059830932a5c88

package.json

@@ -75,6 +75,7 @@
     "jest-when": "^3.5.2",
     "localforage": "^1.10.0",
     "lodash": "4.17.21",
+    "lottie-react-native": "^5.1.4",
     "metro-config": "^0.71.3",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.31",
@@ -112,6 +113,7 @@
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "3.17.0",
     "react-native-svg": "^13.5.0",
+    "react-native-web-lottie": "^1.4.4",
     "react-native-webview": "^11.17.2",
     "react-pdf": "5.7.2",
     "react-plaid-link": "3.3.2",

src/components/ConfirmationPage.js

@@ -1,15 +1,16 @@
 import React from 'react';
-import {Image, View} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import Lottie from 'lottie-react-native';
+import FireworksAnimation from '../../assets/animations/Fireworks.json';
 import Text from './Text';
 import styles from '../styles/styles';
 import Button from './Button';
 import FixedFooter from './FixedFooter';
-import CONST from '../CONST';
 
 const propTypes = {
     /** The asset to render */
-    illustration: PropTypes.string,
+    animation: PropTypes.string,
 
     /** Heading of the confirmation page */
     heading: PropTypes.string,
@@ -28,7 +29,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    illustration: `${CONST.CLOUDFRONT_URL}/images/animations/animation__fireworks.gif`,
+    animation: FireworksAnimation,
     heading: '',
     description: '',
     buttonText: '',
@@ -39,8 +40,10 @@ const defaultProps = {
 const ConfirmationPage = props => (
     <>
         <View style={[styles.screenCenteredContainer, styles.alignItemsCenter]}>
-            <Image
-                source={{uri: props.illustration}}
+            <Lottie
+                source={props.animation}
+                autoPlay
+                loop
                 style={styles.confirmationAnimation}
             />
             <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2]}>

src/components/ReimbursementAccountLoadingIndicator.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import {Image, StyleSheet, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import PropTypes from 'prop-types';
+import Lottie from 'lottie-react-native';
+import ReviewingBankInfoAnimation from '../../assets/animations/ReviewingBankInfo.json';
 import styles from '../styles/styles';
-import CONST from '../CONST';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Text from './Text';
 import HeaderWithCloseButton from './HeaderWithCloseButton';
@@ -33,11 +34,11 @@ const ReimbursementAccountLoadingIndicator = props => (
         <FullPageOfflineBlockingView>
             {props.isSubmittingVerificationsData ? (
                 <View style={[styles.pageWrapper]}>
-                    <Image
-                        source={{uri: `${CONST.CLOUDFRONT_URL}/images/animations/animation_accountreview.gif`}}
-                        style={[
-                            styles.loadingVBAAnimation,
-                        ]}
+                    <Lottie
+                        source={ReviewingBankInfoAnimation}
+                        autoPlay
+                        loop
+                        style={styles.loadingVBAAnimation}
                     />
                     <View style={[styles.ph6]}>
                         <Text style={[styles.textAlignCenter]}>

src/pages/EnablePayments/ActivateStep.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
+import FireworksAnimation from '../../../assets/animations/Fireworks.json';
+import ReviewingBankInfoAnimation from '../../../assets/animations/ReviewingBankInfo.json';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -30,7 +32,7 @@ const defaultProps = {
 
 const ActivateStep = (props) => {
     const isGoldWallet = props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD;
-    const illustration = `${CONST.CLOUDFRONT_URL}/images/animations/${isGoldWallet ? 'animation__fireworks' : 'animation_accountreview'}.gif`;
+    const animation = isGoldWallet ? FireworksAnimation : ReviewingBankInfoAnimation;
     const continueButtonText = props.walletTerms.chatReportID ? props.translate('activateStep.continueToPayment') : props.translate('activateStep.continueToTransfer');
 
     return (
@@ -42,7 +44,7 @@ const ActivateStep = (props) => {
                 onBackButtonPress={() => Navigation.goBack()}
             />
             <ConfirmationPage
-                illustration={illustration}
+                animation={animation}
                 heading={props.translate(`activateStep.${isGoldWallet ? 'activated' : 'checkBackLater'}Title`)}
                 description={props.translate(`activateStep.${isGoldWallet ? 'activated' : 'checkBackLater'}Message`)}
                 shouldShowButton={isGoldWallet}