@amazon-devices/lottie-react-native 2.0.1758683737

package/src/LottieView.types.ts

@@ -0,0 +1,275 @@
+/*
+ * 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 in MR33
+  // 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__/__snapshots__/validate-public-api.test.js.snap

@@ -0,0 +1,248 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`public API should not change unintentionally lib/typescript/LottieView.d.ts: LottieView.d.ts 1`] = `
+"import React from 'react';
+import { NativeSyntheticEvent } from 'react-native';
+import type { AnimatedLottieViewProps } from './LottieView.types';
+import NativeLottieAnimationView from './specs/LottieAnimationViewNativeComponent';
+/**
+ * View hosting the lottie animation.
+ */
+export declare class AnimatedLottieView extends React.PureComponent<AnimatedLottieViewProps, {}> {
+    static defaultProps: AnimatedLottieViewProps;
+    _lottieAnimationViewRef: React.ElementRef<typeof NativeLottieAnimationView> | undefined;
+    constructor(props: AnimatedLottieViewProps);
+    componentDidUpdate(prevProps: AnimatedLottieViewProps): void;
+    play(startFrame?: number, endFrame?: number): void;
+    reset(): void;
+    pause(): void;
+    resume(): void;
+    onAnimationFinish: (evt: NativeSyntheticEvent<{
+        isCancelled: boolean;
+    }>) => void;
+    onAnimationLoad: () => void;
+    onAnimationJsonLoad: () => void;
+    onAnimationPlay: () => void;
+    onAnimationPause: () => void;
+    onAnimationResume: () => void;
+    _captureRef(ref: React.ElementRef<typeof NativeLottieAnimationView>): void;
+    render(): React.ReactNode;
+}
+"
+`;
+
+exports[`public API should not change unintentionally lib/typescript/LottieView.types.d.ts: LottieView.types.d.ts 1`] = `
+"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;
+};
+type TextFilterKepler = {
+    keypath: string;
+    text: string;
+};
+type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
+/**
+ * Properties of the AnimatedLottieView component
+ */
+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;
+    /**
+     * 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;
+    /**
+     * An array of objects denoting text layers by KeyPath and a new string value.
+     *
+     * @platform ios
+     */
+    textFiltersIOS?: Array<TextFilterIOS>;
+    /**
+     * 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;
+    /**
+     * A callback function which will be called when animation json load is finished.
+     *
+     * @platform kepler
+     */
+    onAnimationLoad?: () => void;
+    /**
+     * A callback function which will be called when animation json load is finished.
+     *
+     * @platform kepler
+     */
+    onAnimationJsonLoad?: () => void;
+    /**
+     * A callback function which will be called when animation play is started.
+     *
+     * @platform kepler
+     */
+    onAnimationPlay?: () => void;
+    /**
+     * A callback function which will be called when animation is paused.
+     *
+     * @platform kepler
+     */
+    onAnimationPause?: () => void;
+    /**
+     * A callback function which will be called when animation is resumed.
+     *
+     * @platform kepler
+     */
+    onAnimationResume?: () => void;
+    /**
+     * An array of objects denoting text values to find and replace.
+     *
+     * @platform kepler
+     */
+    textFiltersKepler?: Array<TextFilterKepler>;
+}
+export {};
+"
+`;
+
+exports[`public API should not change unintentionally lib/typescript/index.d.ts: index.d.ts 1`] = `
+"import { AnimatedLottieView } from './LottieView';
+export default AnimatedLottieView;
+"
+`;

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

@@ -0,0 +1,33 @@
+//
+// 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);

package/src/index.tsx

@@ -0,0 +1,2 @@
+import { AnimatedLottieView } from './LottieView';
+export default AnimatedLottieView;