Declare peace with RN animations

Ivan Vukovic, Mobile lead @ Shoutem

Types of animations in React Native

LayoutAnimation (Native thread)
Animated API (JS or native thread)
Transitions (JS thread)

LayoutAnimation

Automatically animates views to their new positions when the next layout happens.

A common way to use this API is to call it before calling setState.

Animated API

The simplest workflow is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as Animated.timing, or by hooking into gestures like panning or scrolling via Animated.event. Animated.Value can also bind to props other than style, and can be interpolated as well.

How to think when designer gives you animation prototype

Break it down to basics
Take a look of slow motion as much as you can
Think of easing, timing, springs
Think of what are the keyframes
FLIP

Solution #1:

Regular RN

Solution #1:

Regular RN

Problem #1: Too much code...

Solution #2:

Library of animated components

Problem #2: How to make them interactive???

<FadeIn>
  <Text>I'm fading in</Text></FadeIn>

Solution #3:

Concept of Driver

Problem #3: Too much nesting and for complex animations

const driver = new ScrollDriver();
...
<FadeIn driver={driver}>
  <Text>I'm fading in</Text></FadeIn>

Solution #4:

connectAnimation HOC

<Image animationName="hero" />