fix: container props and its types

lottie-react-native · Apr 1, 2023 · 7f9766a · 7f9766a
1 parent 377a8de
commit 7f9766a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/apps/fabric/src/App.tsx b/apps/fabric/src/App.tsx
@@ -24,6 +24,7 @@ const App = () => {
         autoPlay={true}
         loop={isLoop}
         style={styles.lottie}
+        resizeMode={'contain'}
         colorFilters={source === 'local' ? localColorFilter : undefined}
         enableMergePathsAndroidForKitKatAndAbove
         onAnimationFinish={() => {

diff --git a/packages/core/src/LottieView.tsx b/packages/core/src/LottieView.tsx
@@ -5,6 +5,7 @@ import {
   NativeSyntheticEvent,
   Animated,
   processColor,
+  ViewProps,
 } from 'react-native';
 
 import type { AnimatedLottieViewProps } from './LottieView.types';
@@ -17,7 +18,9 @@ const AnimatedNativeLottieView = Animated.createAnimatedComponent(
   NativeLottieAnimationView,
 );
 
-const defaultProps: AnimatedLottieViewProps = {
+type Props = AnimatedLottieViewProps & { containerProps?: ViewProps };
+
+const defaultProps: Props = {
   source: undefined,
   progress: 0,
   speed: 1,
@@ -36,17 +39,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);
@@ -143,20 +143,18 @@ export class AnimatedLottieView extends React.PureComponent<
       color: processColor(colorFilter.color),
     }));
 
+    const defaultStyles = [aspectRatioStyle, sizeStyle];
+
     return (
-      <View style={[aspectRatioStyle, sizeStyle, style]}>
+      <View {...this.props.containerProps} style={[...defaultStyles, style]}>
         <AnimatedNativeLottieView
           ref={this._captureRef}
           {...rest}
           colorFilters={colorFilters}
           textFiltersAndroid={textFiltersAndroid}
           textFiltersIOS={textFiltersIOS}
           speed={speed}
-          style={[
-            aspectRatioStyle,
-            sizeStyle || { width: '100%', height: '100%' },
-            style,
-          ]}
+          style={StyleSheet.absoluteFill}
           sourceName={sourceName}
           sourceJson={sourceJson}
           sourceURL={sourceURL}