Update styles for lottie

Expensify · Oct 4, 2023 · 4b1e93f · 4b1e93f
1 parent c0b5f21
commit 4b1e93f
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 77 deletions.
diff --git a/patches/lottie-react-native+6.3.1.patch b/patches/lottie-react-native+6.3.1.patch
diff --git a/src/components/ConfirmationPage.js b/src/components/ConfirmationPage.js
@@ -46,7 +46,7 @@ function ConfirmationPage(props) {
                     source={props.animation}
                     autoPlay
                     loop
-                    style={styles.confirmationAnimation}
+                    style={[styles.confirmationAnimation, styles.aspectRatioLottie(props.animation)]}
                 />
                 <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2]}>{props.heading}</Text>
                 <Text style={styles.textAlignCenter}>{props.description}</Text>

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
@@ -40,7 +40,7 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                 <>
                     <Lottie
                         source={illustration}
-                        style={styles.w100}
+                        style={[styles.w100, styles.aspectRatioLottie(illustration)]}
                         autoPlay
                         loop
                     />

diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -38,7 +38,7 @@ function ReimbursementAccountLoadingIndicator(props) {
                             source={LottieAnimations.ReviewingBankInfo}
                             autoPlay
                             loop
-                            style={styles.loadingVBAAnimation}
+                            style={[styles.loadingVBAAnimation, styles.aspectRatioLottie(LottieAnimations.ReviewingBankInfo)]}
                         />
                         <View style={[styles.ph6]}>
                             <Text style={[styles.textAlignCenter]}>{translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>

diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js
@@ -33,7 +33,7 @@ function SignInHeroImage(props) {
             source={LottieAnimations.Hands}
             loop
             autoPlay
-            style={[styles.alignSelfCenter, imageSize]}
+            style={[styles.alignSelfCenter, imageSize, styles.aspectRatioLottie(LottieAnimations.Hands)]}
         />
     );
 }

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -3694,6 +3694,13 @@ const styles = (theme) => ({
         fontSize: variables.fontSizeSmall,
         lineHeight: variables.lineHeightLarge,
     },
+
+    aspectRatioLottie: (source) => {
+        if (typeof source === 'object' && !source.uri) {
+            return {aspectRatio: source.w / source.h};
+        }
+        return {aspectRatio: '1'};
+    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument