lottie-react-native/lib/module/LottieView.js

React Native bindings for Lottie

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
import React from 'react';
import { processColor } from 'react-native';
import NativeLottieAnimationView, { Commands } from './specs/LottieAnimationViewNativeComponent';
const defaultProps = {
  source: undefined,
  progress: 0,
  speed: 1,
  loop: true,
  autoPlay: false,
  enableMergePathsAndroidForKitKatAndAbove: false,
  cacheComposition: true,
  useNativeLooping: false,
  resizeMode: 'contain',
  colorFilters: [],
  textFiltersAndroid: [],
  textFiltersIOS: []
};

/**
 * View hosting the lottie animation.
 */
export class LottieView extends React.PureComponent {
  constructor(props) {
    super(props);
    _defineProperty(this, "onAnimationFinish", evt => {
      if (this.props.onAnimationFinish) {
        this.props.onAnimationFinish(evt.nativeEvent.isCancelled);
      }
    });
    this.play = this.play.bind(this);
    this.reset = this.reset.bind(this);
    this.pause = this.pause.bind(this);
    this.resume = this.resume.bind(this);
    this.onAnimationFinish = this.onAnimationFinish.bind(this);
    this._captureRef = this._captureRef.bind(this);
  }
  play(startFrame, endFrame) {
    Commands.play(this._lottieAnimationViewRef, startFrame ?? -1, endFrame ?? -1);
  }
  reset() {
    Commands.reset(this._lottieAnimationViewRef);
  }
  pause() {
    Commands.pause(this._lottieAnimationViewRef);
  }
  resume() {
    Commands.resume(this._lottieAnimationViewRef);
  }
  _captureRef(ref) {
    if (ref === null) {
      return;
    }
    this._lottieAnimationViewRef = ref;
    if (this.props.autoPlay === true) {
      this.play();
    }
  }
  render() {
    var _this$props$colorFilt;
    const {
      style,
      source,
      autoPlay,
      duration,
      textFiltersAndroid,
      textFiltersIOS,
      resizeMode,
      ...rest
    } = this.props;
    const sourceName = typeof source === 'string' ? source : undefined;
    const sourceJson = typeof source === 'object' && !source.uri ? JSON.stringify(source) : undefined;
    const sourceURL = typeof source === 'object' && source.uri ? source.uri : undefined;
    const speed = duration && sourceJson && source.fr ? Math.round(source.op / source.fr * 1000 / duration) : this.props.speed;
    const colorFilters = (_this$props$colorFilt = this.props.colorFilters) === null || _this$props$colorFilt === void 0 ? void 0 : _this$props$colorFilt.map(colorFilter => ({
      ...colorFilter,
      color: processColor(colorFilter.color)
    }));
    return /*#__PURE__*/React.createElement(NativeLottieAnimationView, _extends({
      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
    }));
  }
}
_defineProperty(LottieView, "defaultProps", defaultProps);
//# sourceMappingURL=LottieView.js.map