Reanimated
npx expo install react-native-reanimated
Basics
import { Button, View } from 'react-native';
import Animated, { useSharedValue, withSpring } from 'react-native-reanimated';
export default function App() {
const width = useSharedValue(100);
const handlePress = () => {
width.value = withSpring(width.value + 50);
};
return (
<View style={{ flex: 1, alignItems: 'center' }}>
<Animated.View
style={{
width,
height: 100,
backgroundColor: 'violet',
}}
/>
<Button onPress={handlePress} title="Click me" />
</View>
);
}
Sequence
import Animated, {
useSharedValue,
withTiming,
Easing,
useAnimatedStyle,
withRepeat,
withSequence,
withDelay,
} from 'react-native-reanimated';
import { View, Button, StyleSheet } from 'react-native';
import React from 'react';
export default function App() {
const offset = useSharedValue(0);
const style = useAnimatedStyle(() => ({
transform: [{ translateX: offset.value }],
}));
const OFFSET = 40;
const TIME = 250;
const DELAY = 400;
const handlePress = () => {
offset.value = withDelay(
DELAY,
withSequence(
// start from -OFFSET
withTiming(-OFFSET, { duration: TIME / 2 }),
// shake between -OFFSET and OFFSET 5 times
withRepeat(withTiming(OFFSET, { duration: TIME }), 5, true),
// go back to 0 at the end
withTiming(0, { duration: TIME / 2 })
)
);
};
Last updated