Summary - Reanimated

Combine useSharedValue, useAnimatedStyle and withTiming to write an animated card.

Summary - Reanimated

In this group you learned useSharedValue, useAnimatedStyle, withTiming and withSpring. useSharedValue is the shared value; useAnimatedStyle is the animated style; withTiming provides fixed duration; withSpring provides spring animation.

Now we will combine them into an animated card. A shared value holds the card's X position; the animated style applies a shift based on this value. On button press withTiming slides the card 100 px. This pattern is the skeleton of every Reanimated animation.

Exercise Summary - Animated card skeleton

Complete the AnimatedCard component. Define offset with useSharedValue(0). Produce an animated style with useAnimatedStyle(() => ({ transform: [{ translateX: offset.value }] })). Give [styles.box, animatedStyle] to Animated.View's style. On button onPress call offset.value = withTiming(100).

Show example solution

import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { Animated, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';

export function AnimatedCard() {
  const offset = useSharedValue(0);
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  return (
    <View>
      <Animated.View style={[styles.box, animatedStyle]} />
      <Button title="Slide" onPress={() => { offset.value = withTiming(100); }} />
    </View>
  );
}

const styles = StyleSheet.create({
  box: { width: 100, height: 100, backgroundColor: 'tomato' },
});

Exercise Summary - Spring button

Complete the SpringButton component. Define scale = useSharedValue(1). Produce a style with useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] })). On button onPress call scale.value = withSpring(0.9).

Show example solution

import React from 'react';
import { Button, View } from 'react-native';
import { Animated, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';

export function SpringButton() {
  const scale = useSharedValue(1);
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <View>
      <Animated.View style={[{ width: 100, height: 40, backgroundColor: 'blue' }, animatedStyle]} />
      <Button title="Press" onPress={() => { scale.value = withSpring(0.9); }} />
    </View>
  );
}

Test yourself

Match the flow parts

useSharedValue

Shared value
useAnimatedStyle

Animated style
Animated.View

Applies the style
withTiming

Runs the animation

The animation call

offset.value = ____(100);

Show answer

offset.value = withTiming(100);

Next lesson: What are native modules?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies