@amazon-devices/lottie-react-native 2.0.1758683737

package/lib/typescript/LottieView.types.d.ts

@@ -0,0 +1,206 @@
+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 {};

package/lib/typescript/index.d.ts

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

package/lib/typescript/specs/LottieAnimationViewNativeComponent.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import type { BubblingEventHandler, Int32, Double, Float } from 'react-native/Libraries/Types/CodegenTypes';
+import type { HostComponent, ProcessedColorValue, ViewProps } from 'react-native';
+export type OnAnimationFinishEvent = Readonly<{
+    isCancelled: boolean;
+}>;
+export type EmptyEvent = {};
+type ColorFilterStruct = Readonly<{
+    keypath: string;
+    color: ProcessedColorValue;
+}>;
+type TextFilterIOSStruct = Readonly<{
+    keypath: string;
+    text: string;
+}>;
+type TextFilterAndroidStruct = Readonly<{
+    find: string;
+    replace: string;
+}>;
+type TextFilterKeplerStruct = Readonly<{
+    keypath: string;
+    text: string;
+}>;
+export interface NativeProps extends ViewProps {
+    autoPlay?: boolean;
+    resizeMode?: string;
+    renderMode?: string;
+    sourceName?: string;
+    sourceJson?: string;
+    sourceURL?: string;
+    imageAssetsFolder?: string;
+    progress?: Float;
+    speed?: Double;
+    loop?: boolean;
+    enableMergePathsAndroidForKitKatAndAbove?: boolean;
+    hardwareAccelerationAndroid?: boolean;
+    cacheComposition?: boolean;
+    colorFilters?: ReadonlyArray<ColorFilterStruct>;
+    dummy?: Readonly<{
+        dummy: boolean;
+    }>;
+    textFiltersAndroid?: ReadonlyArray<TextFilterAndroidStruct>;
+    textFiltersIOS?: ReadonlyArray<TextFilterIOSStruct>;
+    textFiltersKepler?: ReadonlyArray<TextFilterKeplerStruct>;
+    onAnimationFinish?: BubblingEventHandler<OnAnimationFinishEvent, 'onAnimationFinish'>;
+    onAnimationLoad?: BubblingEventHandler<EmptyEvent>;
+    onAnimationPlay?: BubblingEventHandler<EmptyEvent>;
+    onAnimationPause?: BubblingEventHandler<EmptyEvent>;
+    onAnimationResume?: BubblingEventHandler<EmptyEvent>;
+    onAnimationJsonLoad?: BubblingEventHandler<EmptyEvent>;
+}
+type LottieViewNativeComponentType = HostComponent<NativeProps>;
+interface NativeCommands {
+    play: (viewRef: React.ElementRef<LottieViewNativeComponentType>, startFrame: Int32, endFrame: Int32) => void;
+    reset: (viewRef: React.ElementRef<LottieViewNativeComponentType>) => void;
+    pause: (viewRef: React.ElementRef<LottieViewNativeComponentType>) => void;
+    resume: (viewRef: React.ElementRef<LottieViewNativeComponentType>) => void;
+}
+export declare const Commands: NativeCommands;
+declare const _default: HostComponent<NativeProps>;
+export default _default;

package/lottie-react-native.podspec

@@ -0,0 +1,44 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name                    = package["name"]
+  s.version                 = package['version']
+  s.summary                 = package["description"]
+  s.license                 = package["license"]
+
+  s.author                  = package["author"]
+  s.homepage                = package["homepage"]
+
+  s.ios.deployment_target   = '12.4'
+  s.osx.deployment_target   = '10.10'
+  s.tvos.deployment_target  = '12.4'
+
+  s.source                  = { :git => "https://github.com/lottie-react-native/lottie-react-native.git", :tag => "v#{s.version}" }
+  s.source_files            = "ios/**/*.{h,m,mm,swift}"
+
+  s.dependency 'lottie-ios', '~> 3.5.0'
+
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+      "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+      "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+      "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
+      "DEFINES_MODULE" => "YES",
+    }
+    
+    s.dependency "React-RCTFabric"
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+  else
+    s.dependency 'React-Core'
+    s.exclude_files = "ios/Fabric"
+  end
+end

package/package.json

@@ -0,0 +1 @@
+{"name": "@amazon-devices/lottie-react-native", "version": "2.0.1758683737+6.0.0-rc.1", "description": "React Native bindings for Lottie", "main": "lib/commonjs/index.js", "module": "lib/module/index.js", "react-native": "src/index.tsx", "types": "lib/typescript/index.d.ts", "source": "src/index.tsx", "sideEffects": false, "files": ["SystemBundles", "SystemModules", "src", "lib", "android", "ios", "*.podspec", "kepler-compatibility.json", "react-native.config.js", "THIRD_PARTY_NOTICES.txt", "kepler-transformed-package-info.json"], "author": "Emilio Rodriguez <emiliorodriguez@gmail.com>", "homepage": "https://github.com/airbnb/lottie-react-native#readme", "license": "See license in LICENSE", "keywords": ["lottie", "animation", "react", "react-native", "keyframe"], "repository": "https://github.com/react-native-community/lottie-react-native", "bugs": {"url": "https://github.com/react-native-community/lottie-react-native/issues"}, "scripts": {"build": "bob build", "build:release": "npm-run-all build", "test": "jest", "update-api-snapshot": "jest src/__tests__/validate-public-api.test.js -u"}, "//-0": "amznmod_react - Add keplerImport and kepler 3p module aliasing", "keplerImport": true, "kepler": {"temporary-alias-for-package": {"name": "lottie-react-native", "version": "6.0.0-rc.1"}}, "//-1": "amznmod_react - change peerDependencies to restrict to 72.0 or greater", "peerDependencies": {"react": "*", "react-native": ">=0.46", "react-native-windows": ">=0.72.x"}, "peerDependenciesMeta": {"react-native-windows": {"optional": true}}, "//-2": "amznmod_react - change devDependencies versions to be Kepler compatible", "devDependencies": {"@amazon-devices/react-native-kepler": "^2.0.0+rn0.72.0", "@react-native-community/eslint-config": "^2.0.0", "@types/jest": "29.5.12", "@types/react": "^18.0.18", "@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/parser": "^4.33.0", "eslint": "^7.14.0", "eslint-config-prettier": "^6.11.0", "eslint-plugin-prettier": "3.1.2", "flow-api-translator": "^0.20.1", "jest": "^29.2.1", "metro-react-native-babel-preset": "^0.64.0", "npm-run-all": "^4.1.5", "prettier": "^2.2.1", "react": "18.2.0", "react-native": "0.72.0", "react-native-builder-bob": "^0.17.1", "react-native-windows": "0.72.0", "ts-jest": "29.1.2", "typescript": "^4.4.4"}, "react-native-builder-bob": {"source": "src", "output": "lib", "targets": ["commonjs", "module", "typescript"]}, "codegenConfig": {"android": {"javaPackageName": "com.airbnb.android.react.lottie"}, "name": "lottiereactnative", "type": "components", "jsSrcsDir": "./src/specs"}}

package/react-native.config.js

@@ -0,0 +1,32 @@
+let supportsCodegenConfig = false;
+try {
+    const rnCliAndroidVersion =
+        require('@react-native-community/cli-platform-android/package.json').version;
+    const [major] = rnCliAndroidVersion.split('.');
+    supportsCodegenConfig = major >= 9;
+} catch (e) {
+    // ignore
+}
+
+module.exports = {
+    dependency: {
+        platforms: {
+            android: supportsCodegenConfig
+                ? {
+                    libraryName: 'lottiereactnative',
+                    componentDescriptors: ['LottieAnimationViewComponentDescriptor'],
+                }
+                : {},
+            macos: null,
+            windows: null,
+            // amznmod_react - add autolink information for Kepler platform
+            kepler: {
+                autolink: {
+                    AmazonLottieLib: {
+                        provider: 'system'
+                    },
+                },
+            },
+        },
+    },
+};

package/src/LottieView.tsx

@@ -0,0 +1,257 @@
+/*
+ * 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 in MR33
+  // amznmod_react - onAnimationLoad callback
+  onAnimationJsonLoad = () => {
+    console.warn("onAnimationJsonLoad will be deprecated in favor of onAnimationLoad in MR33. 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 in MR33
+          onAnimationJsonLoad={this.onAnimationJsonLoad}
+        />
+      </View>
+    );
+  }
+}