https://github.com/simformsolutionspvtltd/react-native-animation-catalog
A collection of animated React Native components 🌟🔥
https://github.com/simformsolutionspvtltd/react-native-animation-catalog
animated-components animation components react-native reanimated reanimated2 typescript
Last synced: 29 days ago
JSON representation
A collection of animated React Native components 🌟🔥
- Host: GitHub
- URL: https://github.com/simformsolutionspvtltd/react-native-animation-catalog
- Owner: SimformSolutionsPvtLtd
- License: mit
- Created: 2022-05-10T10:24:10.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-04T08:50:57.000Z (over 1 year ago)
- Last Synced: 2025-08-21T08:11:12.563Z (about 1 month ago)
- Topics: animated-components, animation, components, react-native, reanimated, reanimated2, typescript
- Language: TypeScript
- Homepage:
- Size: 73.4 MB
- Stars: 99
- Watchers: 6
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-animation-catalog
---
## [](https://www.npmjs.org/package/react-native-animation-catalog) [](https://www.android.com) [](https://developer.apple.com/ios) [](https://opensource.org/licenses/MIT)
This custom animated component library provides multiple custom animated components like `AnimatedList`,`AnimatedCard`,`GradientProgress`,`ParallaxHeader`,`MediaButton` and many more!
- It also provides an example app and a detailed usage overview of every available component
- All the available components are fully Android and iOS compatible.
- See our available Components
## 🎬 Preview
---
|
Parallax Header | Parallax Header (With-Tabs) | AnimatedList |
| :------------------------------------------------: | :--------------------------------------------------------: | :-----------------------------------------: |
|  |  |  |
|
Gradient Progress | Animated Card | Media Button |
| :----------------------------------------------: | :------------------------------------------: | :-----------------------------------------: |
|  |  |  |
|
Animated CheckMark | Animated Wallet | Animated Scanner |
| :-----------------------------------------------: | :--------------------------------------------: | :---------------------------------------------: |
|  |  |  |
|
Animated Switch | Animated Notification | Animated Flicker Loader |
| :--------------------------------------------: | :--------------------------------------------------: | :----------------------------------------------------: |
|  |  |  |
## Installation
##### 1. Install animation catalog
```bash
$ npm install react-native-animation-catalog
# --- or ---
$ yarn add react-native-animation-catalog
```
##### 2. Install required dependencies
```bash
$ 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
# --- or ---
$ 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
```
##### 3. Install cocoapods in the ios project
```bash
cd ios && pod install
```
> Note: Make sure to add Reanimated's babel plugin to your `babel.config.js`
```
module.exports = {
...
plugins: [
...
'react-native-reanimated/plugin',
],
};
```
## Components
---
### Ⅰ. [Animated Card](./src/components/AnimatedCard)
[More about AnimatedCard component](./src/components/AnimatedCard/README.md)
---
### ⅠI. [Animated List](./src/components/AnimatedList)
[More about AnimatedList component](./src/components/AnimatedList/README.md)
---
### III. [Animated Notification](./src/components/AnimatedNotification)
[More about Animated Notification component](./src/components/AnimatedNotification/README.md)
---
### IV. [Animated Scanner](./src/components/AnimatedScanner)
[More about Animated Scanner component](./src/components/AnimatedScanner/README.md)
---
### V. [Animated Switch](./src/components/AnimatedSwitch)
[More about Animated Switch component](./src/components/AnimatedSwitch/README.md)
---
### VI. [Animated Wallet](./src/components/AnimatedWallet)
[More about Animated Wallet component](./src/components/AnimatedWallet/README.md)
---
### VII. [Animated Check Mark](./src/components/AnimatedCheckMark)
[More about Animated Check Mark component](./src/components/AnimatedCheckMark/README.md)
---
### VIII. [Animated Flicker Loader](./src/components/AnimatedFlickerLoader)
[More about Animated Loader component](./src/components/AnimatedFlickerLoader/README.md)
---
### IX. [Gradient Progress](./src/components/GradientProgress)
[More about Animated Gradient Progress](./src/components/GradientProgress/README.md)
---
### X. [Media Button](./src/components/MediaButton)
[More about Media Button component](./src/components/MediaButton/README.md)
---
### XI. [Parallax Header](./src/components/ParallaxHeader)
[More about Parallax Header component](./src/components/ParallaxHeader/README.md)
---
### Example
A full working example project is here [Example](./example/)
```sh
$ yarn
$ yarn example ios // For ios
$ yarn example android // For Android
```
## Find this library useful? ❤️
Support it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-animation-catalog/stargazers) for this repository.⭐
## 🤝 How to Contribute
We'd love to have you improve this library or fix a problem 💪
Check out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.
## Bugs / Feature requests / Feedbacks
For bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-animation-catalog/issues)
## Awesome Mobile Libraries
- Check out our other available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)
### License
- [MIT License](./LICENSE)