@dubsdotapp/expo 0.2.73 → 0.2.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.2.73",
+  "version": "0.2.75",
   "description": "React Native SDK for the Dubs betting platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/index.ts

@@ -128,3 +128,4 @@ export type {
 export { signAndSendBase64Transaction } from './utils/transaction';
 export { getDeviceInfo, isSolanaSeeker } from './utils/device';
 export type { DeviceInfo } from './utils/device';
+export { ensurePngAvatar } from './utils/avatarUrl';

package/src/ui/UserProfileCard.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { View, Text, Image, StyleSheet } from 'react-native';
 import { useDubsTheme } from './theme';
+import { ensurePngAvatar } from '../utils/avatarUrl';
 
 export interface UserProfileCardProps {
   walletAddress: string;
@@ -31,7 +32,7 @@ export function UserProfileCard({
 
   const imageUri = useMemo(
     () =>
-      avatarUrl ||
+      ensurePngAvatar(avatarUrl) ||
       `https://api.dicebear.com/9.x/avataaars/png?seed=${walletAddress}&size=128`,
     [avatarUrl, walletAddress],
   );

package/src/ui/UserProfileSheet.tsx

@@ -16,6 +16,7 @@ import {
 import { useDubsTheme } from './theme';
 import { useDubs } from '../provider';
 import { usePushNotifications } from '../hooks/usePushNotifications';
+import { ensurePngAvatar } from '../utils/avatarUrl';
 
 // ── Avatar Helpers ──
 
@@ -40,8 +41,8 @@ function getAvatarUrl(style: string, seed: string, size = 256): string {
 function parseAvatarUrl(url?: string | null): { style: string; seed: string } {
   if (!url) return { style: 'adventurer', seed: generateSeed() };
   try {
-    // URL format: https://api.dicebear.com/9.x/{style}/png?seed={seed}&size=...
-    const match = url.match(/\/9\.x\/([^/]+)\/png\?seed=([^&]+)/);
+    // Match both png and svg formats, any API version (7.x, 9.x, etc.)
+    const match = url.match(/\/\d+\.x\/([^/]+)\/(?:png|svg)\?seed=([^&]+)/);
     if (match) return { style: match[1], seed: match[2] };
   } catch {}
   return { style: 'adventurer', seed: generateSeed() };
@@ -379,6 +380,7 @@ const styles = StyleSheet.create({
   avatar: {
     width: '100%',
     height: '100%',
+    backgroundColor: '#1a1a2e',
   },
   avatarLoading: {
     ...StyleSheet.absoluteFillObject,
@@ -430,6 +432,7 @@ const styles = StyleSheet.create({
   styleTileImage: {
     width: '100%',
     height: '100%',
+    backgroundColor: '#1a1a2e',
   },
   // Error
   errorBox: {

package/src/ui/game/PlayersCard.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { StyleSheet, View, Text } from 'react-native';
 import { useDubsTheme } from '../theme';
+import { ensurePngAvatar } from '../../utils/avatarUrl';
 import type { GameDetail } from '../../types';
 
 export interface PlayersCardProps {
@@ -80,7 +81,7 @@ function BettorRow({
     <View style={[styles.row, !isFirst && { borderTopColor: t.border, borderTopWidth: 1 }]}>
       <View style={[styles.dot, { backgroundColor: dotColor }]} />
       {showAvatar ? (
-        <Img source={{ uri: bettor.avatar }} style={styles.avatar} resizeMode="cover" onError={() => setImgFailed(true)} />
+        <Img source={{ uri: ensurePngAvatar(bettor.avatar) }} style={styles.avatar} resizeMode="cover" onError={() => setImgFailed(true)} />
       ) : (
         <View style={[styles.avatar, styles.avatarPlaceholder]} />
       )}

package/src/utils/avatarUrl.ts

@@ -0,0 +1,9 @@
+/**
+ * Ensure a DiceBear avatar URL uses PNG format for React Native compatibility.
+ * React Native's Image component cannot render SVGs.
+ * This converts at render time only — the stored URL in the DB is never modified.
+ */
+export function ensurePngAvatar(url: string | null | undefined): string | undefined {
+  if (!url) return undefined;
+  return url.replace('/svg?', '/png?');
+}