Rangle.io: React Native Workshop
gitbook
gitbookmaster
gitbook
gitbookmaster
  • Introduction
  • Setup
    • Hello World
    • Debugging
  • Core Concepts
    • Components
    • Styles
    • Flexbox
    • APIs
  • Navigation
    • Navigation Experimental
    • Creating Some Helpers
    • The Navigator Component
  • ListView (Pokédex)
    • List View
    • List View: Render Row
    • Text Input
    • Keyboard Spacer
  • Selectors (Filtering)
  • Animation
    • LayoutAnimation
    • Animated
      • Animated.Value
      • Timing, Spring & Decay
      • Animated Components
      • More Animated
    • Resources
    • Exercise
  • ScrollView (Pokemon Details)
  • MapView
  • Testing
  • Gesture Responder System
    • PanResponder
Powered by GitBook
On this page

Was this helpful?

  1. Animation

Animated

The Animated library allows you to animate specific values of targeted components.

Unlike LayoutAnimation these animations are executed on the JavaScript side and rely on requestAnimationFrame and setNativeProps. This can sometimes lead to stutter.

import { Animated } from 'react-native';

Creating an animation with the Animted API is generally a three step process and might seem familiar if you've ever used react-motion:

  • Create a new animated value

  • Trigger the animation/tween

  • Connect the animated value to a style property of a component

PreviousLayoutAnimationNextAnimated.Value

Last updated 6 years ago

Was this helpful?