react-native-simple-animators
A simple, versatile and reusable animating component that can animate any of the animatable style props and will use the native driver where possible. It can also now handle event animations, e.g. on scroll.
NOTE: Version 2 has been released and it is a breaking change in the way that the imports are handled, e.g.
;...<AnimateTranslateX ...
has changed to
;...<Animator type='translateX' ...
Installation
yard add react-native-simple-animators
Usage
These animators are intended to animate their children in what I feel is a very simple way. Opacity and transform styles will use the nativeDriver which greatly improves performance.
Here is an example of a static animation:
...const BannerText = { return <Animator type='translateX' initialValue=-200 // value to animate from finalValue=0 // value to animate to shouldAnimateIn // flag to start the animation animateInCallback=null // some function to trigger once the animation has ended shouldAnimateOut=false // flag to reverse the animation (only if shouldAnimateIn was previously set) animateOutCallback=null // some function to trigger once the animation has ended shouldRepeat // repeat the animation, ie. -200 => 0 and back to -200 etc. shouldLoop // loop the animation (must set shouldRepeat to work), ie. -200 => 0 => reset to 0 => -200 => 0 etc. duration=2000 // duration of the animation easing=Easingease // easing delay=500 // useful with animating lists (DELAY * index) style= backgroundColor: 'red' > <Text>How easy was this?</Text> </AnimateTranslateX> );}...
and here's an example of an event animation:
...const BannerText = { return <Animator type='translateX' animatedValue=scrollY interpolation= inputRange: 0 100 // range of the scroll value outputRange: 0 200 // range of the translateX value extrapolate: 'clamp' style= backgroundColor: 'red' > <Text>How easy was this?</Text> </AnimateTranslateX> );}...
Demo
- Clone the repo.
git clone https://github.com/AuxStudio/react-native-simple-animators
- Install dependencies:
cd demo && yarn
- Run the demo
react-native run-ios
Development
- Clone the repo.
git clone https://github.com/AuxStudio/react-native-simple-animators
- Install dependencies:
yarn
- Make sure the tests are passing:
yarn test
- Create a PR.
Releases
- Login to npm
npm login
- Run the publish script.
yarn run publish