7 Animations
This chapter covers
- Creating basic animations using
Animated.timing - Using interpolation with animated values
- Creating animations and in parallel
- Staggering animations using
Animated.stagger - Using the native driver to offload animations to the native UI thread
One of the great things about React Native is the ability to easily create animations using the Animated API. This is one of the more stable and easy to use React Native APIs, and it’s one of the few places in the React Native ecosystem where, unlike areas such as navigation and state management, there’s almost 100% agreement on how a problem should be solved.
Animations are usually used to enhance the UI of an application and bring more life to the existing design. Sometimes, the difference between an average and above-average user experience can be attributed to using the right animations at the right time, thus setting an app apart from other, similar apps.
Real-world use cases that we cover in this chapter include the following:
- Expanding user inputs that animate when focused
- Animated welcome screens that have more life than a basic static welcome screen
- A custom animated loading indicator
In this chapter, we dive deeply into how to create animations. We’ll cover everything you need to know to take full advantage of the Animated API.