BREAKING CHANGE: cleanup lottie component and remove default styles (…

…#992) ## Rationale There are a lot of styles being applied behind the scenes resulting in unexpected behaviors. ## Solution Remove the outer layer and pass everything directly to native lottie view ## What is changed? - Removed using Animated API by default in the source code, fixes (#1003) - Fix resize mode in Android - Removed absolute style being applied to the `LottieVIew` - Removed default aspect ratio styling - Removed default width being applied ## What should be done from now? You need to handle everything related to aspect ratio and sizing yourself. The reason for removing all these default values is to avoid confusion when using the library as well as to prevent unexpected behaviors. ## Fixes - lottie-react-native/lottie-react-native#989 - lottie-react-native/lottie-react-native#1003 - lottie-react-native/lottie-react-native#844
GoldenDragon0710 · Apr 15, 2023 · 49588f6 · 49588f6
1 parent 1cf37be
commit 49588f6
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 80 deletions.
diff --git a/apps/fabric/ios/Podfile.lock b/apps/fabric/ios/Podfile.lock
@@ -78,7 +78,7 @@ PODS:
   - hermes-engine/Pre-built (0.71.0)
   - libevent (2.1.12)
   - lottie-ios (3.5.0)
-  - lottie-react-native (6.0.0-rc.1):
+  - lottie-react-native (6.0.0-rc.3):
     - lottie-ios (~> 3.5.0)
     - RCT-Folly
     - RCTRequired
@@ -913,7 +913,7 @@ SPEC CHECKSUMS:
   hermes-engine: f6e715aa6c8bd38de6c13bc85e07b0a337edaa89
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   lottie-ios: c55158d67d0629a260625cc2ded2052b829e3c3e
-  lottie-react-native: 2c0a420b4f9ef28fceb6b050fb95fad0720ddfd1
+  lottie-react-native: 1b79f33d48fd1aba6155fb7693649f7d6f32d6f9
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: dea3e4163184ea57c50288c15c32c1529265c58f

diff --git a/apps/fabric/src/App.tsx b/apps/fabric/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import AnimatedLottieView from 'lottie-react-native';
+import LottieView from 'lottie-react-native';
 
 const color = {
   primary: '#1652f0',
@@ -19,12 +19,14 @@ const App = () => {
 
   return (
     <View style={styles.container}>
-      <AnimatedLottieView
+      <LottieView
+        key={source + isLoop}
         source={source === 'remote' ? remoteSource : localSource}
         autoPlay={true}
         loop={isLoop}
         style={styles.lottie}
-        colorFilters={source === 'local' ? localColorFilter : undefined}
+        resizeMode={'contain'}
+        colorFilters={colorFilter}
         enableMergePathsAndroidForKitKatAndAbove
         onAnimationFinish={() => {
           console.log('finished');
@@ -69,7 +71,7 @@ const styles = StyleSheet.create({
   lottie: {width: 400, height: 400},
 });
 
-const localColorFilter = [
+const colorFilter = [
   {
     keypath: 'BG',
     color: color.primary,

diff --git a/apps/paper/ios/Podfile.lock b/apps/paper/ios/Podfile.lock
@@ -78,7 +78,7 @@ PODS:
   - hermes-engine/Pre-built (0.71.0-rc.6)
   - libevent (2.1.12)
   - lottie-ios (3.5.0)
-  - lottie-react-native (6.0.0-rc.1):
+  - lottie-react-native (6.0.0-rc.3):
     - lottie-ios (~> 3.5.0)
     - React-Core
   - OpenSSL-Universal (1.1.1100)
@@ -301,7 +301,7 @@ PODS:
   - React-jsinspector (0.71.0)
   - React-logger (0.71.0):
     - glog
-  - react-native-slider (4.4.0):
+  - react-native-slider (4.4.2):
     - React-Core
   - React-perflogger (0.71.0)
   - React-RCTActionSheet (0.71.0):
@@ -570,7 +570,7 @@ SPEC CHECKSUMS:
   hermes-engine: ca3834c67d1729953a2645b89a59f38c47e94ab3
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   lottie-ios: c55158d67d0629a260625cc2ded2052b829e3c3e
-  lottie-react-native: 6bcc2ddf085c2d092948978b57de2c7d6a138a0c
+  lottie-react-native: 4b07ce6d17647dd24641ae5cd7ae614034318456
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
   RCTRequired: dea3e4163184ea57c50288c15c32c1529265c58f
@@ -586,7 +586,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 060dd495f1e2af3d87216f7ca8a94c55ec885b4f
   React-jsinspector: 5061fcbec93fd672183dfb39cc2f65e55a0835db
   React-logger: a6c0b3a807a8e81f6d7fea2e72660766f55daa50
-  react-native-slider: d2938a12c4e439a227c70eec65d119136eb4aeb5
+  react-native-slider: 33b8d190b59d4f67a541061bb91775d53d617d9d
   React-perflogger: e5fc4149e9bbb972b8520277f3b23141faa47a36
   React-RCTActionSheet: 991de88216bf03ab9bb1d213d73c62ecbe64ade7
   React-RCTAnimation: b74e3d1bf5280891a573e447b487fa1db0713b5b

diff --git a/apps/paper/src/LottieAnimatedExample.tsx b/apps/paper/src/LottieAnimatedExample.tsx
@@ -22,7 +22,7 @@ import {
   styles,
 } from './constants';
 
-const AnimatedSlider = Animated.createAnimatedComponent(Slider);
+const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);
 
 const LottieAnimatedExample = () => {
   const [example, setExample] = useState(EXAMPLES[0]);
@@ -83,16 +83,20 @@ const LottieAnimatedExample = () => {
         onChange={setExample}
       />
       <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-        <LottieView
+        <AnimatedLottieView
           ref={anim}
           autoPlay={isImperative ? false : isPlaying}
-          style={[{width: example.width}, isInverse && styles.lottieViewInvse]}
+          style={[
+            isInverse ? styles.lottieViewInverse : {},
+            {width: '100%', height: '100%'},
+          ]}
           source={example.getSource()}
           progress={isImperative ? progress : undefined}
           loop={isImperative ? false : loop}
           onAnimationFinish={onAnimationFinish}
           enableMergePathsAndroidForKitKatAndAbove
           renderMode={renderMode}
+          resizeMode={'cover'}
         />
       </View>
       <View style={{paddingBottom: 20, paddingHorizontal: 10}}>

diff --git a/apps/paper/src/constants.ts b/apps/paper/src/constants.ts
@@ -13,10 +13,8 @@ export const EXAMPLES = [
   makeExample('Hamburger Arrow', () =>
     require('./animations/HamburgerArrow.json'),
   ),
-  makeExample(
-    'Hamburger Arrow (200 px)',
-    () => require('./animations/HamburgerArrow.json'),
-    200,
+  makeExample('Hamburger Arrow (200 px)', () =>
+    require('./animations/HamburgerArrow.json'),
   ),
   makeExample('Line Animation', () =>
     require('./animations/LineAnimation.json'),
@@ -74,7 +72,7 @@ export const styles = StyleSheet.create({
   lottieView: {
     flex: 1,
   },
-  lottieViewInvse: {
+  lottieViewInverse: {
     backgroundColor: 'black',
   },
 });
diff --git a/apps/paper/src/utils.ts b/apps/paper/src/utils.ts
@@ -2,15 +2,10 @@ import {Platform} from 'react-native';
 
 export type Example = ReturnType<typeof makeExample>;
 
-export const makeExample = (
-  name: string,
-  getJson: () => any,
-  width?: number,
-) => ({
+export const makeExample = (name: string, getJson: () => any) => ({
   name,
   getSource: Platform.select({
     windows: () => name, // Use codegen resources, which are referenced by name
     default: getJson,
   }),
-  width,
 });
diff --git a/...e/android/src/main/java/com/airbnb/android/react/lottie/LottieAnimationViewManagerImpl.kt b/...e/android/src/main/java/com/airbnb/android/react/lottie/LottieAnimationViewManagerImpl.kt
@@ -135,6 +135,7 @@ internal object LottieAnimationViewManagerImpl {
             resultSourceName = "$resultSourceName.json"
         }
         viewManager.animationName = resultSourceName
+        viewManager.commitChanges()
     }
 
     @JvmStatic
@@ -143,6 +144,7 @@ internal object LottieAnimationViewManagerImpl {
         propManagersMap: LottieAnimationViewPropertyManager
     ) {
         propManagersMap.animationJson = json
+        propManagersMap.commitChanges()
     }
 
     @JvmStatic
@@ -180,13 +182,13 @@ internal object LottieAnimationViewManagerImpl {
         var mode: ImageView.ScaleType? = null
         when (resizeMode) {
             "cover" -> {
-                mode = ImageView.ScaleType.FIT_XY
+                mode = ImageView.ScaleType.CENTER_CROP
             }
             "contain" -> {
-                mode = ImageView.ScaleType.CENTER_INSIDE
+                mode = ImageView.ScaleType.FIT_CENTER
             }
             "center" -> {
-                mode = ImageView.ScaleType.CENTER
+                mode = ImageView.ScaleType.CENTER_INSIDE
             }
         }
         viewManager.scaleType = mode

diff --git a/packages/core/src/LottieView.tsx b/packages/core/src/LottieView.tsx
@@ -1,23 +1,15 @@
 import React from 'react';
-import {
-  View,
-  StyleSheet,
-  NativeSyntheticEvent,
-  Animated,
-  processColor,
-} from 'react-native';
+import { NativeSyntheticEvent, ViewProps, processColor } from 'react-native';
 
 import type { AnimatedLottieViewProps } from './LottieView.types';
 
 import NativeLottieAnimationView, {
   Commands,
 } from './specs/LottieAnimationViewNativeComponent';
 
-const AnimatedNativeLottieView = Animated.createAnimatedComponent(
-  NativeLottieAnimationView,
-);
+type Props = AnimatedLottieViewProps & { containerProps?: ViewProps };
 
-const defaultProps: AnimatedLottieViewProps = {
+const defaultProps: Props = {
   source: undefined,
   progress: 0,
   speed: 1,
@@ -36,17 +28,14 @@ const defaultProps: AnimatedLottieViewProps = {
 /**
  * View hosting the lottie animation.
  */
-export class AnimatedLottieView extends React.PureComponent<
-  AnimatedLottieViewProps,
-  {}
-> {
+export class AnimatedLottieView extends React.PureComponent<Props, {}> {
   static defaultProps = defaultProps;
 
   _lottieAnimationViewRef:
     | React.ElementRef<typeof NativeLottieAnimationView>
     | undefined;
 
-  constructor(props: AnimatedLottieViewProps) {
+  constructor(props: Props) {
     super(props);
     this.play = this.play.bind(this);
     this.reset = this.reset.bind(this);
@@ -102,6 +91,7 @@ export class AnimatedLottieView extends React.PureComponent<
       duration,
       textFiltersAndroid,
       textFiltersIOS,
+      resizeMode,
       ...rest
     } = this.props;
 
@@ -115,22 +105,6 @@ export class AnimatedLottieView extends React.PureComponent<
         ? (source as any).uri
         : undefined;
 
-    const aspectRatioStyle = sourceJson
-      ? { aspectRatio: (source as any).w / (source as any).h }
-      : undefined;
-
-    const styleObject = StyleSheet.flatten(style);
-    let sizeStyle;
-    if (
-      !styleObject ||
-      (styleObject.width === undefined && styleObject.height === undefined)
-    ) {
-      sizeStyle =
-        autoSize && sourceJson
-          ? { width: (source as any).w }
-          : StyleSheet.absoluteFill;
-    }
-
     const speed =
       duration && sourceJson && (source as any).fr
         ? Math.round(
@@ -144,26 +118,21 @@ export class AnimatedLottieView extends React.PureComponent<
     }));
 
     return (
-      <View style={[aspectRatioStyle, sizeStyle, style]}>
-        <AnimatedNativeLottieView
-          ref={this._captureRef}
-          {...rest}
-          colorFilters={colorFilters}
-          textFiltersAndroid={textFiltersAndroid}
-          textFiltersIOS={textFiltersIOS}
-          speed={speed}
-          style={[
-            aspectRatioStyle,
-            sizeStyle || { width: '100%', height: '100%' },
-            style,
-          ]}
-          sourceName={sourceName}
-          sourceJson={sourceJson}
-          sourceURL={sourceURL}
-          onAnimationFinish={this.onAnimationFinish}
-          autoPlay={autoPlay}
-        />
-      </View>
+      <NativeLottieAnimationView
+        ref={this._captureRef}
+        {...rest}
+        colorFilters={colorFilters}
+        textFiltersAndroid={textFiltersAndroid}
+        textFiltersIOS={textFiltersIOS}
+        speed={speed}
+        style={style}
+        sourceName={sourceName}
+        sourceJson={sourceJson}
+        sourceURL={sourceURL}
+        onAnimationFinish={this.onAnimationFinish}
+        autoPlay={autoPlay}
+        resizeMode={resizeMode}
+      />
     );
   }
 }
diff --git a/packages/core/src/LottieView.types.ts b/packages/core/src/LottieView.types.ts
@@ -55,7 +55,7 @@ export interface AnimatedLottieViewProps {
    * animation will correspondingly update to the frame at that progress value. This
    * prop is not required if you are using the imperative API.
    */
-  progress?: number | Animated.Value | Animated.AnimatedInterpolation<number>;
+  progress?: number;
 
   /**
    * The speed the animation will progress. This only affects the imperative API. The