@umituz/react-native-mascot 1.3.5 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-mascot",
-  "version": "1.3.5",
+  "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": "*",
-    "@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/assets/index.ts

@@ -6,13 +6,13 @@
 import type { MascotConfig, MascotAnimationType } from '../domain/types/MascotTypes';
 import type { MascotAnimation } from '../domain/types/MascotTypes';
 
-// Import JSON animations
-import idleAnim from './lottie/idle.json';
-import waveAnim from './lottie/wave.json';
-import jumpAnim from './lottie/jump.json';
-import successAnim from './lottie/success.json';
-import errorAnim from './lottie/error.json';
-import danceAnim from './lottie/dance.json';
+// Import JSON animations from infrastructure/assets
+import idleAnim from '../infrastructure/assets/lottie/idle.json';
+import waveAnim from '../infrastructure/assets/lottie/wave.json';
+import jumpAnim from '../infrastructure/assets/lottie/jump.json';
+import successAnim from '../infrastructure/assets/lottie/success.json';
+import errorAnim from '../infrastructure/assets/lottie/error.json';
+import danceAnim from '../infrastructure/assets/lottie/dance.json';
 
 export const BUILT_IN_MASCOTS: Record<string, MascotConfig> = {
   'happy-robot': {

package/src/presentation/components/Mascot.tsx

@@ -21,7 +21,7 @@
  */
 
 import React, { useEffect, memo } from 'react';
-import { View, Image, StyleSheet, ViewStyle, ImageSourcePropType } from 'react-native';
+import { View, Image, StyleSheet, ViewStyle, ImageSourcePropType, TextStyle } from 'react-native';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -33,6 +33,9 @@ import Animated, {
 
 import type { MascotState } from './types';
 
+// Constants
+const CIRCULAR_RADIUS = 9999;
+
 export interface MascotProps {
   /** Image source for the mascot (require() or URI) */
   source: ImageSourcePropType;
@@ -247,7 +250,12 @@ function MascotComponent({
 
 MascotComponent.displayName = 'Mascot';
 
-const MascotText = memo(({ style, children }: { style: any; children: React.ReactNode }) => (
+interface MascotTextProps {
+  style: TextStyle;
+  children: React.ReactNode;
+}
+
+const MascotTextComponent = ({ style, children }: MascotTextProps) => (
   <View>
     {typeof children === 'string' ? (
       <Animated.Text style={style}>{children}</Animated.Text>
@@ -255,7 +263,11 @@ const MascotText = memo(({ style, children }: { style: any; children: React.Reac
       children
     )}
   </View>
-));
+);
+
+MascotTextComponent.displayName = 'MascotText';
+
+const MascotText = memo(MascotTextComponent);
 
 export const Mascot = memo(MascotComponent);
 
@@ -264,7 +276,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   glow: {
-    borderRadius: 9999, // Circular
+    borderRadius: CIRCULAR_RADIUS,
     position: 'absolute',
   },
   glowContainer: {
@@ -273,7 +285,7 @@ const styles = StyleSheet.create({
     position: 'relative',
   },
   mascotImage: {
-    borderRadius: 9999, // Circular
+    borderRadius: CIRCULAR_RADIUS,
   },
   messageContainer: {
     borderRadius: 12,

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/useMascotAnimation.ts

@@ -14,14 +14,11 @@ export interface UseMascotAnimationOptions {
 export interface UseMascotAnimationReturn {
   isPlaying: boolean;
   currentAnimation: string | null;
-  progress: number;
   queue: string[];
   play: (animationId: string, options?: AnimationOptions) => Promise<void>;
   pause: () => void;
   resume: () => void;
   stop: () => void;
-  setSpeed: (speed: number) => void;
-  setProgress: (progress: number) => void;
   queueAnimation: (animationId: string) => void;
   clearQueue: () => void;
   playSequence: (animationIds: string[]) => Promise<void>;
@@ -69,15 +66,6 @@ export function useMascotAnimation(
     service.stopAnimation();
   }, [service]);
 
-  const setSpeed = useCallback((_speed: number) => {
-    // Speed is handled via options in play() - this method is kept for API compatibility
-    // but does nothing as speed should be passed to play() directly
-  }, []);
-
-  const setProgress = useCallback((_progress: number) => {
-    // Progress tracking not yet implemented - would need AnimationController reference
-  }, []);
-
   const queueAnimation = useCallback((animationId: string) => {
     setQueue((prev: string[]) => [...prev, animationId]);
   }, []);
@@ -106,14 +94,11 @@ export function useMascotAnimation(
   return {
     isPlaying: service.isPlaying,
     currentAnimation: service.currentAnimation,
-    progress: 0, // Would need AnimationController reference
     queue,
     play,
     pause,
     resume,
     stop,
-    setSpeed,
-    setProgress,
     queueAnimation,
     clearQueue,
     playSequence,

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