From 8673fbffe4e5e12d7c06aa5f0647f792d8aae3fc Mon Sep 17 00:00:00 2001 From: Apoorv Kansal Date: Wed, 31 Aug 2022 01:24:56 +0530 Subject: [PATCH 1/4] feat: added support for remote urls --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index da0e363..082e8e7 100644 --- a/src/index.js +++ b/src/index.js @@ -37,11 +37,11 @@ class Animation extends PureComponent { this.anim = lottie.loadAnimation({ container: this.animationDOMNode, - animationData: props.source, renderer: 'svg', loop: props.loop || false, autoplay: props.autoPlay, rendererSettings: props.rendererSettings || {}, + ...(props.source.uri && typeof props.source.uri === "string" ? {path:props.source.uri} : {animationData: props.source}) }); if (props.onAnimationFinish) { From 6d1fdc3a93704787e1f64892eccc160234e5ffcc Mon Sep 17 00:00:00 2001 From: Apoorv Kansal Date: Wed, 31 Aug 2022 01:37:33 +0530 Subject: [PATCH 2/4] feat: add types for the project --- package.json | 21 +++-------- src/index.d.ts | 100 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+), 16 deletions(-) create mode 100644 src/index.d.ts diff --git a/package.json b/package.json index 9a5a6a4..23cabb9 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "1.4.4", "description": "React Native for Web implementation of Lottie", "main": "dist/index.js", + "types": "src/index.d.ts", "main-es": "src/index.js", "repository": { "type": "git", @@ -14,29 +15,17 @@ "url": "https://github.com/Minishlink" }, "license": "MIT", - "keywords": [ - "react-native", - "react-native-web", - "lottie-react-native" - ], + "keywords": ["react-native", "react-native-web", "lottie-react-native"], "scripts": { "prepublish": "yarn build", "build": "mkdir -p dist && babel src --out-dir dist --copy-files", "test": "prettier --check ." }, "babel": { - "presets": [ - "module:metro-react-native-babel-preset" - ], - "plugins": [ - "react-native-web" - ] + "presets": ["module:metro-react-native-babel-preset"], + "plugins": ["react-native-web"] }, - "files": [ - "src", - "dist", - "yarn.lock" - ], + "files": ["src", "dist", "yarn.lock"], "devDependencies": { "@babel/cli": "^7.2.3", "@babel/core": "^7.2.2", diff --git a/src/index.d.ts b/src/index.d.ts new file mode 100644 index 0000000..6672797 --- /dev/null +++ b/src/index.d.ts @@ -0,0 +1,100 @@ +declare module "react-native-web-lottie" { + import { Animated, StyleProp, ViewStyle } 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[]; + } + + export interface BaseRendererConfig { + imagePreserveAspectRatio?: string; + className?: string; + } + + export interface FilterSizeConfig { + width: string; + height: string; + x: string; + y: string; +}; + + export interface SVGRendererConfig extends BaseRendererConfig { + title?: string; + description?: string; + preserveAspectRatio?: string; + progressiveLoad?: boolean; + hideOnTransparent?: boolean; + viewBoxOnly?: boolean; + viewBoxSize?: string; + focusable?: boolean; + filterSize?: FilterSizeConfig; + } + + export interface AnimatedLottieViewProps { + /** + * 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 }; + + progress: Animated.Value; + + /** + * 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; + + /** + * A boolean flag indicating whether or not the animation should start automatically when + * mounted. This only affects the imperative API. + */ + autoPlay?: boolean; + + + /** + * Check out lottie docs : https://airbnb.io/lottie/#/web?id=other-loading-options + */ + rendererSettings ?: SVGRendererConfig; + + /** + * 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 string to identify the component during testing + */ + testID?: string; + } + + class AnimatedLottieView extends React.Component< + AnimatedLottieViewProps, + {} + > { + play(startFrame?: number, endFrame?: number): void; + reset(): void; + } + + export default AnimatedLottieView; +} From fdfb280e52e562ac7790914789a9dcb032c35928 Mon Sep 17 00:00:00 2001 From: Apoorv Kansal Date: Wed, 31 Aug 2022 11:50:30 +0530 Subject: [PATCH 3/4] feat: add support for animation speed --- src/index.d.ts | 13 +++++++++---- src/index.js | 9 ++++++++- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index 6672797..405c077 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -22,12 +22,12 @@ declare module "react-native-web-lottie" { className?: string; } - export interface FilterSizeConfig { + export interface FilterSizeConfig { width: string; height: string; x: string; y: string; -}; + } export interface SVGRendererConfig extends BaseRendererConfig { title?: string; @@ -50,7 +50,7 @@ declare module "react-native-web-lottie" { */ source: string | AnimationObject | { uri: string }; - progress: Animated.Value; + progress?: Animated.Value; /** * A boolean flag indicating whether or not the animation should loop. @@ -70,11 +70,16 @@ declare module "react-native-web-lottie" { */ autoPlay?: boolean; + /** + * The speed the animation will progress. This only affects the imperative API. The + * default value is 1. + */ + speed?: number; /** * Check out lottie docs : https://airbnb.io/lottie/#/web?id=other-loading-options */ - rendererSettings ?: SVGRendererConfig; + rendererSettings?: SVGRendererConfig; /** * A callback function which will be called when animation is finished. Note that this diff --git a/src/index.js b/src/index.js index 082e8e7..1b13641 100644 --- a/src/index.js +++ b/src/index.js @@ -25,9 +25,12 @@ class Animation extends PureComponent { } UNSAFE_componentWillReceiveProps(nextProps) { - if (this.props.source && nextProps.source && this.props.source.nm !== nextProps.source.nm) { + if (this.props.source && nextProps.source && (this.props.source.nm !== nextProps.source.nm || this.props.source.uri !== nextProps.source.uri)) { this.loadAnimation(nextProps); } + if(this.props.speed !== nextProps.speed){ + this.anim.setSpeed(nextProps.speed); + } } loadAnimation = (props) => { @@ -44,6 +47,10 @@ class Animation extends PureComponent { ...(props.source.uri && typeof props.source.uri === "string" ? {path:props.source.uri} : {animationData: props.source}) }); + if(props.speed !== undefined){ + this.anim.setSpeed(props.speed) + } + if (props.onAnimationFinish) { this.anim.addEventListener('complete', props.onAnimationFinish); } From ca83a9e77d033870c4fede94706f0ad2834aa082 Mon Sep 17 00:00:00 2001 From: Apoorv Kansal Date: Wed, 31 Aug 2022 11:55:29 +0530 Subject: [PATCH 4/4] fix: fixed prettier warnings --- README.md | 3 ++- src/index.d.ts | 9 +++------ src/index.js | 16 +++++++++++----- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 3842d94..c562a3d 100644 --- a/README.md +++ b/README.md @@ -19,10 +19,11 @@ resolve: { ``` If you are using [Expo](https://docs.expo.dev/guides/customizing-webpack/), you can simply do + ```js const createExpoWebpackConfigAsync = require('@expo/webpack-config'); -module.exports = async function(env, argv) { +module.exports = async function (env, argv) { const config = await createExpoWebpackConfigAsync(env, argv); config.resolve.alias['lottie-react-native'] = 'react-native-web-lottie'; diff --git a/src/index.d.ts b/src/index.d.ts index 405c077..2c5d57c 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1,5 +1,5 @@ -declare module "react-native-web-lottie" { - import { Animated, StyleProp, ViewStyle } from "react-native"; +declare module 'react-native-web-lottie' { + import { Animated, StyleProp, ViewStyle } from 'react-native'; /** * Serialized animation as generated from After Effects */ @@ -93,10 +93,7 @@ declare module "react-native-web-lottie" { testID?: string; } - class AnimatedLottieView extends React.Component< - AnimatedLottieViewProps, - {} - > { + class AnimatedLottieView extends React.Component { play(startFrame?: number, endFrame?: number): void; reset(): void; } diff --git a/src/index.js b/src/index.js index 1b13641..c3e581b 100644 --- a/src/index.js +++ b/src/index.js @@ -25,10 +25,14 @@ class Animation extends PureComponent { } UNSAFE_componentWillReceiveProps(nextProps) { - if (this.props.source && nextProps.source && (this.props.source.nm !== nextProps.source.nm || this.props.source.uri !== nextProps.source.uri)) { + if ( + this.props.source && + nextProps.source && + (this.props.source.nm !== nextProps.source.nm || this.props.source.uri !== nextProps.source.uri) + ) { this.loadAnimation(nextProps); } - if(this.props.speed !== nextProps.speed){ + if (this.props.speed !== nextProps.speed) { this.anim.setSpeed(nextProps.speed); } } @@ -44,11 +48,13 @@ class Animation extends PureComponent { loop: props.loop || false, autoplay: props.autoPlay, rendererSettings: props.rendererSettings || {}, - ...(props.source.uri && typeof props.source.uri === "string" ? {path:props.source.uri} : {animationData: props.source}) + ...(props.source.uri && typeof props.source.uri === 'string' + ? { path: props.source.uri } + : { animationData: props.source }), }); - if(props.speed !== undefined){ - this.anim.setSpeed(props.speed) + if (props.speed !== undefined) { + this.anim.setSpeed(props.speed); } if (props.onAnimationFinish) {