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

Jump to bottom

Upgrade lottie-react-native to 6.3.1 #28267

Merged
merged 13 commits into from
Oct 11, 2023
Merged

Upgrade lottie-react-native to 6.3.1 #28267

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c0b5f21
Upgrade lottie-react-native to 6.3.1
ZhenjaHorbach Sep 26, 2023
4b1e93f
Update styles for lottie
ZhenjaHorbach Oct 4, 2023
d9ff6fa
Update branch
ZhenjaHorbach Oct 4, 2023
7393ec5
Revert "Update branch"
ZhenjaHorbach Oct 4, 2023
65383b6
Merge branch 'main' into upgrade-lottie-react-native
ZhenjaHorbach Oct 4, 2023
4c6d87a
Add Lottie component
ZhenjaHorbach Oct 5, 2023
32431f4
Fix conflicts
ZhenjaHorbach Oct 5, 2023
cd253bb
Submit changes after run prettier
ZhenjaHorbach Oct 6, 2023
2d3bfdc
Update branch
ZhenjaHorbach Oct 8, 2023
0e8bd09
Merge branch 'main' into upgrade-lottie-react-native
ZhenjaHorbach Oct 8, 2023
4b6c82a
Fix comments
ZhenjaHorbach Oct 8, 2023
4123599
Fix comments x2
ZhenjaHorbach Oct 8, 2023
1c08452
Merge branch 'main' into upgrade-lottie-react-native
ZhenjaHorbach Oct 11, 2023
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
18 changes: 9 additions & 9 deletions ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down Expand Up @@ -587,7 +587,7 @@ PODS:
- React
- react-native-image-picker (5.1.0):
- React-Core
- react-native-key-command (1.0.1):
- react-native-key-command (1.0.5):
- React-Core
- react-native-netinfo (9.3.10):
- React-Core
Expand Down Expand Up @@ -817,7 +817,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)
Expand Down Expand Up @@ -1217,8 +1217,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
Expand Down Expand Up @@ -1257,7 +1257,7 @@ SPEC CHECKSUMS:
react-native-geolocation: 0f7fe8a4c2de477e278b0365cce27d089a8c5903
react-native-image-manipulator: c48f64221cfcd46e9eec53619c4c0374f3328a56
react-native-image-picker: c33d4e79f0a14a2b66e5065e14946ae63749660b
react-native-key-command: c2645ec01eb1fa664606c09480c05cb4220ef67b
react-native-key-command: 69bd8d59f2812eb3bd8ae1e23b93d40cd29bcde1
react-native-netinfo: ccbe1085dffd16592791d550189772e13bf479e2
react-native-pager-view: 0ccb8bf60e2ebd38b1f3669fa3650ecce81db2df
react-native-pdf: 7c0e91ada997bac8bac3bb5bea5b6b81f5a3caae
Expand Down Expand Up @@ -1306,7 +1306,7 @@ SPEC CHECKSUMS:
RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87
RNScreens: d037903436160a4b039d32606668350d2a808806
RNSVG: ed492aaf3af9ca01bc945f7a149d76d62e73ec82
RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
Expand Down
67 changes: 8 additions & 59 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/components/ConfirmationPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/components/IllustratedHeaderPageLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
14 changes: 14 additions & 0 deletions src/components/Lottie/Lottie.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 3 additions & 0 deletions src/components/Lottie/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Lottie from './Lottie';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why Lottie.tsx is written in TS and index.js in JS? I think Lottie catalog can be removed and Lottie.tsx file in components catalog should be sufficient.

@ZhenjaHorbach

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why Lottie.tsx is written in TS and index.js in JS?

This is already existing pattern, i.e. MapView but agree to write TS for all

I think Lottie catalog can be removed and Lottie.tsx file in components catalog should be sufficient.

Agree. Unless platform specific or has propTypes in js

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regarding the first point, I did it by analogy with other catalogs)
And about the second one, maybe you're right
Seems a little redundant
Should I create a new PR?


export default Lottie;
2 changes: 1 addition & 1 deletion src/components/ReimbursementAccountLoadingIndicator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/pages/signin/SignInHeroImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
7 changes: 7 additions & 0 deletions src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3779,6 +3779,13 @@ const styles = (theme) => ({
lineHeight: variables.lineHeightLarge,
},

aspectRatioLottie: (source) => {
if (typeof source === 'object' && !source.uri) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can add more safety condition here, though all Lottie JSON may include w, h properties.

Suggested change
if (typeof source === 'object' && !source.uri) {
if (!source.uri && typeof source === 'object' && source.w && source.h) {

return {aspectRatio: source.w / source.h};
}
return {aspectRatio: '1'};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer setting this undefined and let user fully customize style properties.
If both width and height are defined, they're skipped because aspectRatio overwrites them.

Suggested change
return {aspectRatio: '1'};
return {};

},

receiptDropHeaderGap: {
backgroundColor: theme.receiptDropUIBG,
},
Expand Down
Loading