Introduction to React Native Reanimated

YouTube Channel

Code setup

I’ve built up an Expo project with the Expo CLI and I included the Reanimated library.

Reanimated ingredients

So let’s discover together which are the most important ingredients to build up a Reanimated animation.

First ingredient: Shared Values

The first ingredient is the Shared Value. Shared Values are JavaScript values that can be handled by the UI Thread.

Second ingredient: Reanimated Style

The second most important ingredient is the useAnimatedStyle hook, needed in order to create Reanimated styles. With this hook, we can return a style very similar to the StyleSheet style used by React Native.

  • A function that returns a style
  • An optional dependency list

Third ingredient: Animated View

We’re going to animate something, right? Therefore we need something more powerful than a simple React Native View. The answer to this need is the Animated.View component.

Fourth ingredient: High order functions

Right now we’re not animating our Animated.View. We need of course to pass the Reanimated style. Let’s say we want to animate the opacity from 0 -> 1:

  1. We need to change the progress initial value
  2. We must set the “end animation value” inside a useEffect hook.

withSpring

The timing animation is definitely great but with Reanimated v2 we can push forward this tutorial with a spring animation.

  • withTiming: is based on duration and on a curve
  • withSpring: is based on physics (mass, damping, stiffness, etc…)
  1. Animate the opacity from 1 -> 0.5
  2. Use a spring animation for the opacity as well

Fifth ingredient: Repetitions

Let’s add another ingredient to our recipe the withRepeat High Order Function. Wouldn’t it be great to repeat the animation?

Last ingredient: Worklets

The last question is: “when do we need to use worklets?”. I mean… at the beginning of this tutorial we talked about the magical worklet function but till now we didn’t use them. I’m going to answer this question but for now, let’s focus on a specific task.

--

--

I am 24 years old. My biggest passions are music, chess, photography, and of course programming.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Enzo Manuel Mangano

Enzo Manuel Mangano

I am 24 years old. My biggest passions are music, chess, photography, and of course programming.