react-native-reanimatable
Easy way to create 60fps animations using react-native-reanimated.
Warning
This is still very work in progress. Many things may change. It's not recommended to use it in production right now (but I will :D).
Many things are still missing. Check out our roadmap.
Installation
Install the library from npm:
npm i --save react-native-reanimatable
or
yarn add react-native-reanimatable
After that, follow the Getting Started of Reanimated, because the library uses it under the hood.
Usage
Please, check out Example folder for now. You can run examples using Expo.
Detailed usage and explanation will come later.
Roadmap
- Add support for decay and spring type of animations
- Add support for keyframes (interpolation)
- Add support for scroll event delegation
- Add support for pan events delegation
- Add support for animated snap point of delegation
- Add support for mounting/unmounting animations
- Add more examples
- Add docs
- Add typings
- Add some out of the box animations (bounces, zooms etc)
- Add animation lifecycle
- Add support for color animations
- Add ability to control the animation (play, pause, reset)
Example
import React from 'react';import StyleSheet Text View Button Animated from 'react-native';import Reanimatable createAnimationConfig from 'react-native-reanimatable';import Animated from 'react-native-reanimated'; const config = ; const s = StyleSheet; PureComponent state = value: false ; { this; } { return <View => <Reanimatable = = = > width height translateY <Animated.View = /> </Reanimatable> <Button ="Toggle Animation" = = /> </View> ; }
Inspirations
Inspired by incredible react-native-animatable.
License
MIT © Terry Sahaidak 2019