Expo ReAnimated2 Basic animation using timing, spring etc

Reanimated2_basic_animation.js

import Animated, { useSharedValue, withTiming, withSpring, useAnimatedStyle, interpolate, Easing, Extrapolate } from "react-native-reanimated";
import { View, Button } from "react-native";
import React from "react";

export default function AnimatedStyleUpdateExample(props) {
  const randomWidth = useSharedValue(50);
  const randomHeight = useSharedValue(50);
  const randomColor = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, { duration: 500 }),
      height: withSpring(randomHeight.value, {
        damping: 50,   // default 10
        mass: 10,     // default 1
        stiffness: 300 // default 100
      }),
      borderRadius: withSpring(
        interpolate(randomColor.value, [0, 1], [0, 20], Extrapolate.CLAMP)
      ),
      transform: [{
        rotateZ: withSpring(randomHeight.value, {
          damping: 10,   // default 10
          mass: 0.7,     // default 1
          stiffness: 100 // default 100
        }),
      }]
    }
  })

  const getNewValues = () => {
    randomWidth.value = Math.random() * 300;
    randomHeight.value = Math.random() * 300;
    randomColor.value = Math.random();
  }

  console.log('rendering');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Animated.View style={[
        { height: 100, backgroundColor: 'black' },
        animatedStyle
      ]} />

      <Button
        title="Press Me"
        onPress={getNewValues}
      />

    </View>
  )
}