87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import React, { useCallback, useEffect, useMemo } from 'react';
|
|
import { Animated, Easing, StyleSheet } from 'react-native';
|
|
|
|
interface AnimatedScreenProps {
|
|
children: React.ReactNode;
|
|
keyIndex: number;
|
|
}
|
|
|
|
const AnimatedScreen: React.FC<AnimatedScreenProps> = ({
|
|
children,
|
|
keyIndex,
|
|
}) => {
|
|
const opacityAnim = React.useRef(new Animated.Value(1)).current; // Start with opacity 1
|
|
const slideAnim = React.useRef(new Animated.Value(0)).current; // Start with no slide
|
|
|
|
const animationConfig = useMemo(
|
|
() => ({
|
|
duration: 150, // Further reduced
|
|
useNativeDriver: true,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const opacityAnimation = useMemo(
|
|
() =>
|
|
Animated.timing(opacityAnim, {
|
|
toValue: 1,
|
|
duration: 150, // Further reduced
|
|
easing: Easing.out(Easing.ease),
|
|
useNativeDriver: true,
|
|
}),
|
|
[opacityAnim],
|
|
);
|
|
|
|
const slideAnimation = useMemo(
|
|
() =>
|
|
Animated.timing(slideAnim, {
|
|
toValue: 0,
|
|
duration: 150, // Further reduced
|
|
easing: Easing.out(Easing.ease),
|
|
useNativeDriver: true,
|
|
}),
|
|
[slideAnim],
|
|
);
|
|
|
|
const resetAnimations = useCallback(() => {
|
|
opacityAnim.setValue(1); // Start with full opacity
|
|
slideAnim.setValue(0); // Start with no slide
|
|
}, [opacityAnim, slideAnim]);
|
|
|
|
const startAnimations = useCallback(() => {
|
|
// Skip animations for better performance
|
|
// Animated.parallel([opacityAnimation, slideAnimation]).start();
|
|
}, [opacityAnimation, slideAnimation]);
|
|
|
|
useEffect(() => {
|
|
resetAnimations();
|
|
startAnimations();
|
|
}, [keyIndex, resetAnimations, startAnimations]);
|
|
|
|
const animatedStyle = useMemo(
|
|
() => ({
|
|
opacity: 1, // Always full opacity
|
|
transform: [
|
|
{ translateX: 0 }, // No slide
|
|
],
|
|
}),
|
|
[],
|
|
);
|
|
|
|
return (
|
|
<Animated.View style={[styles.container, animatedStyle]}>
|
|
{children}
|
|
</Animated.View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
});
|
|
|
|
export default AnimatedScreen;
|