react-native-animation-catalog
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 |
---|---|---|
![]() |
![]() |
![]() |
Gradient Progress | Animated Card | Media Button |
---|---|---|
![]() |
![]() |
![]() |
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
Animated Card
ⅠI.More about AnimatedCard component
Gradient Progress
ⅠII.More about Gradient Progress component
Parallax Header
ⅠV.More about Parallax Header component
Media Button
V.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
Bugs / Feature requests / Feedbacks
For bugs, feature requests, and discussion please use GitHub Issues