update

src/components/AnimatedScreen.tsx

@@ -1,71 +1,86 @@
-"use client"
+'use client';
 
-import React, { useEffect, useRef, useMemo, useCallback } from 'react'
-import { Animated, Easing, StyleSheet } from 'react-native'
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { Animated, Easing, StyleSheet } from 'react-native';
 
 interface AnimatedScreenProps {
-    children: React.ReactNode
-    keyIndex: number
+  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 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(() => ({
+  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 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 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 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]);
 
-    const startAnimations = useCallback(() => {
-        // Skip animations for better performance
-        // Animated.parallel([opacityAnimation, slideAnimation]).start();
-    }, [opacityAnimation, slideAnimation]);
+  useEffect(() => {
+    resetAnimations();
+    startAnimations();
+  }, [keyIndex, resetAnimations, startAnimations]);
 
-    useEffect(() => {
-        resetAnimations();
-        startAnimations();
-    }, [keyIndex, resetAnimations, startAnimations]);
+  const animatedStyle = useMemo(
+    () => ({
+      opacity: 1, // Always full opacity
+      transform: [
+        { translateX: 0 }, // No slide
+      ],
+    }),
+    [],
+  );
 
-    const animatedStyle = useMemo(() => ({
-        opacity: 1, // Always full opacity
-        transform: [
-            { translateX: 0 }, // No slide
-        ],
-    }), []);
-
-    return (
-        <Animated.View style={[styles.container, animatedStyle]}>
-            {children}
-        </Animated.View>
-    )
-}
+  return (
+    <Animated.View style={[styles.container, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
+};
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-})
+  container: {
+    flex: 1,
+  },
+});
 
 export default AnimatedScreen;