Home

Welcome to the react-native-wave

Looking for the Documentation?!

This React Native animation API is built on top of the Animated API that React Native utilizes.

The idea behind this library is to take a more functional approach to handling animations in React Native. The idea behind WAVE is not to generalize too much when building animations. The developer has 'full control' of the property he/she is trying to animate and the range input the properties are animated too.

WAVE does not limit or control you on what values you apply for the animation. You have a free hand on building your own animations. So carefully assign the animation properties and values you feed to the library.

Here is an example of what can go wrong if you are not careful:

Let's take two cases: Let's assume you are trying to animate the opacity of some component, in order to make a simple fade in animation for the component. Here is how you do it:

const AnimatedCard = Wave(Card)
  .applyAnimation(Animate.opacity, 0, 1, 1000)
  .animate()

Where Card is a provided component you are applying an animation too. The valid value range for opacity is from 0 to 1.

And second, in case you are trying to move the component up a bit, for example, you need to apply an animation to the bottom margin of the component, as follows.

const AnimatedCard = Wave(Card)
  .applyAnimation(Animate.marginBottom, 0, 30, 1000)
  .animate()

In this case, we are adding a bottom margin to the component from 0 to 30 in the matter of 1 second (1000 ms).

So what I mean by carefully setting the animation values to the library, is that you can assign the range of the opacity animation same as the margin animation and therefore you will exceed the allowed range of the opacity property. Same goes for the margin animation, if you set a large value to the end value of the animation, for example, from 0 to 5000, the component will fly out of the screen. So be warned!