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

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 8 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
63 changes: 33 additions & 30 deletions ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,33 +188,33 @@ PODS:
- GoogleUtilities/Network (~> 7.4)
Copy link
Contributor

Choose a reason for hiding this comment

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

We only need to update lottie related frameworks. Revert all other changes which are out of scope.

Just replace with this file I generated:

Podfile.lock.zip

- "GoogleUtilities/NSData+zlib (~> 7.4)"
- nanopb (~> 2.30908.0)
- GoogleDataTransport (9.2.3):
- GoogleDataTransport (9.2.5):
- GoogleUtilities/Environment (~> 7.7)
- nanopb (< 2.30910.0, >= 2.30908.0)
- PromisesObjC (< 3.0, >= 1.2)
- GoogleSignIn (7.0.0):
- AppAuth (~> 1.5)
- GTMAppAuth (< 3.0, >= 1.3)
- GTMSessionFetcher/Core (< 4.0, >= 1.1)
- GoogleUtilities/AppDelegateSwizzler (7.11.1):
- GoogleUtilities/AppDelegateSwizzler (7.11.5):
- GoogleUtilities/Environment
- GoogleUtilities/Logger
- GoogleUtilities/Network
- GoogleUtilities/Environment (7.11.1):
- GoogleUtilities/Environment (7.11.5):
- PromisesObjC (< 3.0, >= 1.2)
- GoogleUtilities/ISASwizzler (7.11.1)
- GoogleUtilities/Logger (7.11.1):
- GoogleUtilities/ISASwizzler (7.11.5)
- GoogleUtilities/Logger (7.11.5):
- GoogleUtilities/Environment
- GoogleUtilities/MethodSwizzler (7.11.1):
- GoogleUtilities/MethodSwizzler (7.11.5):
- GoogleUtilities/Logger
- GoogleUtilities/Network (7.11.1):
- GoogleUtilities/Network (7.11.5):
- GoogleUtilities/Logger
- "GoogleUtilities/NSData+zlib"
- GoogleUtilities/Reachability
- "GoogleUtilities/NSData+zlib (7.11.1)"
- GoogleUtilities/Reachability (7.11.1):
- "GoogleUtilities/NSData+zlib (7.11.5)"
- GoogleUtilities/Reachability (7.11.5):
- GoogleUtilities/Logger
- GoogleUtilities/UserDefaults (7.11.1):
- GoogleUtilities/UserDefaults (7.11.5):
- GoogleUtilities/Logger
- GTMAppAuth (2.0.0):
- AppAuth/Core (~> 1.6)
Expand All @@ -224,18 +224,21 @@ PODS:
- hermes-engine/Pre-built (= 0.72.4)
- hermes-engine/Pre-built (0.72.4)
- libevent (2.1.12)
- libwebp (1.2.4):
- libwebp/demux (= 1.2.4)
- libwebp/mux (= 1.2.4)
- libwebp/webp (= 1.2.4)
- libwebp/demux (1.2.4):
- libwebp (1.3.2):
- libwebp/demux (= 1.3.2)
- libwebp/mux (= 1.3.2)
- libwebp/sharpyuv (= 1.3.2)
- libwebp/webp (= 1.3.2)
- libwebp/demux (1.3.2):
- libwebp/webp
- libwebp/mux (1.2.4):
- libwebp/mux (1.3.2):
- libwebp/demux
- libwebp/webp (1.2.4)
- lottie-ios (3.4.4)
- lottie-react-native (5.1.6):
- lottie-ios (~> 3.4.0)
- libwebp/sharpyuv (1.3.2)
- libwebp/webp (1.3.2):
- libwebp/sharpyuv
- lottie-ios (4.3.1)
- 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 @@ -265,7 +268,7 @@ PODS:
- Permission-LocationWhenInUse (3.6.1):
- RNPermissions
- Plaid (4.1.0)
- PromisesObjC (2.2.0)
- PromisesObjC (2.3.1)
- RCT-Folly (2021.07.22.00):
- boost
- DoubleConversion
Expand Down Expand Up @@ -826,7 +829,7 @@ PODS:
- libwebp (~> 1.0)
- SDWebImage/Core (~> 5.10)
- SocketRocket (0.6.1)
- Turf (2.6.1)
- Turf (2.7.0)
- VisionCamera (2.15.4):
- React
- React-callinvoker
Expand Down Expand Up @@ -1209,16 +1212,16 @@ SPEC CHECKSUMS:
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
GoogleAppMeasurement: 5ba1164e3c844ba84272555e916d0a6d3d977e91
GoogleDataTransport: f0308f5905a745f94fb91fea9c6cbaf3831cb1bd
GoogleDataTransport: 54dee9d48d14580407f8f5fbf2f496e92437a2f2
GoogleSignIn: b232380cf495a429b8095d3178a8d5855b42e842
GoogleUtilities: 9aa0ad5a7bc171f8bae016300bfcfa3fb8425749
GoogleUtilities: 13e2c67ede716b8741c7989e26893d151b2b2084
GTMAppAuth: 99fb010047ba3973b7026e45393f51f27ab965ae
GTMSessionFetcher: e8647203b65cee28c5f73d0f473d096653945e72
hermes-engine: 81191603c4eaa01f5e4ae5737a9efcf64756c7b2
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
lottie-ios: 8f97d3271e155c2d688875c29cd3c74908aef5f8
lottie-react-native: 8f9d4be452e23f6e5ca0fdc11669dc99ab52be81
libwebp: 1786c9f4ff8a279e4dac1e8f385004d5fc253009
lottie-ios: 6279047f1cc31b395e11f1fc24f3dab68cbf0df2
lottie-react-native: c9f1db4f4124dcce9f8159e65d8dc6e8bcb11fb4
MapboxCommon: 4a0251dd470ee37e7fadda8e285c01921a5e1eb0
MapboxCoreMaps: eb07203bbb0b1509395db5ab89cd3ad6c2e3c04c
MapboxMaps: af50ec61a7eb3b032c3f7962c6bd671d93d2a209
Expand All @@ -1232,7 +1235,7 @@ SPEC CHECKSUMS:
Permission-LocationAlways: 8d99b025c9f73c696e0cdb367e42525f2e9a26f2
Permission-LocationWhenInUse: 3ba99e45c852763f730eabecec2870c2382b7bd4
Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2
PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
PromisesObjC: c50d2056b5253dadbd6c2bea79b0674bd5a52fa4
RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
RCTRequired: c0569ecc035894e4a68baecb30fe6a7ea6e399f9
RCTTypeSafety: e90354072c21236e0bcf1699011e39acd25fea2f
Expand Down Expand Up @@ -1310,11 +1313,11 @@ SPEC CHECKSUMS:
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
Turf: 469ce2c3d22e5e8e4818d5a3b254699a5c89efa4
Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2
VisionCamera: d3ec8883417a6a4a0e3a6ba37d81d22db7611601
Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

PODFILE CHECKSUM: 2daf34c870819a933f3fefe426801d54b2ff2a14

COCOAPODS: 1.12.1
COCOAPODS: 1.12.0
24 changes: 7 additions & 17 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 @@ -3715,6 +3715,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