React-native: Keep animated values in state or as class property?

It is better to follow official documentation and to use state property.
There are two good reasons for that:

  1. You want to keep all things that have effect on a component render result in your state/props/context.
  2. React-Native Animated library has its own optimizationzs that allows to avoid setState calls and re-rendering on change of Animated components. This is a quote from official documentation

When the component mounts, the opacity is set to 0. Then, an easing animation is started on the fadeAnim animated value, which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1.

This is done in an optimized way that is faster than calling setState and re-rendering.

Leave a Comment