react-native-animation-catalog
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

alt tag

react-native-animation-catalog


npm version Android iOS MIT


This custom animated component library provides multiple custom animated components like AnimatedList, AnimatedCard, GradientProgress, ParallaxHeader, MediaButton.

  • 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
alt tag alt tag alt_tag
Gradient Progress
Animated Card
Media Button
alt tag alt tag alt_tag

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 List

More about AnimatedList component


ⅠI. Animated Card

More about AnimatedCard component


ⅠII. Gradient Progress

More about Gradient Progress component


ⅠV. Parallax Header

More about Parallax Header component


V. Media Button

More about Media Button 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

License

Package Sidebar

Install

npm i react-native-animation-catalog

Weekly Downloads

2

Version

0.0.2

License

MIT

Unpacked Size

1.07 MB

Total Files

212

Last publish

Collaborators

  • simform_solutions