Summary - Reanimated
- React Native course
- Advanced
- Lesson 66/83
- 5 min
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.
Practice 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).
Starter code
import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { Animated, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
export function AnimatedCard() {
// return Animated.View with offset, animatedStyle and a button
return null;
}Sample 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' },
});Practice 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).
Starter code
import React from 'react';
import { Button, View } from 'react-native';
import { Animated, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
export function SpringButton() {
// return Animated.View with scale, animatedStyle and a button
return null;
}Sample 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>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the flow parts
| Term | Meaning |
|---|---|
useSharedValue |
Shared value |
useAnimatedStyle |
Animated style |
Animated.View |
Applies the style |
withTiming |
Runs the animation |
2 The animation call
offset.value = ____(100);offset.value = withTiming(100);Explanation: withTiming starts the animation.