{"id":13535719,"url":"https://github.com/nativescript-community/ui-lottie","last_synced_at":"2025-04-07T16:19:10.471Z","repository":{"id":44894623,"uuid":"80687365","full_name":"nativescript-community/ui-lottie","owner":"nativescript-community","description":"NativeScript plugin to expose Airbnb Lottie","archived":false,"fork":false,"pushed_at":"2024-04-30T09:05:53.000Z","size":5947,"stargazers_count":177,"open_issues_count":9,"forks_count":57,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-29T21:54:25.050Z","etag":null,"topics":["airbnb-lottie","android","animation","ios","lottie","nativescript","nativescript-plugin","nstudio","typescript"],"latest_commit_sha":null,"homepage":"https://github.com/airbnb/lottie-android","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["farfromrefug"]}},"created_at":"2017-02-02T02:48:08.000Z","updated_at":"2024-09-24T09:12:43.000Z","dependencies_parsed_at":"2023-11-19T18:40:13.884Z","dependency_job_id":"11eeb277-3d48-40b3-b440-1bb3e36dfe5e","html_url":"https://github.com/nativescript-community/ui-lottie","commit_stats":null,"previous_names":["bradmartin/nativescript-lottie"],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-lottie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-lottie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-lottie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-lottie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/ui-lottie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247685634,"owners_count":20979085,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["airbnb-lottie","android","animation","ios","lottie","nativescript","nativescript-plugin","nstudio","typescript"],"created_at":"2024-08-01T09:00:23.989Z","updated_at":"2025-04-07T16:19:10.444Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-lottie\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-lottie?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-lottie.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-lottie\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-lottie.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eNativeScript plugin to expose AirBnB Lottie library\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n| \u003cimg src=\"https://raw.githubusercontent.com/nativescript-community/ui-lottie/master/screens/lottieDemo.gif\" height=\"500\" /\u003e |\n| --- | ----------- |\n| iOS Demo | Android Demo |\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [Usage](#usage)\r\n\t* [NativeScript (Core)](#nativescript-core)\r\n\t\t* [XML](#xml)\r\n\t\t* [TS](#ts)\r\n\t* [NativeScript Angular](#nativescript-angular)\r\n\t\t* [Module](#module)\r\n\t\t* [XML](#xml-1)\r\n\t\t* [Component](#component)\r\n* [NativeScript Vue](#nativescript-vue)\r\n\t* [Bootstrap](#bootstrap)\r\n\t* [Component](#component-1)\r\n* [Assets](#assets)\r\n\t* [Android](#android)\r\n\t* [iOS](#ios)\r\n* [Properties (bindable)](#properties-bindable)\r\n* [Properties](#properties)\r\n* [Methods](#methods)\r\n* [Contributors](#contributors)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-lottie`\n\n\r\n[](#usage)\r\n\r\n\r\n[](#usage)\r\n\r\n## Usage\n\n### NativeScript (Core)\n\n#### XML\n\n```xml\n\u003cPage\n    xmlns=\"http://schemas.nativescript.org/tns.xsd\"\n    xmlns:Lottie=\"@nativescript-community/ui-lottie\" navigatingTo=\"navigatingTo\" class=\"page\"\u003e\n    \u003cStackLayout\u003e\n        \u003cLottie:LottieView src=\"PinJump.json\" height=\"130\" loop=\"true\" autoPlay=\"true\" loaded=\"yourLoadedEvent\" /\u003e\n    \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### TS\n\n```typescript\nimport { LottieView } from \"@nativescript-community/ui-lottie\";\n\npublic yourLoadedEvent(args) {\n    this._myLottie = args.object as LottieView; /// this is the instance of the LottieAnimationView\n}\n```\n\n---\n\n### NativeScript Angular\n\n#### Module\n\nFirst you need to include the `NativeScriptLottieModule` in your `app.module.ts`\n\n```typescript\nimport { NativeScriptLottieModule} from '@nativescript-community/ui-lottie/angular';\n\n@NgModule({\n    imports: [\n        NativeScriptLottieModule\n    ],\n    ...\n})\n```\n\n#### XML\n\n```xml\n\u003cStackLayout\u003e\n    \u003cLottieView width=\"100\" height=\"150\" [src]=\"src\" [loop]=\"loop\" [autoPlay]=\"autoPlay\" (loaded)=\"lottieViewLoaded($event)\"\u003e     \u003c/LottieView\u003e\n\u003c/StackLayout\u003e\n```\n\n#### Component\n\n```typescript\nimport { Component } from '@angular/core';\nimport { LottieView } from '@nativescript-community/ui-lottie';\n\n@Component({\n  templateUrl: 'home.component.html',\n  moduleId: module.id\n})\nexport class HomeComponent {\n  public loop: boolean = true;\n  public src: string;\n  public autoPlay: boolean = true;\n  public animations: Array\u003cstring\u003e;\n\n  private _lottieView: LottieView;\n\n  constructor() {\n    this.animations = [\n      'Mobilo/A.json',\n      'Mobilo/D.json',\n      'Mobilo/N.json',\n      'Mobilo/S.json'\n    ];\n    this.src = this.animations[0];\n  }\n\n  lottieViewLoaded(event) {\n    this._lottieView = \u003cLottieView\u003eevent.object;\n  }\n}\n```\n\n---\n\n\r\n[](#nativescript-vue)\r\n\r\n\r\n[](#nativescript-vue)\r\n\r\n## NativeScript Vue\n\n### Bootstrap\n\nIf you want to use this plugin with Vue, do this in your `app.js` or `main.js`:\n\n```javascript\nimport LottieView from '@nativescript-community/ui-lottie/vue';\n\nVue.use(LottieView);\n```\n\nThis will install and register `LottieView` component to your `Vue` instance and now you can use the plugin.\n\n### Component\n\n```xml\n\u003ctemplate\u003e\n    \u003cPage class=\"page\"\u003e\n        \u003cStackLayout\u003e\n            \u003cLottieView height=\"130\" src=\"PinJump.json\" :loop=\"true\" :autoPlay=\"true\" @loaded=\"lottieViewLoaded\"\u003e\u003c/LottieView\u003e\n        \u003c/StackLayout\u003e\n    \u003c/page\n\u003c/template\u003e\n\n\u003cscript\u003e\n    export default {\n        methods: {\n            lottieViewLoaded(args) {\n                this._lottieView = args.object;\n            },\n        },\n        data() {\n            return {\n                _lottieView: null,\n            }\n        }\n    };\n\u003c/script\u003e\n```\n\n---\n\n\r\n[](#assets)\r\n\r\n\r\n[](#assets)\r\n\r\n## Assets\n\n:fire: You can find animations in the `sample-effects` folder.\n\n### Android\n\nPlace your animation files in the NS app's `app/App_Resources/Android/src/main/assets` folder.\n\nNote: In a nativescript-vue project the above folder may not exist. Place the files in `platforms/android/app/src/main/assets`.\n\n### iOS\n\nPlace your animations files in your `app/App_Resources/iOS/` folder.\n\n\r\n[](#properties-bindable)\r\n\r\n\r\n[](#properties-bindable)\r\n\r\n## Properties (bindable)\n\n| Property   | Type      | Default | Description                                   |\n| ---------- | --------- | ------- | --------------------------------------------- |\n| `autoPlay` | `boolean` | `false` | Start LottieView animation on load if `true`. |\n| `loop`     | `boolean` | `false` | Loop continuously animation if `true`.        |\n| `src`      | `string`  | `null`  | Animation path to `.json` file.               |\n\n\r\n[](#properties)\r\n\r\n\r\n[](#properties)\r\n\r\n## Properties\n\n| Property          | Type                | Default | Description                                                                                                                                               |\n| ----------------- | ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `completionBlock` | `(boolean) =\u003e void` | `null`  | Completion block to be executed upon completion of the animation. The animation is considered complete when it finishes playing and is no longer looping. |\n| `duration`        | `number`            | `null`  | Get the duration of the animation.                                                                                                                        |\n| `progress`        | `number`            | `0`     | Get/set the progress of the animation.                                                                                                                    |\n| `speed`           | `number`            | `1`     | Get/set the speed of the animation.                                                                                                                       |\n\n\r\n[](#methods)\r\n\r\n\r\n[](#methods)\r\n\r\n## Methods\n\n| Method                                | Return    | Parameters                 | Description                                                                                                             |\n| ------------------------------------- | --------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------- |\n| `cancelAnimation`                     | `void`    | None                       | Pauses the animation for the LottieView instance.                                                                       |\n| `isAnimating`                         | `boolean` | None                       | Returns true if the LottieView is animating, else false.                                                                |\n| `playAnimation`                       | `void`    | None                       | Plays the animation for the LottieView instance.                                                                        |\n| `playAnimationFromProgressToProgress` | `void`    | startProgress, endProgress | Plays the animation for the LottieView instance from the specified start and end progress values (between 0 and 1).     |\n| `setColor`     | `void`    | value, keyPath             | Sets the provided color value on each property that matches the specified keyPath in the LottieView instance.           |\n| `setOpacity`   | `void`    | value, keyPath             | Sets the provided opacity value (0 - 1) on each property that matches the specified keyPath in the LottieView instance. |\n\n\r\n[](#contributors)\r\n\r\n\r\n[](#contributors)\r\n\r\n## Contributors\n\n| [\u003cimg alt=\"Brad Martin\" src=\"https://avatars0.githubusercontent.com/u/6006148?s=400\u0026v=4\" width=\"117\"\u003e](https://github.com/bradmartin) | [\u003cimg alt=\"Nathan Walker\" src=\"https://avatars0.githubusercontent.com/u/457187?s=400\u0026v=4\" width=\"117\"\u003e](https://github.com/NathanWalker/) | [\u003cimg alt=\"Jean-Baptiste Aniel\" src=\"https://avatars3.githubusercontent.com/u/9477179?s=460\u0026v=4\" width=\"117\"\u003e](https://github.com/rhanb) | [\u003cimg alt=\"HamdiWanis\" src=\"https://avatars3.githubusercontent.com/u/11708544?s=460\u0026v=4\" width=\"117\"\u003e](https://github.com/hamdiwanis) |\n| :-----------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: |\n|                                              [bradmartin](https://github.com/bradmartin)                                              |                                              [NathanWalker](https://github.com/NathanWalker)                                              |                                                    [rhanb](https://github.com/rhanb)                                                     |                                              [HamdiWanis](https://github.com/hamdiwanis)                                              |\n\n| [\u003cimg alt=\"itstheceo\" src=\"https://avatars2.githubusercontent.com/u/5218201?s=460\u0026v=4\" width=\"117\"\u003e](https://github.com/itstheceo) | [\u003cimg alt=\"itstheceo\" src=\"https://avatars2.githubusercontent.com/u/32623552?s=460\u0026v=4\" width=\"117\"\u003e](https://github.com/mudlabs) |\n| :--------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |\n|                                             [itstheceo](https://github.com/itstheceo)                                              |                                               [mudlabs](https://github.com/mudlabs)                                               |\n\n\n\r\n[](#demos-and-development)\r\n\r\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).","funding_links":["https://github.com/sponsors/farfromrefug"],"categories":["Libraries","Plugins"],"sub_categories":["Creation Tools","UI Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-lottie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fui-lottie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-lottie/lists"}