exodeui-react-native 1.0.10 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "exodeui-react-native",
-  "version": "1.0.10",
+  "version": "1.1.0",
   "description": "React Native runtime for ExodeUI animations",
   "main": "index.js",
   "files": [

package/src/engine.ts

@@ -1670,12 +1670,47 @@ export class ExodeUIEngine {
       canvas.drawText(text, x, y, paint, font);
   }
 
+  private getOrDecodeImage(src: string): any {
+      if (!src) return null;
+      if (this.imageCache.has(src)) return this.imageCache.get(src)!;
+
+      if (src.startsWith('data:image')) {
+          try {
+              const base64Str = src.includes(',') ? src.split(',')[1] : src;
+              const data = Skia.Data.fromBase64(base64Str);
+              const img = Skia.Image.MakeImageFromEncoded(data);
+              if (img) {
+                  this.imageCache.set(src, img);
+                  return img;
+              }
+          } catch (e) {
+              console.error('[ExodeUIEngine] Failed to decode base64 image:', e);
+          }
+      }
+      return null;
+  }
+
   private renderImage(canvas: any, obj: any, w: number, h: number) {
-      // Image support requires Skia.Image.MakeFromExternalSource or similar
-      // Placeholder for now
-      const paint = Skia.Paint();
-      paint.setColor(Skia.Color('#374151'));
-      canvas.drawRect({ x: -w/2, y: -h/2, width: w, height: h }, paint);
+      const state = this.objectStates.get(obj.id);
+      const geom = state?.geometry || obj.geometry;
+      const src = obj.src || geom.src || '';
+
+      const img = this.getOrDecodeImage(src);
+      if (img) {
+          const paint = Skia.Paint();
+          paint.setAlphaf(state?.opacity ?? 1);
+          canvas.drawImageRect(
+              img,
+              { x: 0, y: 0, width: img.width(), height: img.height() },
+              { x: -w/2, y: -h/2, width: w, height: h },
+              paint
+          );
+      } else {
+          // Fallback placeholder
+          const paint = Skia.Paint();
+          paint.setColor(Skia.Color('#374151'));
+          canvas.drawRect({ x: -w/2, y: -h/2, width: w, height: h }, paint);
+      }
   }
 
   private renderButton(canvas: any, obj: any, w: number, h: number) {
@@ -2248,8 +2283,26 @@ export class ExodeUIEngine {
 
     if (style.fill) {
       const paint = Skia.Paint();
-      paint.setColor(Skia.Color(style.fill.color || '#000000'));
-      paint.setAlphaf((state.opacity ?? 1) * (style.fill.opacity ?? 1));
+      
+      let hasImageFill = false;
+      if ((style.fill.type === 'Image' || style.fill.type === 'Pattern' || style.fill.url) && style.fill.url) {
+          const img = this.getOrDecodeImage(style.fill.url);
+          if (img) {
+              const matrix = Skia.Matrix();
+              matrix.translate(-w/2, -h/2);
+              matrix.scale(w / img.width(), h / img.height());
+              paint.setShader(img.makeShaderOptions(0, 0, 0, 0, matrix));
+              hasImageFill = true;
+          }
+      }
+      
+      if (!hasImageFill) {
+          const fillCol = style.fill.color;
+          const fillColStr = typeof fillCol === 'string' ? fillCol.replace(/\s+/g, '') : '#000000';
+          try { paint.setColor(Skia.Color(fillColStr)); } catch { paint.setColor(Skia.Color('#000000')); }
+      }
+      
+      paint.setAlphaf(Math.max(0, Math.min(1, (state.opacity ?? 1) * (style.fill.opacity ?? 1))));
       paint.setStyle(PaintStyle.Fill);
 
       if (style.shadow && style.shadow.opacity > 0) {