Getting started
The goal of the Fundamentals section is to help you gain a strong foundation on the core concepts of Reanimated and give you the confidence to explore more advanced use cases on your own. This section is packed with interactive examples, code snippets and explanations. Are you ready? Let's dive in!
Your First Animation
In this section, we'll guide you through the basic concepts of Reanimated. If you're new to Reanimated, you're in the right hands! We're going to start by building a simple animation which will help you develop a basic understanding of the library. Then, in the following sections, we're going to build on top of this knowledge and further expand your skills. Let's go!
Animating styles and props
In the last section, we learned how to make simple animations, what shared values are and how to use them. Now, we'll learn a different way of passing animation styles to components. We'll also go over the difference between animating styles and props and how to handle them using useAnimatedStyle and useAnimatedProps.
Customizing animations
Previous section not only taught you how to use shared values in practice but also you used withSpring and withTiming functions to create animations. We think now you're more than ready to dive deeper into customizing animations!
Applying modifiers
Another way of customizing animations in Reanimated is by using animation modifiers. Reanimated comes with three built-in modifiers: withRepeat, withSequence, and withDelay.
Handling gestures
In this section, we'll learn how to handle gestures with Reanimated. To achieve this, Reanimated integrates tightly with React Native Gesture Handler, another library created by Software Mansion.
Glossary of terms
Animated component