@umituz/react-native-mascot 1.3.6 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-mascot",
-  "version": "1.3.6",
+  "version": "1.4.0",
   "description": "Interactive mascot system for React Native apps - Customizable animated characters with Lottie and SVG support, mood system, and easy integration",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -52,11 +52,11 @@
     "lottie-react-native": "^7.3.4"
   },
   "peerDependencies": {
-    "@umituz/react-native-animation": "^1.3.17",
+    "@umituz/react-native-animation": "*",
     "@umituz/react-native-design-system": "*",
     "expo": ">=54.0.0",
     "react": ">=19.0.0",
-    "react-native": "*",
+    "react-native": ">=0.74.0",
     "react-native-reanimated": ">=3.0.0",
     "react-native-svg": ">=15.0.0"
   },

package/src/presentation/components/Mascot.tsx

@@ -1,5 +1,5 @@
 /**
- * Mascot Component
+ * Mascot Component - Performance Optimized
  *
  * A simplified, configurable mascot component that works across different apps.
  * Uses Reanimated animations and accepts dynamic theme colors and image sources.
@@ -20,7 +20,7 @@
  * ```
  */
 
-import React, { useEffect, memo } from 'react';
+import React, { useEffect, memo, useRef, useCallback } from 'react';
 import { View, Image, StyleSheet, ViewStyle, ImageSourcePropType, TextStyle } from 'react-native';
 import Animated, {
   useSharedValue,
@@ -29,6 +29,7 @@ import Animated, {
   withRepeat,
   withSequence,
   Easing,
+  cancelAnimation,
 } from '@umituz/react-native-animation';
 
 import type { MascotState } from './types';
@@ -77,6 +78,112 @@ const SIZE_PRESETS: Record<string, number> = {
   large: 140,
 };
 
+// Worklet: Idle animation
+const animateIdle = (
+  translateY: Animated.SharedValue<number>,
+  scale: Animated.SharedValue<number>
+) => {
+  'worklet';
+  translateY.value = withRepeat(
+    withSequence(
+      withTiming(-6, { duration: 1500, easing: Easing.inOut(Easing.ease) }),
+      withTiming(0, { duration: 1500, easing: Easing.inOut(Easing.ease) }),
+    ),
+    -1,
+    true,
+  );
+  scale.value = withRepeat(
+    withSequence(
+      withTiming(1.03, { duration: 2000, easing: Easing.inOut(Easing.ease) }),
+      withTiming(1, { duration: 2000, easing: Easing.inOut(Easing.ease) }),
+    ),
+    -1,
+    true,
+  );
+};
+
+// Worklet: Thinking animation
+const animateThinking = (rotate: Animated.SharedValue<number>) => {
+  'worklet';
+  rotate.value = withRepeat(
+    withSequence(
+      withTiming(-5, { duration: 200, easing: Easing.inOut(Easing.ease) }),
+      withTiming(5, { duration: 200, easing: Easing.inOut(Easing.ease) }),
+      withTiming(-5, { duration: 200, easing: Easing.inOut(Easing.ease) }),
+      withTiming(0, { duration: 200, easing: Easing.inOut(Easing.ease) }),
+    ),
+    -1,
+    false,
+  );
+};
+
+// Worklet: Reacting animation
+const animateReacting = (
+  scale: Animated.SharedValue<number>,
+  rotate: Animated.SharedValue<number>
+) => {
+  'worklet';
+  scale.value = withSequence(
+    withTiming(1.15, { duration: 150, easing: Easing.out(Easing.ease) }),
+    withTiming(1, { duration: 150, easing: Easing.inOut(Easing.ease) }),
+  );
+  rotate.value = withSequence(
+    withTiming(-10, { duration: 100, easing: Easing.out(Easing.ease) }),
+    withTiming(10, { duration: 100, easing: Easing.out(Easing.ease) }),
+    withTiming(0, { duration: 100, easing: Easing.inOut(Easing.ease) }),
+  );
+};
+
+// Worklet: Excited animation
+const animateExcited = (
+  translateY: Animated.SharedValue<number>,
+  scale: Animated.SharedValue<number>
+) => {
+  'worklet';
+  translateY.value = withRepeat(
+    withSequence(
+      withTiming(-15, { duration: 400, easing: Easing.out(Easing.ease) }),
+      withTiming(0, { duration: 300, easing: Easing.in(Easing.ease) }),
+      withTiming(-10, { duration: 300, easing: Easing.out(Easing.ease) }),
+      withTiming(0, { duration: 200, easing: Easing.ease }),
+    ),
+    -1,
+    false,
+  );
+  scale.value = withRepeat(
+    withSequence(
+      withTiming(1.08, { duration: 400, easing: Easing.out(Easing.ease) }),
+      withTiming(1, { duration: 300, easing: Easing.ease }),
+    ),
+    -1,
+    false,
+  );
+};
+
+// Worklet: Speaking animation
+const animateSpeaking = (
+  scale: Animated.SharedValue<number>,
+  translateY: Animated.SharedValue<number>
+) => {
+  'worklet';
+  scale.value = withRepeat(
+    withSequence(
+      withTiming(1.04, { duration: 800, easing: Easing.inOut(Easing.ease) }),
+      withTiming(1, { duration: 800, easing: Easing.inOut(Easing.ease) }),
+    ),
+    -1,
+    true,
+  );
+  translateY.value = withRepeat(
+    withSequence(
+      withTiming(-3, { duration: 1000, easing: Easing.inOut(Easing.ease) }),
+      withTiming(0, { duration: 1000, easing: Easing.inOut(Easing.ease) }),
+    ),
+    -1,
+    true,
+  );
+};
+
 function MascotComponent({
   source,
   state = 'idle',
@@ -90,6 +197,7 @@ function MascotComponent({
   const translateY = useSharedValue(0);
   const scale = useSharedValue(1);
   const rotate = useSharedValue(0);
+  const isMountedRef = useRef(true);
 
   // Resolve size
   const imageSize = typeof size === 'number' ? size : SIZE_PRESETS[size] || SIZE_PRESETS.medium;
@@ -100,111 +208,59 @@ function MascotComponent({
   const backgroundColor = theme.background || 'rgba(30, 30, 30, 0.9)';
   const textColor = theme.text || '#FFFFFF';
 
+  // Cleanup function
+  const cleanupAnimations = useCallback(() => {
+    if (!isMountedRef.current) return;
+    cancelAnimation(translateY);
+    cancelAnimation(scale);
+    cancelAnimation(rotate);
+  }, []);
+
+  // Trigger animations based on state
   useEffect(() => {
-    // Reset animations
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- Reanimated shared values are designed to be mutable
-    translateY.value = 0;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    scale.value = 1;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    rotate.value = 0;
+    if (!isMountedRef.current || !animate) return;
 
-    if (!animate) return;
+    // Cleanup previous animations first
+    cleanupAnimations();
 
     switch (state) {
       case 'idle':
-        // Gentle floating animation
-        translateY.value = withRepeat(
-          withSequence(
-            withTiming(-6, { duration: 1500, easing: Easing.inOut(Easing.ease) }),
-            withTiming(0, { duration: 1500, easing: Easing.inOut(Easing.ease) }),
-          ),
-          -1,
-          true,
-        );
-        scale.value = withRepeat(
-          withSequence(
-            withTiming(1.03, { duration: 2000, easing: Easing.inOut(Easing.ease) }),
-            withTiming(1, { duration: 2000, easing: Easing.inOut(Easing.ease) }),
-          ),
-          -1,
-          true,
-        );
+        animateIdle(translateY, scale);
         break;
 
       case 'thinking':
-        // Wiggle/twitch animation
-        rotate.value = withRepeat(
-          withSequence(
-            withTiming(-5, { duration: 200, easing: Easing.inOut(Easing.ease) }),
-            withTiming(5, { duration: 200, easing: Easing.inOut(Easing.ease) }),
-            withTiming(-5, { duration: 200, easing: Easing.inOut(Easing.ease) }),
-            withTiming(0, { duration: 200, easing: Easing.inOut(Easing.ease) }),
-          ),
-          -1,
-          false,
-        );
+        animateThinking(rotate);
         break;
 
       case 'reacting':
-        // Quick pulse + rotation
-        scale.value = withSequence(
-          withTiming(1.15, { duration: 150, easing: Easing.out(Easing.ease) }),
-          withTiming(1, { duration: 150, easing: Easing.inOut(Easing.ease) }),
-        );
-        rotate.value = withSequence(
-          withTiming(-10, { duration: 100, easing: Easing.out(Easing.ease) }),
-          withTiming(10, { duration: 100, easing: Easing.out(Easing.ease) }),
-          withTiming(0, { duration: 100, easing: Easing.inOut(Easing.ease) }),
-        );
+        animateReacting(scale, rotate);
         break;
 
       case 'excited':
-        // Bouncy jump animation
-        translateY.value = withRepeat(
-          withSequence(
-            withTiming(-15, { duration: 400, easing: Easing.out(Easing.ease) }),
-            withTiming(0, { duration: 300, easing: Easing.in(Easing.ease) }),
-            withTiming(-10, { duration: 300, easing: Easing.out(Easing.ease) }),
-            withTiming(0, { duration: 200, easing: Easing.in(Easing.ease) }),
-          ),
-          -1,
-          false,
-        );
-        scale.value = withRepeat(
-          withSequence(
-            withTiming(1.08, { duration: 400, easing: Easing.out(Easing.ease) }),
-            withTiming(1, { duration: 300, easing: Easing.in(Easing.ease) }),
-          ),
-          -1,
-          false,
-        );
+        animateExcited(translateY, scale);
         break;
 
       case 'speaking':
-        // Subtle breathing animation
-        scale.value = withRepeat(
-          withSequence(
-            withTiming(1.04, { duration: 800, easing: Easing.inOut(Easing.ease) }),
-            withTiming(1, { duration: 800, easing: Easing.inOut(Easing.ease) }),
-          ),
-          -1,
-          true,
-        );
-        translateY.value = withRepeat(
-          withSequence(
-            withTiming(-3, { duration: 1000, easing: Easing.inOut(Easing.ease) }),
-            withTiming(0, { duration: 1000, easing: Easing.inOut(Easing.ease) }),
-          ),
-          -1,
-          true,
-        );
+        animateSpeaking(scale, translateY);
         break;
 
       default:
         break;
     }
-  }, [animate, state, translateY, scale, rotate]);
+
+    return () => {
+      cleanupAnimations();
+    };
+  }, [animate, state, translateY, scale, rotate, cleanupAnimations]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      cleanupAnimations();
+    };
+  }, [cleanupAnimations]);
 
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [

package/src/presentation/components/SVGMascot.tsx

@@ -25,7 +25,7 @@ const SVGMascotComponent = memo<SVGMascotProps>(({ mascot, size }) => {
       <circle cx="35" cy="40" r="5" fill="#000" />
       <circle cx="65" cy="40" r="5" fill="#000" />
       {/* Mouth based on mood */}
-      <MoodMood mood={mascot.personality.mood} />
+      <MoodExpression mood={mascot.personality.mood} />
     </Svg>
   );
 });
@@ -35,11 +35,11 @@ SVGMascotComponent.displayName = 'SVGMascot';
 export const SVGMascot = SVGMascotComponent;
 
 // Mood-based mouth component
-interface MoodMoodProps {
+interface MoodExpressionProps {
   mood: string;
 }
 
-const MoodMoodComponent = memo<MoodMoodProps>(({ mood }) => {
+const MoodExpressionComponent = memo<MoodExpressionProps>(({ mood }) => {
   switch (mood) {
     case 'happy':
     case 'excited':
@@ -56,6 +56,6 @@ const MoodMoodComponent = memo<MoodMoodProps>(({ mood }) => {
   }
 });
 
-MoodMoodComponent.displayName = 'MoodMood';
+MoodExpressionComponent.displayName = 'MoodExpression';
 
-const MoodMood = memo(MoodMoodComponent);
+const MoodExpression = memo(MoodExpressionComponent);

package/src/presentation/contexts/MascotContext.tsx

@@ -3,7 +3,7 @@
  * Thin wrapper that provides MascotService to components
  */
 
-import React, { createContext, useContext, ReactNode } from 'react';
+import React, { createContext, useContext, ReactNode, useEffect } from 'react';
 import type { Mascot } from '../../domain/entities/Mascot';
 import type { MascotConfig } from '../../domain/types/MascotTypes';
 import type { MascotService, MascotTemplate } from '../../application/services/MascotService';
@@ -33,11 +33,13 @@ export const MascotProvider: React.FC<MascotProviderProps> = ({
   const service = container.getMascotService();
 
   // Auto-initialize if config or template provided
-  if (initialConfig) {
-    service.initialize(initialConfig);
-  } else if (template) {
-    service.fromTemplate(template);
-  }
+  useEffect(() => {
+    if (initialConfig) {
+      service.initialize(initialConfig);
+    } else if (template) {
+      service.fromTemplate(template);
+    }
+  }, [initialConfig, template, service]);
 
   const value: MascotContextValue = {
     mascot: service.mascot,

package/src/presentation/hooks/useMascotState.ts

@@ -137,7 +137,7 @@ export function useMascotState(options: UseMascotStateOptions = {}): UseMascotSt
     try {
       manager.transitionTo(newState);
     } catch (error) {
-      console.warn('Invalid state transition:', error);
+      // Invalid state transition - allow the transition anyway for flexibility
       setState(newState);
       onStateChangeRef.current?.(state, newState);
     }