@shaykec/app-agent 1.0.8 → 1.0.10

package/templates/ios/TrackTemplate/TrackTemplate/Core/Animation/AnimatedTransitionsView.swift

@@ -57,6 +57,155 @@ struct BounceScaleModifier: ViewModifier {
     }
 }
 
+// MARK: - Scale on Press Modifier
+/// Applies scale-down + spring-back animation when pressed (like a button press).
+struct ScaleOnPressModifier: ViewModifier {
+    @State private var isPressed = false
+    
+    func body(content: Content) -> some View {
+        content
+            .scaleEffect(isPressed ? 0.95 : 1.0)
+            .animation(.spring(response: 0.3, dampingFraction: 0.7), value: isPressed)
+            .simultaneousGesture(
+                DragGesture(minimumDistance: 0)
+                    .onChanged { _ in isPressed = true }
+                    .onEnded { _ in isPressed = false }
+            )
+    }
+}
+
+// MARK: - Haptic Feedback Modifier
+/// Triggers haptic feedback on tap.
+struct HapticFeedbackModifier: ViewModifier {
+    let style: UIImpactFeedbackGenerator.FeedbackStyle
+    
+    func body(content: Content) -> some View {
+        content
+            .onTapGesture {
+                UIImpactFeedbackGenerator(style: style).impactOccurred()
+            }
+    }
+}
+
+// MARK: - Slide and Fade Modifier
+/// Applies a slide-from-side + fade-in animation on appear.
+struct SlideAndFadeModifier: ViewModifier {
+    let delay: Double
+    @State private var isVisible = false
+    
+    func body(content: Content) -> some View {
+        content
+            .opacity(isVisible ? 1 : 0)
+            .offset(x: isVisible ? 0 : 20)
+            .motionAware(animation: .spring(response: 0.5, dampingFraction: 0.8).delay(delay))
+            .onAppear {
+                isVisible = true
+            }
+    }
+}
+
+// MARK: - Card Shadow Modifier
+/// Applies a subtle colored shadow to cards and elevated surfaces.
+struct CardShadowModifier: ViewModifier {
+    let color: Color
+    let radius: CGFloat
+    let y: CGFloat
+    
+    func body(content: Content) -> some View {
+        content
+            .shadow(color: color.opacity(0.08), radius: radius, x: 0, y: y)
+            .shadow(color: Color.black.opacity(0.04), radius: radius / 2, x: 0, y: y / 2)
+    }
+}
+
+// MARK: - Elevated Shadow Modifier
+/// Applies a deeper shadow for FABs and floating elements.
+struct ElevatedShadowModifier: ViewModifier {
+    let color: Color
+    
+    func body(content: Content) -> some View {
+        content
+            .shadow(color: color.opacity(0.12), radius: 16, x: 0, y: 8)
+            .shadow(color: Color.black.opacity(0.06), radius: 8, x: 0, y: 4)
+    }
+}
+
+// MARK: - Shimmer Modifier
+/// Applies a shimmer/skeleton-loading gradient overlay for loading states.
+struct ShimmerModifier: ViewModifier {
+    @State private var isAnimating = false
+    
+    func body(content: Content) -> some View {
+        content
+            .overlay(
+                GeometryReader { geometry in
+                    if isAnimating {
+                        LinearGradient(
+                            colors: [
+                                Color.clear,
+                                Color.white.opacity(0.3),
+                                Color.clear
+                            ],
+                            startPoint: .leading,
+                            endPoint: .trailing
+                        )
+                        .offset(x: isAnimating ? geometry.size.width : -geometry.size.width)
+                        .animation(
+                            Animation.linear(duration: 1.5)
+                                .repeatForever(autoreverses: false),
+                            value: isAnimating
+                        )
+                    }
+                }
+            )
+            .clipped()
+            .onAppear {
+                isAnimating = true
+            }
+    }
+}
+
+// MARK: - Pulse Modifier
+/// Applies a repeating scale pulse effect (e.g., for notifications, active indicators).
+struct PulseModifier: ViewModifier {
+    let intensity: CGFloat
+    @State private var scale: CGFloat = 1.0
+    
+    func body(content: Content) -> some View {
+        content
+            .scaleEffect(scale)
+            .onAppear {
+                withAnimation(
+                    .easeInOut(duration: 1.0)
+                    .repeatForever(autoreverses: true)
+                ) {
+                    scale = 1.0 + intensity
+                }
+            }
+    }
+}
+
+// MARK: - Heart Bounce Modifier
+/// Applies a scale-up bounce then return when toggled (e.g., favorite/like buttons).
+struct HeartBounceModifier: ViewModifier {
+    let isActive: Bool
+    @State private var scale: CGFloat = 1.0
+    
+    func body(content: Content) -> some View {
+        content
+            .scaleEffect(scale)
+            .motionAware(animation: .spring(response: 0.3, dampingFraction: 0.5))
+            .onChange(of: isActive) { _, newValue in
+                if newValue {
+                    scale = 1.3
+                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+                        scale = 1.0
+                    }
+                }
+            }
+    }
+}
+
 // MARK: - View Extensions
 
 extension View {
@@ -79,4 +228,56 @@ extension View {
     func bounceOnChange(isActive: Bool) -> some View {
         modifier(BounceScaleModifier(isActive: isActive))
     }
+    
+    /// Applies scale-down press feedback to any tappable element.
+    /// Scales to 0.95 on press with spring return animation.
+    func scaleOnPress() -> some View {
+        modifier(ScaleOnPressModifier())
+    }
+    
+    /// Triggers haptic feedback on tap.
+    /// - Parameter style: Feedback intensity (.light, .medium, .heavy)
+    func hapticFeedback(_ style: UIImpactFeedbackGenerator.FeedbackStyle = .light) -> some View {
+        modifier(HapticFeedbackModifier(style: style))
+    }
+    
+    /// Applies a slide-from-side + fade-in animation on appear.
+    /// - Parameter delay: Delay before animation starts (default: 0)
+    func slideAndFade(delay: Double = 0) -> some View {
+        modifier(SlideAndFadeModifier(delay: delay))
+    }
+    
+    /// Applies subtle colored shadow to cards and elevated surfaces.
+    /// Uses dual-shadow technique: primary-tinted shadow + neutral shadow for depth.
+    /// - Parameters:
+    ///   - color: Shadow tint color (default: .primary)
+    ///   - radius: Shadow blur radius (default: 8)
+    ///   - y: Vertical offset (default: 4)
+    func cardShadow(color: Color = .primary, radius: CGFloat = 8, y: CGFloat = 4) -> some View {
+        modifier(CardShadowModifier(color: color, radius: radius, y: y))
+    }
+    
+    /// Applies deeper shadow for floating elements (FABs, modals).
+    /// - Parameter color: Shadow tint color (default: .primary)
+    func elevatedShadow(color: Color = .primary) -> some View {
+        modifier(ElevatedShadowModifier(color: color))
+    }
+    
+    /// Applies a shimmer loading overlay (e.g., for skeleton placeholder views).
+    func shimmer() -> some View {
+        modifier(ShimmerModifier())
+    }
+    
+    /// Applies a repeating pulse animation (e.g., for notifications, live indicators).
+    /// - Parameter intensity: Scale increase per pulse (default: 0.05 = 5% bigger)
+    func pulse(intensity: CGFloat = 0.05) -> some View {
+        modifier(PulseModifier(intensity: intensity))
+    }
+    
+    /// Applies a heart/like bounce effect when toggled active.
+    /// Scales up to 1.3x then springs back. Perfect for favorite buttons.
+    /// - Parameter isActive: Boolean that triggers the bounce when it becomes true
+    func heartBounce(isActive: Bool) -> some View {
+        modifier(HeartBounceModifier(isActive: isActive))
+    }
 }

package/templates/react-native/BookTemplate/src/animation/useAnimatedList.ts

@@ -1,5 +1,5 @@
-import { useRef, useEffect } from 'react';
-import { Animated } from 'react-native';
+import { useRef, useEffect, useCallback } from 'react';
+import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';
 import { useMotionPreferences } from './useMotionPreferences';
 
 /**
@@ -39,6 +39,7 @@ export function useStaggeredAppear(index: number) {
 
   return {
     opacity,
+    translateY,
     transform: [{ translateY }],
   };
 }
@@ -78,6 +79,7 @@ export function useSlideIn(delay: number = 0) {
 
   return {
     opacity,
+    translateY,
     transform: [{ translateY }],
   };
 }
@@ -118,3 +120,218 @@ export function useBounceScale(trigger: boolean) {
     transform: [{ scale }],
   };
 }
+
+/**
+ * Hook for scale-down press feedback on tappable elements.
+ * Returns animated style + press handlers to spread on Pressable.
+ */
+export function useScaleOnPress(scaleValue: number = 0.95) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const onPressIn = useCallback(() => {
+    if (shouldSkipAnimation) return;
+    Animated.spring(scale, {
+      toValue: scaleValue,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
+  }, [shouldSkipAnimation, scale, scaleValue]);
+
+  const onPressOut = useCallback(() => {
+    if (shouldSkipAnimation) return;
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
+  }, [shouldSkipAnimation, scale]);
+
+  return {
+    style: { transform: [{ scale }] },
+    onPressIn,
+    onPressOut,
+  };
+}
+
+/**
+ * Hook for slide-from-side + fade-in animation on appear.
+ */
+export function useSlideAndFade(delay: number = 0) {
+  const { shouldAnimate, shouldSkipAnimation } = useMotionPreferences();
+  const opacity = useRef(new Animated.Value(shouldSkipAnimation ? 1 : 0)).current;
+  const translateX = useRef(new Animated.Value(shouldSkipAnimation ? 0 : 20)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) {
+      opacity.setValue(1);
+      translateX.setValue(0);
+      return;
+    }
+
+    const duration = shouldAnimate ? 400 : 200;
+
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration,
+        delay,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateX, {
+        toValue: 0,
+        duration,
+        delay,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [delay, shouldAnimate, shouldSkipAnimation, opacity, translateX]);
+
+  return {
+    opacity,
+    transform: [{ translateX }],
+  };
+}
+
+/**
+ * Card shadow style for cards and elevated surfaces.
+ * Uses platform-specific shadow implementation.
+ */
+export function cardShadowStyle(color: string = '#000000'): ViewStyle {
+  return Platform.select({
+    ios: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+    },
+    android: {
+      elevation: 4,
+    },
+    default: {
+      elevation: 4,
+    },
+  }) as ViewStyle;
+}
+
+/**
+ * Elevated shadow style for FABs and floating elements.
+ */
+export function elevatedShadowStyle(color: string = '#000000'): ViewStyle {
+  return Platform.select({
+    ios: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.12,
+      shadowRadius: 16,
+    },
+    android: {
+      elevation: 8,
+    },
+    default: {
+      elevation: 8,
+    },
+  }) as ViewStyle;
+}
+
+/**
+ * Hook for shimmer/skeleton loading animation.
+ * Returns an animated opacity style that pulses for loading placeholders.
+ */
+export function useShimmer(durationMs: number = 1500) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const opacity = useRef(new Animated.Value(shouldSkipAnimation ? 1 : 0.3)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) {
+      opacity.setValue(1);
+      return;
+    }
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: durationMs / 2,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.3,
+          duration: durationMs / 2,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    animation.start();
+
+    return () => animation.stop();
+  }, [durationMs, shouldSkipAnimation, opacity]);
+
+  return { opacity };
+}
+
+/**
+ * Hook for repeating pulse scale animation (notifications, live indicators).
+ */
+export function usePulse(intensity: number = 0.05) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) return;
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(scale, {
+          toValue: 1 + intensity,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scale, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    animation.start();
+
+    return () => animation.stop();
+  }, [intensity, shouldSkipAnimation, scale]);
+
+  return { transform: [{ scale }] };
+}
+
+/**
+ * Hook for heart/like bounce effect when toggled active.
+ * Scales up to 1.3x then springs back.
+ */
+export function useHeartBounce(isActive: boolean) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+  const prevActive = useRef(isActive);
+
+  useEffect(() => {
+    if (isActive && !prevActive.current && !shouldSkipAnimation) {
+      Animated.sequence([
+        Animated.spring(scale, {
+          toValue: 1.3,
+          useNativeDriver: true,
+          speed: 50,
+          bounciness: 12,
+        }),
+        Animated.spring(scale, {
+          toValue: 1,
+          useNativeDriver: true,
+          speed: 50,
+          bounciness: 12,
+        }),
+      ]).start();
+    }
+    prevActive.current = isActive;
+  }, [isActive, shouldSkipAnimation, scale]);
+
+  return { transform: [{ scale }] };
+}

package/templates/react-native/BookTemplate/src/animation/useMotionPreferences.ts

@@ -1,9 +1,17 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { AccessibilityInfo } from 'react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const INTENSITY_STORAGE_KEY = '@motion_preferences_intensity';
 
+// Safely load AsyncStorage — the native module may not be available on all
+// simulator runtimes (e.g. iOS 26 beta). Fall back to in-memory storage.
+let _asyncStorage: any = null;
+try {
+  _asyncStorage = require('@react-native-async-storage/async-storage').default;
+} catch (_) {
+  // Native module unavailable — preferences won't persist across restarts.
+}
+
 export type AnimationIntensity = 'full' | 'reduced' | 'off';
 
 export interface UseMotionPreferencesReturn {
@@ -25,12 +33,14 @@ export function useMotionPreferences(): UseMotionPreferencesReturn {
   const [animationIntensity, setIntensityState] = useState<AnimationIntensity>('full');
 
   useEffect(() => {
-    // Load persisted preference
-    AsyncStorage.getItem(INTENSITY_STORAGE_KEY).then((stored: string | null) => {
-      if (stored === 'full' || stored === 'reduced' || stored === 'off') {
-        setIntensityState(stored);
-      }
-    }).catch(() => {});
+    // Load persisted preference (skip if AsyncStorage unavailable)
+    if (_asyncStorage) {
+      _asyncStorage.getItem(INTENSITY_STORAGE_KEY).then((stored: string | null) => {
+        if (stored === 'full' || stored === 'reduced' || stored === 'off') {
+          setIntensityState(stored);
+        }
+      }).catch(() => {});
+    }
 
     // Check system Reduce Motion
     AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
@@ -51,10 +61,14 @@ export function useMotionPreferences(): UseMotionPreferencesReturn {
 
   const setAnimationIntensity = useCallback(async (intensity: AnimationIntensity) => {
     try {
-      await AsyncStorage.setItem(INTENSITY_STORAGE_KEY, intensity);
+      if (_asyncStorage) {
+        await _asyncStorage.setItem(INTENSITY_STORAGE_KEY, intensity);
+      }
       setIntensityState(intensity);
     } catch (error) {
-      console.error('Failed to save motion preference:', error);
+      // Still update in-memory state even if persistence fails
+      setIntensityState(intensity);
+      console.warn('Failed to save motion preference:', error);
     }
   }, []);
 

package/templates/react-native/BookTemplate/src/screens/Profile/ProfileScreen.tsx

@@ -61,7 +61,7 @@ const ProfileScreen: React.FC = () => {
               accessibilityRole="button"
               accessibilityLabel="Animations settings"
               style={styles.row}
-              onPress={() => navigation.navigate('MotionPreferences' as any)}>
+              onPress={() => (navigation as any).navigate('MotionPreferences')}>
               <Text style={[styles.rowLabel, {color: colors.primaryText, fontSize: typography.body}]}>
                 Animations
               </Text>