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