@amazon-devices/lottie-react-native 3.0.9000000000 → 3.0.9000000002

package/src/LottieView.tsx

@@ -1,257 +0,0 @@
-/*
- * Portions of this file are copyright (c) 2023 Amazon.com, Inc. or its affiliates.  All rights reserved.
- *
- * PORTIONS OF THIS FILE ARE AMAZON PROPRIETARY/CONFIDENTIAL.  USE IS SUBJECT TO LICENSE TERMS.
- *
- * Amazon modifications are indicated by [amznmod_* comments].
- */
-
-/*
- * Changelog:
- * Set up lottie-react-native package to build for Kepler
- */
-
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  NativeSyntheticEvent,
-  Animated,
-  processColor,
-} from 'react-native';
-
-import type { AnimatedLottieViewProps } from './LottieView.types';
-
-import NativeLottieAnimationView, {
-  Commands,
-} from './specs/LottieAnimationViewNativeComponent';
-
-const AnimatedNativeLottieView = Animated.createAnimatedComponent(
-  NativeLottieAnimationView,
-);
-
-// amznmod_react - add textFiltersKepler prop for Kepler
-const defaultProps: AnimatedLottieViewProps = {
-  source: undefined,
-  progress: 0,
-  speed: 1,
-  loop: true,
-  autoPlay: false,
-  autoSize: false,
-  enableMergePathsAndroidForKitKatAndAbove: false,
-  cacheComposition: true,
-  useNativeLooping: false,
-  resizeMode: 'contain',
-  colorFilters: [],
-  textFiltersAndroid: [],
-  textFiltersIOS: [],
-  textFiltersKepler: [],
-};
-
-/**
- * View hosting the lottie animation.
- */
-export class AnimatedLottieView extends React.PureComponent<
-  AnimatedLottieViewProps,
-  {}
-> {
-  static defaultProps = defaultProps;
-
-  _lottieAnimationViewRef:
-    | React.ElementRef<typeof NativeLottieAnimationView>
-    | undefined;
-
-  constructor(props: AnimatedLottieViewProps) {
-    super(props);
-    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);
-    // amznmod_react - add onAnimation... callbacks
-    this.onAnimationLoad = this.onAnimationLoad.bind(this);
-    this.onAnimationPlay = this.onAnimationPlay.bind(this);
-    this.onAnimationPause = this.onAnimationPause.bind(this);
-    this.onAnimationResume = this.onAnimationResume.bind(this);
-    this.onAnimationJsonLoad = this.onAnimationJsonLoad.bind(this);
-  }
-
-  componentDidUpdate(prevProps: AnimatedLottieViewProps) {
-    if (
-      this.props.autoPlay === true &&
-      this.props.source !== prevProps.source &&
-      !!this.props.source
-    ) {
-      this.play();
-    }
-  }
-
-  play(startFrame?: number, endFrame?: number): void {
-    Commands.play(
-      this._lottieAnimationViewRef,
-      startFrame ?? -1,
-      endFrame ?? -1,
-    );
-  }
-
-  reset() {
-    Commands.reset(this._lottieAnimationViewRef);
-  }
-
-  pause() {
-    Commands.pause(this._lottieAnimationViewRef);
-  }
-
-  resume() {
-    Commands.resume(this._lottieAnimationViewRef);
-  }
-
-  onAnimationFinish = (evt: NativeSyntheticEvent<{ isCancelled: boolean }>) => {
-    if (this.props.onAnimationFinish) {
-      this.props.onAnimationFinish(evt.nativeEvent.isCancelled);
-    }
-  };
-
-  // amznmod_react - onAnimationLoad callback
-  onAnimationLoad = () => {
-    if (this.props.onAnimationLoad) {
-      this.props.onAnimationLoad();
-    }
-  };
-
-  // PROJ*-136246 - deprecate onAnimationJsonLoad
-  // amznmod_react - onAnimationLoad callback
-  onAnimationJsonLoad = () => {
-    console.warn("onAnimationJsonLoad will be deprecated in favor of onAnimationLoad. Migrate to use onAnimationLoad.")
-    if (this.props.onAnimationJsonLoad) {
-      this.props.onAnimationJsonLoad();
-    }
-  };
-
-  // amznmod_react - onAnimationPlay callback
-  onAnimationPlay = () => {
-    if (this.props.onAnimationPlay) {
-      this.props.onAnimationPlay();
-    }
-  };
-
-  // amznmod_react - onAnimationPause callback
-  onAnimationPause = () => {
-    if (this.props.onAnimationPause) {
-      this.props.onAnimationPause();
-    }
-  };
-
-  // amznmod_react - onAnimationResume callback
-  onAnimationResume = () => {
-    if (this.props.onAnimationResume) {
-      this.props.onAnimationResume();
-    }
-  };
-
-  _captureRef(ref: React.ElementRef<typeof NativeLottieAnimationView>) {
-    if (ref === null) {
-      return;
-    }
-
-    this._lottieAnimationViewRef = ref;
-    // amznmod_react - Fix for a crash on autoplay + progress with animation
-    if (this._lottieAnimationViewRef && this.props.autoPlay === true) {
-      this.play();
-    }
-  }
-
-  render(): React.ReactNode {
-    // amznmod_react - add textFiltersKepler prop
-    const {
-      style,
-      source,
-      autoSize,
-      autoPlay,
-      duration,
-      textFiltersAndroid,
-      textFiltersIOS,
-      textFiltersKepler,
-      ...rest
-    } = this.props;
-
-    const sourceName = typeof source === 'string' ? source : undefined;
-    const sourceJson =
-      typeof source === 'object' && !(source as any).uri
-        ? JSON.stringify(source)
-        : undefined;
-    const sourceURL =
-      typeof source === 'object' && (source as any).uri
-        ? (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(
-            (((source as any).op / (source as any).fr) * 1000) / duration,
-          )
-        : this.props.speed;
-
-    const colorFilters = this.props.colorFilters?.map((colorFilter) => ({
-      ...colorFilter,
-      color: processColor(colorFilter.color),
-    }));
-    // amznmod_react - Clip LottieView on ReactNative
-    const baseStyle= {
-      overflow: 'hidden',
-    };
-
-    return (
-      // amznmod_react - Clip LottieView on ReactNative
-      <View style={[aspectRatioStyle, sizeStyle, style, baseStyle]}>
-        <AnimatedNativeLottieView
-          ref={this._captureRef}
-          {...rest}
-          // amznmod_react - add autoPlay prop
-          autoPlay={autoPlay}
-          colorFilters={colorFilters}
-          textFiltersAndroid={textFiltersAndroid}
-          textFiltersIOS={textFiltersIOS}
-          // amznmod_react - add textFiltersKepler prop
-          // amznmod_react - Clip LottieView on ReactNative
-          textFiltersKepler={textFiltersKepler}
-          speed={speed}
-          style={[
-            aspectRatioStyle,
-            sizeStyle || { width: '100%', height: '100%' },
-            style,
-            baseStyle
-          ]}
-          sourceName={sourceName}
-          sourceJson={sourceJson}
-          sourceURL={sourceURL}
-          onAnimationFinish={this.onAnimationFinish}
-          //amznmod_react - add onAnimation... callbacks
-          onAnimationLoad={this.onAnimationLoad}
-          onAnimationPlay={this.onAnimationPlay}
-          onAnimationPause={this.onAnimationPause}
-          onAnimationResume={this.onAnimationResume}
-          // PROJ*-136246 - deprecate onAnimationJsonLoad
-          onAnimationJsonLoad={this.onAnimationJsonLoad}
-        />
-      </View>
-    );
-  }
-}

package/src/LottieView.types.ts

@@ -1,275 +0,0 @@
-/*
- * Portions of this file are copyright (c) 2023 Amazon.com, Inc. or its affiliates.  All rights reserved.
- *
- * PORTIONS OF THIS FILE ARE AMAZON PROPRIETARY/CONFIDENTIAL.  USE IS SUBJECT TO LICENSE TERMS.
- *
- * Amazon modifications are indicated by [amznmod_* comments].
- */
-
-/*
- * Changelog:
- * Set up lottie-react-native package to build for Kepler
- * Add accessibility props
- */
-
-import type {
-  StyleProp,
-  ViewStyle,
-  LayoutChangeEvent,
-  Animated,
-  AccessibilityProps,
-} from 'react-native';
-
-/**
- * Serialized animation as generated from After Effects
- */
-export interface AnimationObject {
-  v: string;
-  fr: number;
-  ip: number;
-  op: number;
-  w: number;
-  h: number;
-  nm?: string;
-  ddd?: number;
-  assets: any[];
-  layers: any[];
-  markers?: any[];
-}
-
-type ColorFilter = {
-  keypath: string;
-  color: string;
-};
-
-type TextFilterIOS = {
-  keypath: string;
-  text: string;
-};
-
-type TextFilterAndroid = {
-  find: string;
-  replace: string;
-};
-
-// amznmod_react - TextFilterKepler type
-type TextFilterKepler = {
-  keypath: string;
-  text: string;
-};
-
-// Animated.AnimatedInterpolation has been converted to a generic type
-// in @types/react-native 0.70. This way we can maintain compatibility
-// with all versions of @types/react-native`
-type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
-
-/**
- * Properties of the AnimatedLottieView component
- */
-// amznmod_react LottieView supports all AccessibilityProps
-export interface AnimatedLottieViewProps extends AccessibilityProps{
-  /**
-   * The source of animation. Can be referenced as a local asset by a string, or remotely
-   * with an object with a `uri` property, or it can be an actual JS object of an
-   * animation, obtained (for example) with something like
-   * `require('../path/to/animation.json')`
-   */
-  source: string | AnimationObject | { uri: string };
-
-  /**
-   * A number between 0 and 1, or an `Animated` number between 0 and 1. This number
-   * represents the normalized progress of the animation. If you update this prop, the
-   * 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 | AnimatedInterpolation;
-
-  /**
-   * The speed the animation will progress. This only affects the imperative API. The
-   * default value is 1.
-   */
-  speed?: number;
-
-  /**
-   * The duration of the animation in ms. Takes precedence over speed when set.
-   * This only works when source is an actual JS object of an animation.
-   */
-  duration?: number;
-
-  /**
-   * A boolean flag indicating whether or not the animation should loop.
-   */
-  loop?: boolean;
-
-  /**
-   * Style attributes for the view, as expected in a standard `View`:
-   * http://facebook.github.io/react-native/releases/0.39/docs/view.html#style
-   *
-   * **CAVEAT: border styling is not supported.**
-   */
-  style?: StyleProp<ViewStyle>;
-
-  /**
-   * Determines how to resize the animated view when the frame doesn't match the raw image
-   * dimensions.
-   *
-   * Refer to https://facebook.github.io/react-native/docs/image.html#resizemode
-   */
-  resizeMode?: 'cover' | 'contain' | 'center';
-
-  /**
-   * Determines how Lottie should render
-   * Refer to LottieAnimationView#setRenderMode(RenderMode) for more information.
-   */
-  renderMode?: 'AUTOMATIC' | 'HARDWARE' | 'SOFTWARE';
-
-  /**
-   * A boolean flag indicating whether or not the animation should start automatically when
-   * mounted. This only affects the imperative API.
-   */
-  autoPlay?: boolean;
-
-  /**
-   * A boolean flag indicating whether or not the animation should size itself automatically
-   * according to the width in the animation's JSON. This only works when source is an actual
-   * JS object of an animation.
-   */
-  autoSize?: boolean;
-
-  /**
-   * A callback function which will be called when animation is finished. Note that this
-   * callback will be called only when `loop` is set to false.
-   */
-  onAnimationFinish?: (isCancelled: boolean) => void;
-
-  /**
-   * A callback function which will be called when the view has been laid out.
-   */
-  onLayout?: (event: LayoutChangeEvent) => void;
-
-  /**
-   * An array of layers you want to override its color filter.
-   */
-  colorFilters?: Array<ColorFilter>;
-
-  /**
-   * A string to identify the component during testing.
-   */
-  testID?: string;
-
-  // Android Props
-
-  /**
-   * A boolean flag to enable merge patching.
-   * @platform android
-   */
-  enableMergePathsAndroidForKitKatAndAbove?: boolean;
-
-  /**
-   * A boolean flag indicating whether or not the animation should caching. Defaults to true.
-   * Refer to LottieAnimationView#setCacheComposition(boolean) for more information.
-   *
-   * @platform android
-   */
-  cacheComposition?: boolean;
-
-  /**
-   * An array of objects denoting text values to find and replace.
-   *
-   * @platform android
-   */
-  textFiltersAndroid?: Array<TextFilterAndroid>;
-
-  /**
-   * Relative folder inside of assets containing image files to be animated.
-   * Make sure that the images that bodymovin export are in that folder with their names unchanged (should be img_#).
-   * Refer to https://github.com/airbnb/lottie-android#image-support for more details.
-   *
-   * @platform android
-   */
-  imageAssetsFolder?: string;
-
-  /**
-   * Uses hardware acceleration to perform the animation. This should only
-   * be used for animations where your width and height are equal to the composition width
-   * and height, e.g. you are not scaling the animation.
-   *
-   * @platform android
-   */
-  hardwareAccelerationAndroid?: boolean;
-
-  // iOS Props
-
-  /**
-   * An array of objects denoting text layers by KeyPath and a new string value.
-   *
-   * @platform ios
-   */
-  textFiltersIOS?: Array<TextFilterIOS>;
-
-  // Windows Props
-
-  /**
-   * A boolean flag to enable use of platform-level looping on Windows. This improves loop smoothness,
-   * but onAnimationLoop will not fire and changing the loop prop will restart playback.
-   *
-   * @platform windows
-   */
-  useNativeLooping?: boolean;
-
-  /**
-   * A callback function which will be called when the animation loops.
-   *
-   * @platform windows
-   */
-  onAnimationLoop?: () => void;
-
-  // amznmod_react - add onAnimationLoad callback
-  /**
-   * A callback function which will be called when animation json load is finished.
-   *
-   * @platform kepler
-   */
-  onAnimationLoad?: () => void;
-
-  // PROJ*-136246 - deprecate onAnimationJsonLoad
-  // amznmod_react - add onAnimationJsonLoad callback
-  /**
-   * A callback function which will be called when animation json load is finished.
-   *
-   * @platform kepler
-   */
-  onAnimationJsonLoad?: () => void;
-
-  // amznmod_react - add onAnimationPlay callback
-  /**
-   * A callback function which will be called when animation play is started.
-   *
-   * @platform kepler
-   */
-  onAnimationPlay?: () => void;
-
-  // amznmod_react - add onAnimationPause callback
-  /**
-   * A callback function which will be called when animation is paused.
-   *
-   * @platform kepler
-   */
-  onAnimationPause?: () => void;
-
-  // amznmod_react - add onAnimationResume callback
-  /**
-   * A callback function which will be called when animation is resumed.
-   *
-   * @platform kepler
-   */
-  onAnimationResume?: () => void;
-
-  // amznmod_react - add textFiltersKepler prop
-  /**
-   * An array of objects denoting text values to find and replace.
-   *
-   * @platform kepler
-   */
-  textFiltersKepler?: Array<TextFilterKepler>;
-}

package/src/__tests__/validate-public-api.test.js

@@ -1,33 +0,0 @@
-//
-// Copyright (c) 2024 Amazon.com, Inc. or its affiliates. All Rights Reserved.
-//
-// PROPRIETARY/CONFIDENTIAL
-// Use is subject to license terms.
-//
-
-const {APIValidationOptions, validate_public_api} = require('@amazon-devices/react-native-kepler/jest/validatePublicAPI');
-const glob = require('glob');
-const path = require('path');
-
-const PACKAGE_ROOT = path.resolve(__dirname, '../../');
-const TS_FILES_PATTERN = 'lib/typescript/**/*.d.ts';
-const IGNORE_PATTERNS = [
-    '**/__{tests,mocks,fixtures,flowtests}__/**',
-    '**/specs/**',
-];
-
-const sourceFiles = [
-    ...glob.sync(TS_FILES_PATTERN, {
-        cwd: PACKAGE_ROOT,
-        ignore: IGNORE_PATTERNS,
-        nodir: true,
-    }),
-];
-
-let options = new APIValidationOptions;
-// TODO(huntie): Re-enable once upstream flow-api-translator fixes are made
-options.excludedPlatforms = ['win32'];
-options.typeScriptOnly = true;
-options.verifyTypeScriptDefGenerated = false;
-
-validate_public_api(PACKAGE_ROOT, sourceFiles, options);