react native reanimated exmaple

1import Animated, {
2  useSharedValue,
3  withTiming,
4  useAnimatedStyle,
5  Easing,
6} from 'react-native-reanimated';
7import { View, Button } from 'react-native';
8import React from 'react';
9
10export default function AnimatedStyleUpdateExample(props) {
11  const randomWidth = useSharedValue(10);
12
13  const config = {
14    duration: 500,
15    easing: Easing.bezier(0.5, 0.01, 0, 1),
16  };
17
18  const style = useAnimatedStyle(() => {
19    return {
20      width: withTiming(randomWidth.value, config),
21    };
22  });
23
24  return (
25    <View
26      style={{
27        flex: 1,
28        alignItems: 'center',
29        justifyContent: 'center',
30        flexDirection: 'column',
31      }}>
32      <Animated.View
33        style={[{ width: 100, height: 80, backgroundColor: 'black', margin: 30 }, style]}
34      />
35      <Button
36        title="toggle"
37        onPress={() => {
38          randomWidth.value = Math.random() * 350;
39        }}
40      />
41    </View>
42  );
43}
44