App.js

//HW5 by Mark Nanarello
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Animated, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

export default function App() {
  const [animation] = useState(new Animated.Value(0));

  useEffect(() => {
    const animate = () => {
      Animated.loop(
        Animated.sequence([
          Animated.timing(animation, {
            toValue: 1,
            duration: 4000,
            useNativeDriver: true,
          }),
          Animated.timing(animation, {
            toValue: 0,
            duration: 4000,
            useNativeDriver: true,
          }),
        ])
      ).start();
    };

    animate();
  }, [animation]);

  const ballSize = animation.interpolate({
    inputRange: [0, 1],
    outputRange: [50, Math.max(width, height) * 2],
  });

  const ballStyle = {
    width: ballSize,
    height: ballSize,
    borderRadius: 1000,
    backgroundColor: 'pink',
  };

  return (
    <View style={styles.container}>
      <Animated.View style={ballStyle}>
        <View style={styles.textContainer}>
          <Text style={styles.maintext}>MLN20003</Text>
        </View>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  maintext: {
    fontSize: 18,
    fontWeight: 'bold',
    color: 'green',
  },
});