import MaskedView from '@react-native-community/masked-view';
import React, { useRef, useState } from 'react';
import { View, Animated, Button, Image, Text } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';

const App = () => {
  // Define animated values for flex and borderRadius
  const flexValue = useRef(new Animated.Value(0.8)).current;
  const borderRadiusValue = useRef(new Animated.Value(100)).current;
  const marginTopValue = useRef(new Animated.Value(50)).current;
  const marginHorzValue = useRef(new Animated.Value(20)).current;

  // State to track the current state of animation
  const [isAnimating, setIsAnimating] = useState(false);

  // Function to toggle the animation
  const toggleAnimation = () => {
    // If animation is already running, stop it
    if (isAnimating) {
      // Start the animation for flex
      Animated.timing(flexValue, {
        toValue: 0.8, // target value for flex
        duration: 1000,
        useNativeDriver: false,
      }).start();

      // Start the animation for borderRadius
      Animated.timing(borderRadiusValue, {
        toValue: 100, // target value for borderRadius
        duration: 1000,
        useNativeDriver: false,
      }).start();

      Animated.timing(marginTopValue, {
        toValue: 50, // target value for flex
        duration: 1000,
        useNativeDriver: false,
      }).start();

      // Start the animation for borderRadius
      Animated.timing(marginHorzValue, {
        toValue: 20, // target value for borderRadius
        duration: 1000,
        useNativeDriver: false,
      }).start();
    } else {
      // Start the animation for flex
      Animated.timing(flexValue, {
        toValue: 1, // target value for flex
        duration: 1000,
        useNativeDriver: false,
      }).start();

      // Start the animation for borderRadius
      Animated.timing(borderRadiusValue, {
        toValue: 0, // target value for borderRadius
        duration: 1000,
        useNativeDriver: false,
      }).start();

      Animated.timing(marginTopValue, {
        toValue: 0, // target value for flex
        duration: 1000,
        useNativeDriver: false,
      }).start();

      // Start the animation for borderRadius
      Animated.timing(marginHorzValue, {
        toValue: 0, // target value for borderRadius
        duration: 1000,
        useNativeDriver: false,
      }).start();
    }

    // Toggle the animation state
    setIsAnimating(!isAnimating);
  };

  return (
    <View style={{flex: 1}}>
      <ScrollView contentContainerStyle={{flexGrow: 1}}>
        <View
          style={{
            flex: 0.8,
            backgroundColor: '#2E6D3E', // "Edge" background
            maxHeight: '100%',
          }}>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
          <Text>"Some Text111"</Text>
        </View>
        {/* Button to toggle animation */}
        <View
          style={{
            alignItems: 'center',
            flex: 0.2,
            // bottom: 20,
            // left: 120,
            // position: 'absolute',
          }}>
          <Button
            title={isAnimating ? 'Stop Animation' : 'Start Animation'}
            onPress={toggleAnimation}
          />
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
          <Text>"Some Text"</Text>
        </View>
      </ScrollView>
    </View>
  );
};

export default App;

Why is the above ScrollView not scrolling even though content height is extending beyond screen size?

Expo link: https://snack.expo.dev/@mmt10470/react-native-mask