Declarative 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

Project Activity

See All Activity >

Categories

Animation

License

MIT License

Follow react-native-animatable

react-native-animatable Web Site

Other Useful Business Software
Get Avast Free Antivirus | Your top-rated shield against malware and online scams Icon
Get Avast Free Antivirus | Your top-rated shield against malware and online scams

Boost your PC's defense against cyberthreats and web-based scams.

Our antivirus software scans for security and performance issues and helps you to fix them instantly. It also protects you in real time by analyzing unknown files before they reach your desktop PC or laptop — all for free.
Free Download
Rate This Project
Login To Rate This Project

User Reviews

Be the first to post a review of react-native-animatable!

Additional Project Details

Programming Language

JavaScript

Related Categories

JavaScript Animation Software

Registered

2021-06-29