Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Lottie animations height when not playing #30901

Merged
merged 1 commit into from
Nov 8, 2023
Merged

Fix Lottie animations height when not playing #30901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,8 +234,8 @@ PODS:
- libwebp/demux
- libwebp/webp (1.2.4)
- lottie-ios (4.3.3)
- lottie-react-native (6.3.1):
- lottie-ios (~> 4.3.0)
- lottie-react-native (6.4.0):
- lottie-ios (~> 4.3.3)
- React-Core
- MapboxCommon (23.6.0)
- MapboxCoreMaps (10.14.0):
Expand Down Expand Up @@ -1203,7 +1203,7 @@ SPEC CHECKSUMS:
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
lottie-ios: 25e7b2675dad5c3ddad369ac9baab03560c5bfdd
lottie-react-native: c9f1db4f4124dcce9f8159e65d8dc6e8bcb11fb4
lottie-react-native: 3a3084faddd3891c276f23fd6e797b83f2021bbc
MapboxCommon: 4a0251dd470ee37e7fadda8e285c01921a5e1eb0
MapboxCoreMaps: eb07203bbb0b1509395db5ab89cd3ad6c2e3c04c
MapboxMaps: af50ec61a7eb3b032c3f7962c6bd671d93d2a209
Expand Down
17 changes: 10 additions & 7 deletions src/components/Lottie/Lottie.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import LottieView, {LottieViewProps} from 'lottie-react-native';
import React, {forwardRef} from 'react';
import {View} from 'react-native';
import styles from '@styles/styles';

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}}
/>
<View style={[aspectRatioStyle, styles.w100]}>
<LottieView
// eslint-disable-next-line
{...props}
ref={ref}
style={[aspectRatioStyle, props.style]}
webStyle={{...aspectRatioStyle, ...props.webStyle}}
/>
</View>
);
});

Expand Down
Loading