react-native-animation-catalog

---

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

$ npm install react-native-animation-catalog
# --- or ---
$ yarn add react-native-animation-catalog

2. Install required dependencies

$ 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

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

More about AnimatedCard component

---

ⅠI. Animated List

More about AnimatedList component

---

III. Animated Notification

More about Animated Notification component

---

IV. Animated Scanner

More about Animated Scanner component

---

V. Animated Switch

More about Animated Switch component

---

VI. Animated Wallet

More about Animated Wallet component

---

VII. Animated Check Mark

More about Animated Check Mark component

---

VIII. Animated Flicker Loader

More about Animated Loader component

---

IX. Gradient Progress

More about Animated Gradient Progress

---

X. Media Button

More about Media Button component

---

XI. Parallax Header

More about Parallax Header component

---

Example

A full working example project is here Example

$ yarn
$ yarn example ios   // For ios
$ yarn example android   // For Android

Find this library useful? ❤️

Support it by joining 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 for ideas on contributing.

Bugs / Feature requests / Feedbacks

For bugs, feature requests, and discussion please use GitHub Issues

Awesome Mobile Libraries

• Check out our other available awesome mobile libraries

License

• MIT License