Animations and Gestures
Animations and gestures are fundamental building blocks for creating engaging, responsive, and intuitive mobile applications. They transform static interfaces into dynamic experiences that respond naturally to user interactions. React Native provides powerful animation APIs and gesture recognition systems that enable developers to create smooth, performant animations and handle complex touch interactions with precision.
Animation Functions
| Function | Description |
|---|---|
withTiming | Creates a timing-based animation with configurable duration and easing |
withSpring | Creates a spring-based animation with natural motion and bounce |
withDecay | Creates a decay animation that gradually slows down |
withSequence | Runs multiple animations in sequence |
withRepeat | Repeats an animation a specified number of times |
withDelay | Adds a delay before starting an animation |
withClamp | Clamps animation values between specified bounds |
Gesture Types
| Gesture | Description |
|---|---|
| Gesture detector | Base component for handling gestures |
| Gesture | Base class for creating custom gestures |
| Pan gesture | Handles dragging and swiping interactions |
| Tap gesture | Detects single and multiple taps |
| Long press gesture | Detects when user holds down for a duration |
| Rotation gesture | Handles rotation with two fingers |
| Pinch gesture | Handles pinch-to-zoom interactions |
| Fling gesture | Detects quick swipe motions |
Resources
- Source Code - App Example
- Docs - React Native Gesture Handler
- Docs - React Native Reanimated