DownloadDeclarative transitions and animations for React Native. To animate things you must use the createAnimatableComponent composer similar to the Animated.createAnimatedComponent. The common components View, Text and Image are precomposed and exposed under the Animatable namespace. If you have your own component that you wish to animate, simply wrap it with a Animatable.View. To make looping animations simply set the iterationCount to infinite. Most animations except the attention seekers work best when setting direction to alternate. You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap, all animated, all declarative! If you don't supply a duration property, a spring animation will be used. Transitions require StyleSheet.flatten available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage.
Features
- All animations are exposed as functions on Animatable elements
- Animations return a promise that is resolved when animation completes successfully or is cancelled
- To stop any ongoing animations, just invoke stopAnimation() on that element
- You can also animate imperatively by using the animate() function on the element for custom animations
- Animations can be referred to by a global name or a definition object
- Combine multiple styles to create a zoom out animation
Project Samples
