Hands-On Design Patterns with React Native

Changing attributes over time

In React Native, there are three main ways to create animations:

• Animated.timing(): Takes time in milliseconds and desired end value, and maps them to your Animated.Value.
• Animated.decay(): Starts with an initial velocity and slowly decays.
• Animated.spring(): Provides a simple spring physics model.

Let's see how it works in action. Our goal will be to fade in application on the app's start. To achieve a fade-in effect, we will manipulate opacity from 0 to 1. The animation should take two seconds:

Sequence of images showing the opacity animation progress over time

Animated.timing expects two arguments: variable ...