Animated

    The Animated API lets us animate component styles.

    There are 4 fundamental parts to this API:

    • Animated.Value - wrap a number value that we want to use in a style
    • Animated.View, Animated.Text, ... - use a component that supports animated styles
    • Animated.timing, Animated.spring, ... - choose an animation type
    • .start() - start the animation
    Let's walk through setting up an animation.

    1. Create an Animated.Value

    To wrap a number value, call new Animated.Value(value).

    2. Choose an Animated component

    Animated provides specially wrapped versions of the standard View, Text, and Image components. These wrapped components can have Animated.Values in their style prop. To animate something other than one of these three, we can wrap any component, e.g. const AnimatedButton = Animated.createAnimatedComponent(Button).

    Then, we can use the Animated.Value we created earlier in a style.

    This won't animated, since we haven't specified a style we want to animate yet.

    3. Animate!

    Pick an animation function, e.g. Animated.timing and then call .start() imperatively. Now we can should see an animation when we click the button.

    We'll typically use the useNativeDriver option when possible - this improves animation performance, but we can only use it when animating styles that don't affect layout (e.g. color, opacity, and transform but not width or flex)

    Don't forget .start()!

    Interpolate

    To animate styles in more complex ways, we can use a single animated value, but interpolate its value into different ranges for different styles.

    Other animations

    There are other types of animations we can run besides timing: delay and spring. We can also choose the easing curve to use with a timing animation.

    We can also perform other operations on animated values besides interpolate.

    The documentation covers all of the available options in more detail.

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!