ReactNativeScaleAnimation.js

// Import necessary modules
import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useRef } from 'react';
import { StyleSheet, Animated, View } from 'react-native';

export default function App() {
  // Define the values to be animated
  const scaleValue = useRef(new Animated.Value(1)).current;

  // Function to animate the content
  const animateContent = (direction = 1) => {
    // Use Animated.spring to create a spring animation
    Animated.spring(
      scaleValue, 
      { 
        // Scale the content in the specified direction
        toValue: direction, 
        // Use the native driver for better performance
        useNativeDriver: true,
      }
    ).start(() => { 
      // When the animation finishes, start it again in the opposite direction
      animateContent(direction === 1 ? 0.5 : 1);
    });
  }

  // Start the animation when the component mounts
  useEffect(() => {
    animateContent() 
  }, []);

  return (
    // Animate the scale of the View
    <Animated.View style={[{ transform: [{ scale: scaleValue }] }, styles.container]}>
      {/* Render a blue circle */}
      <View style={styles.circle} />
      <StatusBar style="auto" />
    </Animated.View>
  );
}

// Define the styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  circle: {
    width: 80,
    height: 80,
    backgroundColor: 'blue',
    borderRadius: 40,
  },
});