@umituz/react-native-mascot 1.3.6 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-mascot",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "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,8 +52,8 @@
     "lottie-react-native": "^7.3.4"
   },
   "peerDependencies": {
-    "@umituz/react-native-animation": "^1.3.17",
-    "@umituz/react-native-design-system": "*",
+    "@umituz/react-native-animation": "^1.4.3",
+    "@umituz/react-native-design-system": "4.29.3",
     "expo": ">=54.0.0",
     "react": ">=19.0.0",
     "react-native": "*",

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);
     }