ripple fix

metro.config.js

@@ -25,7 +25,7 @@ config.transformer = {
 // Optimize resolver for better tree shaking and SVG support
 config.resolver = {
   ...config.resolver,
-  assetExts: [...config.resolver.assetExts.filter((ext) => ext !== 'svg'), 'lottie'],
+  assetExts: [...config.resolver.assetExts.filter((ext) => ext !== 'svg'), 'zip'],
   sourceExts: [...config.resolver.sourceExts, 'svg'],
   resolverMainFields: ['react-native', 'browser', 'main'],
 };

src/components/common/DogLoadingSpinner.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import { View, Text, StyleSheet, Dimensions } from 'react-native';
+import { View, Text, StyleSheet, Dimensions, Platform } from 'react-native';
 import LottieView from 'lottie-react-native';
 import { useTheme } from '../../contexts/ThemeContext';
 
@@ -19,16 +19,34 @@ const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
   offsetY = 0,
 }) => {
   const { currentTheme } = useTheme();
+
+  // Android-specific Lottie configuration
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      // Enable merge paths for Android KitKat and above
+      try {
+        const Lottie = require('lottie-react-native');
+        if (Lottie.enableMergePathsForKitKatAndAbove) {
+          Lottie.enableMergePathsForKitKatAndAbove(true);
+        }
+      } catch (error) {
+        console.warn('Failed to enable merge paths for Android:', error);
+      }
+    }
+  }, []);
   
   const getSizeStyles = () => {
+    // Ensure dimensions are whole numbers for Android compatibility
+    const getWholeNumber = (num: number) => Math.round(num);
+    
     switch (size) {
       case 'small':
-        return { width: 60, height: 60 };
+        return { width: getWholeNumber(60), height: getWholeNumber(60) };
       case 'medium':
-        return { width: 100, height: 100 };
+        return { width: getWholeNumber(100), height: getWholeNumber(100) };
       case 'large':
       default:
-        return { width: 150, height: 150 };
+        return { width: getWholeNumber(150), height: getWholeNumber(150) };
     }
   };
 
@@ -47,11 +65,23 @@ const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
   return (
     <View style={[styles.container, { transform: [{ translateY: offsetY }] }, style]}>
       <LottieView
-        source={source || require('../../../assets/Ripple loading animation.lottie')}
+        source={source || require('../../../assets/Ripple loading animation.zip')}
         autoPlay
         loop
         style={[styles.animation, getSizeStyles()]}
         resizeMode="contain"
+        // Android-specific props
+        {...(Platform.OS === 'android' && {
+          hardwareAccelerationAndroid: true,
+          renderMode: 'SOFTWARE' as any, // Fallback to software rendering if hardware fails
+        })}
+        // Error handling
+        onAnimationFinish={() => {
+          if (__DEV__) console.log('Lottie animation finished');
+        }}
+        onAnimationFailure={(error) => {
+          if (__DEV__) console.warn('Lottie animation failed:', error);
+        }}
       />
       {text && (
         <Text style={[

src/components/common/LoadingSpinner.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import { View, Text, StyleSheet, Dimensions } from 'react-native';
+import { View, Text, StyleSheet, Dimensions, Platform } from 'react-native';
 import LottieView from 'lottie-react-native';
 import { useTheme } from '../../contexts/ThemeContext';
 
@@ -19,16 +19,34 @@ const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
   offsetY = 0,
 }) => {
   const { currentTheme } = useTheme();
+
+  // Android-specific Lottie configuration
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      // Enable merge paths for Android KitKat and above
+      try {
+        const Lottie = require('lottie-react-native');
+        if (Lottie.enableMergePathsForKitKatAndAbove) {
+          Lottie.enableMergePathsForKitKatAndAbove(true);
+        }
+      } catch (error) {
+        console.warn('Failed to enable merge paths for Android:', error);
+      }
+    }
+  }, []);
   
   const getSizeStyles = () => {
+    // Ensure dimensions are whole numbers for Android compatibility
+    const getWholeNumber = (num: number) => Math.round(num);
+    
     switch (size) {
       case 'small':
-        return { width: 60, height: 60 };
+        return { width: getWholeNumber(60), height: getWholeNumber(60) };
       case 'medium':
-        return { width: 100, height: 100 };
+        return { width: getWholeNumber(100), height: getWholeNumber(100) };
       case 'large':
       default:
-        return { width: 150, height: 150 };
+        return { width: getWholeNumber(150), height: getWholeNumber(150) };
     }
   };
 
@@ -47,11 +65,23 @@ const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
   return (
     <View style={[styles.container, { transform: [{ translateY: offsetY }] }, style]}>
       <LottieView
-        source={source || require('../../../assets/Ripple loading animation.lottie')}
+        source={source || require('../../../assets/Ripple loading animation.zip')}
         autoPlay
         loop
         style={[styles.animation, getSizeStyles()]}
         resizeMode="contain"
+        // Android-specific props
+        {...(Platform.OS === 'android' && {
+          hardwareAccelerationAndroid: true,
+          renderMode: 'SOFTWARE' as any, // Fallback to software rendering if hardware fails
+        })}
+        // Error handling
+        onAnimationFinish={() => {
+          if (__DEV__) console.log('Lottie animation finished');
+        }}
+        onAnimationFailure={(error) => {
+          if (__DEV__) console.warn('Lottie animation failed:', error);
+        }}
       />
       {text && (
         <Text style={[