Animated.js

import React, { useState } from 'react';
import {
  View, Text, Animated, StyleSheet, TouchableWithoutFeedback, Easing,
} from 'react-native';
import PropTypes from 'prop-types';

export default function Home() {
  const [animated, setAnimated] = useState(new Animated.Value(150));

  const animatedSpring = {
    width: animated,
    height: animated,
  };

  const handleOnPress = () => {
    //  animated.addListener(({ values }) => {
    //    console.log(values);
    //  });
    Animated.spring(animated, {
      toValue: 300,
      friction: 2,
      tension: 160,
    }).start(() => {
      Animated.timing(animated, {
        toValue: 150,
        duration: 100,
      }).start();
    });
  };

  return (
    <View style={styles.container}>
      <Text>Home</Text>
      <TouchableWithoutFeedback
        onPress={handleOnPress}
      >
        <Animated.View
          style={[styles.box, animatedSpring]}
        />
      </TouchableWithoutFeedback>
    </View>
  );
}

Home.propTypes = {
   navigation: PropTypes.object , // eslint-disable-line
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'blue',
  },
});