{"id":30805426,"url":"https://github.com/simformsolutionspvtltd/react-native-animation-catalog","last_synced_at":"2025-09-06T00:57:28.058Z","repository":{"id":53149453,"uuid":"490647057","full_name":"SimformSolutionsPvtLtd/react-native-animation-catalog","owner":"SimformSolutionsPvtLtd","description":"A collection of animated React Native components 🌟🔥","archived":false,"fork":false,"pushed_at":"2024-01-04T08:50:57.000Z","size":76939,"stargazers_count":99,"open_issues_count":1,"forks_count":3,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-08-21T08:11:12.563Z","etag":null,"topics":["animated-components","animation","components","react-native","reanimated","reanimated2","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimformSolutionsPvtLtd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-05-10T10:24:10.000Z","updated_at":"2025-06-13T09:44:51.000Z","dependencies_parsed_at":"2023-02-16T04:46:03.767Z","dependency_job_id":"264cf7dd-9198-4dab-8a08-d6600ebf40f6","html_url":"https://github.com/SimformSolutionsPvtLtd/react-native-animation-catalog","commit_stats":{"total_commits":40,"total_committers":9,"mean_commits":4.444444444444445,"dds":0.6,"last_synced_commit":"307965c711f2501870e0a50b8bfb3dd6243bb12d"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/SimformSolutionsPvtLtd/react-native-animation-catalog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-animation-catalog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-animation-catalog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-animation-catalog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-animation-catalog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimformSolutionsPvtLtd","download_url":"https://codeload.github.com/SimformSolutionsPvtLtd/react-native-animation-catalog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-animation-catalog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273842837,"owners_count":25177921,"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","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animated-components","animation","components","react-native","reanimated","reanimated2","typescript"],"created_at":"2025-09-06T00:57:22.616Z","updated_at":"2025-09-06T00:57:28.014Z","avatar_url":"https://github.com/SimformSolutionsPvtLtd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![alt tag](./assets/react-native-animations.gif)\n\n# react-native-animation-catalog\n\n---\n\n## [![npm version](https://img.shields.io/badge/npm%20package-0.0.2-orange)](https://www.npmjs.org/package/react-native-animation-catalog) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)\n\n\u003cbr\u003e\n\nThis custom animated component library provides multiple custom animated components like `AnimatedList`,`AnimatedCard`,`GradientProgress`,`ParallaxHeader`,`MediaButton` and many more!\n\n- It also provides an example app and a detailed usage overview of every available component\n- All the available components are fully Android and iOS compatible.\n- See our available \u003ca href=\"#Components\"\u003eComponents\u003c/a\u003e\n\n## 🎬 Preview\n\n---\n\n|   \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eParallax Header   | \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eParallax Header (With-Tabs) | \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eAnimatedList |\n| :------------------------------------------------: | :--------------------------------------------------------: | :-----------------------------------------: |\n| ![alt tag](./assets/ParallaxHeaderWithoutTabs.gif) |        ![alt tag](./assets/ParallaxHeaderTabs.gif)         | ![alt_tag](./assets/animatedFadeUpDown.gif) |\n\n| \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eGradient Progress | \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eAnimated Card | \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eMedia Button |\n| :----------------------------------------------: | :------------------------------------------: | :-----------------------------------------: |\n|    ![alt tag](./assets/GradientProgress.gif)     |    ![alt tag](./assets/AnimatedCard.gif)     |    ![alt_tag](./assets/MediaButton.gif)     |\n\n| \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eAnimated CheckMark | \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eAnimated Wallet | \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eAnimated Scanner |\n| :-----------------------------------------------: | :--------------------------------------------: | :---------------------------------------------: |\n|    ![alt_tag](./assets/AnimatedCheckMark.gif)     |    ![alt_tag](./assets/AnimatedWallet.gif)     |    ![alt_tag](./assets/AnimatedScanner.gif)     |\n\n| \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eAnimated Switch | \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eAnimated Notification | \u003cdiv style=\"width:270px\"\u003e\u003c/div\u003eAnimated Flicker Loader |\n| :--------------------------------------------: | :--------------------------------------------------: | :----------------------------------------------------: |\n|    ![alt_tag](./assets/AnimatedSwitch.gif)     |    ![alt_tag](./assets/AnimatedNotification.gif)     |     ![alt_tag](./assets/AnimatedFlickerLoader.gif)     |\n\n## Installation\n\n##### 1. Install animation catalog\n\n```bash\n$ npm install react-native-animation-catalog\n# --- or ---\n$ yarn add react-native-animation-catalog\n```\n\n##### 2. Install required dependencies\n\n```bash\n$ npm install react-native-reanimated react-native-gesture-handler react-native-linear-gradient @react-navigation/native @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view react-native-screens react-native-safe-area-context\n# --- or ---\n$ yarn add react-native-reanimated react-native-gesture-handler react-native-linear-gradient @react-navigation/native @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view react-native-screens react-native-safe-area-context\n```\n\n##### 3. Install cocoapods in the ios project\n\n```bash\ncd ios \u0026\u0026 pod install\n```\n\n\u003e Note: Make sure to add Reanimated's babel plugin to your `babel.config.js`\n\n```\nmodule.exports = {\n      ...\n      plugins: [\n          ...\n          'react-native-reanimated/plugin',\n      ],\n  };\n```\n\n## Components\n\n---\n\n### Ⅰ. [Animated Card](./src/components/AnimatedCard)\n\n[More about AnimatedCard component](./src/components/AnimatedCard/README.md)\n\n---\n\n### ⅠI. [Animated List](./src/components/AnimatedList)\n\n[More about AnimatedList component](./src/components/AnimatedList/README.md)\n\n---\n\n### III. [Animated Notification](./src/components/AnimatedNotification)\n\n[More about Animated Notification component](./src/components/AnimatedNotification/README.md)\n\n---\n\n### IV. [Animated Scanner](./src/components/AnimatedScanner)\n\n[More about Animated Scanner component](./src/components/AnimatedScanner/README.md)\n\n---\n\n### V. [Animated Switch](./src/components/AnimatedSwitch)\n\n[More about Animated Switch component](./src/components/AnimatedSwitch/README.md)\n\n---\n\n### VI. [Animated Wallet](./src/components/AnimatedWallet)\n\n[More about Animated Wallet component](./src/components/AnimatedWallet/README.md)\n\n---\n\n### VII. [Animated Check Mark](./src/components/AnimatedCheckMark)\n\n[More about Animated Check Mark component](./src/components/AnimatedCheckMark/README.md)\n\n---\n\n### VIII. [Animated Flicker Loader](./src/components/AnimatedFlickerLoader)\n\n[More about Animated Loader component](./src/components/AnimatedFlickerLoader/README.md)\n\n---\n\n### IX. [Gradient Progress](./src/components/GradientProgress)\n\n[More about Animated Gradient Progress](./src/components/GradientProgress/README.md)\n\n---\n\n### X. [Media Button](./src/components/MediaButton)\n\n[More about Media Button component](./src/components/MediaButton/README.md)\n\n---\n\n### XI. [Parallax Header](./src/components/ParallaxHeader)\n\n[More about Parallax Header component](./src/components/ParallaxHeader/README.md)\n\n---\n\n### Example\n\nA full working example project is here [Example](./example/)\n\n```sh\n$ yarn\n$ yarn example ios   // For ios\n$ yarn example android   // For Android\n```\n\n## Find this library useful? ❤️\n\nSupport it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-animation-catalog/stargazers) for this repository.⭐\n\n## 🤝 How to Contribute\n\nWe'd love to have you improve this library or fix a problem 💪\nCheck out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.\n\n## Bugs / Feature requests / Feedbacks\n\nFor bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-animation-catalog/issues)\n\n## Awesome Mobile Libraries\n\n- Check out our other available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)\n\n### License\n\n- [MIT License](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-animation-catalog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-animation-catalog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-animation-catalog/lists"}