Initial commit

src/components/AnimatedScreen.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import React, { useEffect, useRef, useMemo, useCallback } 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;