Animaciones 60fps — NutriTrack App

// components/FadeInCard.tsx — NutriTrack
import Animated, {
  useSharedValue, useAnimatedStyle,
  withTiming, withSpring,
} from 'react-native-reanimated';
import { useEffect } from 'react';

export function FadeInCard({ children }) {
  // Valores viven en el UI thread
  const opacity = useSharedValue(0);
  const translateY = useSharedValue(20);

  useEffect(() => {
    // Timing para fade preciso (600ms)
    opacity.value = withTiming(1, { duration: 600 });
    // Spring para slide natural (sin rebote exagerado)
    translateY.value = withSpring(0, {
      damping: 15, stiffness: 120,
    });
  }, []);

  // Worklet — se ejecuta en UI thread
  const style = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [{ translateY: translateY.value }],
  }));

  return (
    <Animated.View style={style}
      className="bg-green-600 rounded-xl p-4">
      {children}
    </Animated.View>
  );
}

// components/SwipeToLogMeal.tsx
import {
  useSharedValue, useAnimatedStyle,
  withSpring, runOnJS,
} from 'react-native-reanimated';
import {
  Gesture, GestureDetector,
} from 'react-native-gesture-handler';

const THRESHOLD = -120; // 60% del ancho de acción

export function SwipeToLogMeal({ onLog, children }) {
  const translateX = useSharedValue(0);

  const pan = Gesture.Pan()
    .onUpdate((e) => {
      // Solo izquierda (negativo)
      translateX.value = Math.min(0, e.translationX);
    })
    .onEnd((e) => {
      if (e.translationX < THRESHOLD) {
        // Registrar — vuelve a JS thread con runOnJS
        translateX.value = withSpring(-400);
        runOnJS(onLog)();
      } else {
        // Snap-back con spring natural
        translateX.value = withSpring(0, {
          damping: 18, stiffness: 150,
        });
      }
    });

  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={style}>
        {children}
      </Animated.View>
    </GestureDetector>
  );
}

// components/ParallaxHeaderNutri.tsx
import Animated, {
  useAnimatedScrollHandler,
  useSharedValue, useAnimatedStyle,
  interpolate,
} from 'react-native-reanimated';

export function ParallaxHeaderNutri() {
  const scrollY = useSharedValue(0);

  // Worklet — corre en UI thread en cada frame
  const onScroll = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  // Header: 300 → 80px, opacidad 1 → 0.2
  const headerStyle = useAnimatedStyle(() => ({
    height: interpolate(
      scrollY.value,
      [0, 160], [300, 80]
    ),
    opacity: interpolate(
      scrollY.value,
      [0, 160], [1, 0.15]
    ),
    transform: [{
      translateY: interpolate(
        scrollY.value,
        [0, 160], [0, -60]
      ),
    }],
  }));

  return (
    <>
      <Animated.View
        style={headerStyle}
        className="bg-green-800">
        <NutriHeaderContent />
      </Animated.View>
      <Animated.ScrollView
        onScroll={onScroll}
        scrollEventThrottle={16}>
        <MealLog />
      </Animated.ScrollView>
    </>
  );
}