@ethora/chat-component-rn 26.6.12 → 26.7.1

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -1,4 +1,6 @@
 import React, { useMemo } from 'react';
+import { useFileToken } from '../../hooks/useFileToken';
+import { appendFileToken } from '../../helpers/secureFileUrl';
 import { IConfig, IRoom } from '../../types/types';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import {
@@ -26,6 +28,8 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   isDriver,
   config,
 }) => {
+  // Room icons can live on the membership-gated secure-files host.
+  const fileToken = useFileToken();
   const displayName = String(chat?.title || chat?.name || '').trim();
 
   const lastMessage = useMemo(() => {
@@ -86,7 +90,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
 
   return (
     <ChatItem key={index}>
-      <ProfileImagePlaceholder name={displayName} icon={chat?.icon} active={false} />
+      <ProfileImagePlaceholder
+        name={displayName}
+        icon={appendFileToken(chat?.icon, fileToken)}
+        active={false}
+      />
       <View
         style={{
           flexDirection: 'column',

package/src/components/RoomComponents/styled/LastMessageFile.tsx

@@ -8,6 +8,12 @@ import {
 } from './StyledRoomComponents';
 import { FileIcon } from '../../../assets/icons';
 import { Image, View } from 'react-native';
+import { useFileToken } from '../../../hooks/useFileToken';
+import {
+  appendFileToken,
+  isSecureFileUrl,
+  requestFileTokenRecovery,
+} from '../../../helpers/secureFileUrl';
 
 interface LastMessageFileProps
   extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
@@ -21,6 +27,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
   locationPreview,
 }) => {
   const [imgSrc, setImgSrc] = useState(locationPreview);
+  const fileToken = useFileToken();
 
   return (
     <LastRoomMessageContainer>
@@ -34,13 +41,18 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
       >
         {imgSrc ? (
           <Image
-            source={{ uri: imgSrc }}
+            source={{ uri: appendFileToken(imgSrc, fileToken) }}
             style={{
               borderRadius: 16,
               width: 20,
               height: 20,
             }}
-            onError={() => setImgSrc(fallbackImage)}
+            onError={() => {
+              if (isSecureFileUrl(imgSrc)) {
+                requestFileTokenRecovery();
+              }
+              setImgSrc(fallbackImage);
+            }}
           />
         ) : (
           <FileIcon style={{ width: '20px', height: '20px' }} />

package/src/components/RoomComponents/styled/LastMessagePhoto.tsx

@@ -1,4 +1,6 @@
 import React, { FC } from 'react';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import { LastMessage } from '../../../types/types';
 import {
@@ -30,6 +32,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
   locationPreview,
   originalName,
 }) => {
+  const fileToken = useFileToken();
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -42,7 +45,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
       >
         <PhotoContainer>
           <ShadeWrapper>
-            <LastMessageImg src={locationPreview} />
+            <LastMessageImg src={appendFileToken(locationPreview, fileToken)} />
           </ShadeWrapper>
         </PhotoContainer>
         <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>

package/src/components/RoomComponents/styled/LastMessageVideo.tsx

@@ -1,4 +1,6 @@
 import React, { FC } from 'react';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import { LastMessage } from '../../../types/types';
 import {
@@ -45,6 +47,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
   location,
   originalName,
 }) => {
+  const fileToken = useFileToken();
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -57,7 +60,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
       >
         <VideoContainer>
           <ShadeWrapper>
-            <Thumbnail src={location} />
+            <Thumbnail src={appendFileToken(location, fileToken)} />
           </ShadeWrapper>
           <PlayButton><Text>▶</Text></PlayButton>
         </VideoContainer>

package/src/components/styled/AudioMessage.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { withFileToken } from '../../helpers/secureFileUrl';
 import {
   View,
   TouchableOpacity,
@@ -425,7 +426,7 @@ const AudioMessage = ({
     const partInfo = await FileSystem.getInfoAsync(part);
     if (!partInfo.exists) {
       const download = await withTimeout(
-        FileSystem.downloadAsync(src, part),
+        FileSystem.downloadAsync(withFileToken(src), part),
         12000,
         'audio_download_timeout'
       );

package/src/components/styled/MessageImage.tsx

@@ -1,4 +1,9 @@
 import React, { useEffect, useState } from 'react';
+import {
+  isSecureFileUrl,
+  requestFileTokenRecovery,
+} from '../../helpers/secureFileUrl';
+import { pushLog } from '../../utils/devLogger';
 import { Container } from './StyledInputComponents/MediaComponents';
 import { useDispatch } from 'react-redux';
 import {
@@ -14,11 +19,23 @@ import {
 } from '../../helpers/mediaDimensions';
 
 interface CustomMessageImageProps {
+  /** Full-size file. Opened in the preview modal, NOT rendered inline. */
   fileURL: string;
   fileName: string;
   mimetype: string;
+  /**
+   * Server-generated thumbnail — what the bubble actually renders, same
+   * as the web client. The full-size original can be many megabytes and,
+   * for secure uploads, is served from a different (membership-gated)
+   * route; rendering it inline is what left the bubbles blank.
+   */
+  locationPreview?: string;
 }
 
+/** Keep the personal file token out of the logs. */
+const maskToken = (url?: string) =>
+  (url || '').replace(/([?&]ft=)[^&]*/i, '$1<redacted>');
+
 const FALLBACK_IMAGE =
   'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
 
@@ -26,7 +43,12 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   fileURL,
   fileName,
   mimetype,
+  locationPreview,
 }) => {
+  // Preview first, original only as a fallback — mirrors the web client,
+  // where the <img> src is the preview and `fileURL` is reserved for the
+  // modal.
+  const displayURL = locationPreview || fileURL;
   const [loading, setLoading] = useState(true);
   // Start with a neutral box; swap to the real aspect ratio once the
   // image's natural dimensions are known so it's shown scaled, not cropped.
@@ -35,25 +57,31 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!fileURL) {
+    if (!displayURL) {
       return;
     }
     let active = true;
     Image.getSize(
-      fileURL,
+      displayURL,
       (w, h) => {
         if (active) {
           setDims(fitMediaDimensions(w, h));
         }
       },
-      () => {
-        /* keep the default box if the size probe fails */
+      (error) => {
+        // Keep the default box — but say WHICH url failed. A blank
+        // bubble is otherwise indistinguishable between "bad url",
+        // "403 without a token" and "host unreachable".
+        pushLog('warn', 'image: getSize failed', {
+          url: maskToken(displayURL),
+          error: (error as any)?.message || String(error),
+        });
       }
     );
     return () => {
       active = false;
     };
-  }, [fileURL]);
+  }, [displayURL]);
 
   const handleOpen = () => {
     dispatch(setActiveFile({ fileName, fileURL, mimetype }));
@@ -78,7 +106,7 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
           </View>
         )}
         <Image
-          source={{ uri: fileURL || FALLBACK_IMAGE }}
+          source={{ uri: displayURL || FALLBACK_IMAGE }}
           style={{
             width: dims.width,
             height: dims.height,
@@ -86,6 +114,17 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
             backgroundColor: 'rgba(0, 0, 0, 0)',
           }}
           onLoadEnd={() => setLoading(false)}
+          onError={(event) => {
+            setLoading(false);
+            pushLog('warn', 'image: load failed', {
+              url: maskToken(displayURL),
+              usingPreview: !!locationPreview,
+              error: (event as any)?.nativeEvent?.error,
+            });
+            if (isSecureFileUrl(displayURL)) {
+              requestFileTokenRecovery();
+            }
+          }}
           // The box already matches the natural aspect ratio, so 'cover'
           // fills it edge-to-edge with no actual cropping or letterboxing.
           resizeMode="cover"

package/src/components/styled/VideoMessage.tsx

@@ -1,4 +1,8 @@
 import React, { useEffect, useState } from 'react';
+import {
+  isSecureFileUrl,
+  requestFileTokenRecovery,
+} from '../../helpers/secureFileUrl';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 import {
@@ -139,7 +143,12 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
       <PosterVideo
         previewURL={previewURL}
         onOpen={handleOpen}
-        onPosterError={() => setPosterFailed(true)}
+        onPosterError={() => {
+          if (isSecureFileUrl(previewURL)) {
+            requestFileTokenRecovery();
+          }
+          setPosterFailed(true);
+        }}
       />
     );
   }

package/src/context/xmppProvider.tsx

@@ -14,7 +14,7 @@ import { VideoCallOverlay } from '../components/VideoCalls/VideoCallOverlay';
 import XmppClient, {
   XmppCredentialsProvider,
 } from '../networking/xmppClient';
-import { refreshTokens } from '../roomStore/chatSettingsSlice';
+import { refreshAuthTokensQuietly } from '../networking/authRefresh';
 import {
   IConfig,
   ProviderBootstrapStatus,
@@ -49,8 +49,7 @@ import {
   setUnreadSyncing,
 } from '../roomStore/roomsSlice';
 import { runHistoryPreloadScheduler } from '../helpers/historyPreloadScheduler';
-import { asyncLocalStorage } from '../hooks/useLocalStorage';
-import { localStorageConstants } from '../helpers/constants/LOCAL_STORAGE';
+import { secureUserStorage } from '../helpers/secureUserStorage';
 import { clearPersistedState } from '../roomStore/persistence';
 import { pushLog as devPushLog } from '../utils/devLogger';
 
@@ -107,23 +106,25 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
   // the XmppClient at least doesn't crash on `undefined.password`.
   const credentialsProvider = useMemo<XmppCredentialsProvider>(() => {
     return async () => {
-      // 1. Consumer-supplied REST refresh (when wired). This runs
-      //    before the SDK's own refresh chain so non-Ethora backends
-      //    can keep auth state in sync with their own token endpoint.
-      const customRefresh = config?.refreshTokens?.refreshFunction;
-      if (customRefresh) {
-        try {
-          const result = await customRefresh();
-          if (result?.accessToken) {
-            store.dispatch(
-              refreshTokens({
-                token: result.accessToken,
-                refreshToken: result.refreshToken || '',
-              })
-            );
-          }
-        } catch (err) {
-          devPushLog('warn', 'XMPP creds refresh: customRefresh failed', err);
+      // 1. Make sure the REST tokens are fresh before re-minting XMPP
+      //    creds. This used to call `config.refreshTokens.refreshFunction`
+      //    directly and then fall into step 2, which refreshes again —
+      //    two rotations back to back, which the new backend scheme
+      //    reads as a race at best and token reuse at worst. One call to
+      //    the shared rotation point covers both the consumer-supplied
+      //    function and the built-in endpoint.
+      if (config?.refreshTokens?.enabled) {
+        const rotated = await refreshAuthTokensQuietly();
+
+        if (rotated?.xmppPassword) {
+          const rotatedUser = store.getState().chatSettingStore.user;
+          return {
+            username:
+              rotatedUser?.xmppUsername ||
+              rotatedUser?.defaultWallet?.walletAddress ||
+              '',
+            password: rotated.xmppPassword,
+          };
         }
       }
 
@@ -163,7 +164,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
   }, [
     config?.jwtLogin?.enabled,
     config?.jwtLogin?.token,
-    config?.refreshTokens?.refreshFunction,
+    config?.refreshTokens?.enabled,
     config?.userLogin?.enabled,
     config?.customLogin?.enabled,
     config?.initBeforeLoadAuth?.myEndpoint,
@@ -322,7 +323,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
           devPushLog('rn', 'initBeforeLoad: clearStoreBeforeInit');
           store.dispatch(setLogoutState());
           store.dispatch(logout());
-          await asyncLocalStorage(localStorageConstants.ETHORA_USER).remove().catch(() => undefined);
+          await secureUserStorage().remove().catch(() => undefined);
         }
 
         await ensureScopedChatCache(config);
@@ -353,6 +354,29 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
           store.dispatch(setConfig(config));
         }
 
+        // Rotate BEFORE the first XMPP connect. On the rotating backend
+        // the xmpp password is a short-lived JWT that only the newest
+        // rotation knows, and each rotation invalidates its predecessors
+        // — so a snapshot's password (a host's cached `userLogin.user`,
+        // a persisted session) is usually already dead at boot. Without
+        // this, the first SASL attempt fails `not-authorized`, all three
+        // bootstrap retries re-present the same dead password, and the
+        // user dead-ends on the Connection error modal even though one
+        // rotation away a perfectly good session existed. The rotation
+        // also lands the fileToken pre-render, so secure media never
+        // paints blank first. Quiet + deduped; when it can't rotate
+        // (no refresh material, non-rotating backend) we just connect
+        // with what the snapshot has, exactly as before.
+        // jwtLogin is skipped: /users/client just minted fresh creds.
+        let connectPassword = resolved.xmppPassword;
+        if (config?.refreshTokens?.enabled && !config?.jwtLogin?.enabled) {
+          const rotated = await refreshAuthTokensQuietly();
+          if (cancelled) {return;}
+          if (rotated?.xmppPassword) {
+            connectPassword = rotated.xmppPassword;
+          }
+        }
+
         // Kick off REST /chats/my; allRoomPresences below needs the
         // room list to be in redux, otherwise it joins 0 MUCs and the
         // user receives zero realtime messages until they manually tap
@@ -362,7 +386,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
 
         const c = await initializeClient(
           resolved.xmppUsername!,
-          resolved.xmppPassword,
+          connectPassword,
           config?.xmppSettings
         );
         if (cancelled) {return;}

package/src/helpers/ensureScopedChatCache.ts

@@ -3,7 +3,7 @@ import { store } from '../roomStore';
 import { logout } from '../roomStore/chatSettingsSlice';
 import { setLogoutState } from '../roomStore/roomsSlice';
 import { asyncLocalStorage } from '../hooks/useLocalStorage';
-import { localStorageConstants } from './constants/LOCAL_STORAGE';
+import { secureUserStorage } from './secureUserStorage';
 import { clearRoomsRestCache } from '../networking/api-requests/rooms.api';
 import { clearPersistedState } from '../roomStore/persistence';
 import {
@@ -53,7 +53,7 @@ export async function ensureScopedChatCache(config?: IConfig): Promise<void> {
     clearRoomsRestCache();
     store.dispatch(setLogoutState());
     store.dispatch(logout());
-    await asyncLocalStorage(localStorageConstants.ETHORA_USER).remove();
+    await secureUserStorage().remove();
     await clearPersistedState();
   }
 

package/src/helpers/initXmppRooms.tsx

@@ -4,6 +4,7 @@ import { initRoomsPresence } from './initRoomsPresence';
 import XmppClient from '../networking/xmppClient';
 import { IConfig, IRoom, User } from '../types/types';
 import { store } from '../roomStore';
+import { refreshAuthTokensQuietly } from '../networking/authRefresh';
 
 const initXmppRooms = async (
   user: User,
@@ -59,7 +60,10 @@ const initXmppRooms = async (
     }
 
     if (config?.refreshTokens?.enabled) {
-      config?.refreshTokens?.refreshFunction?.();
+      // Was a bare call to the consumer-supplied refreshFunction, i.e. a
+      // rotation completely outside the SDK's lock. Routed through the
+      // one rotation point, which calls that same function internally.
+      refreshAuthTokensQuietly();
     }
   } catch (error) {
     console.error(error);

package/src/helpers/persistCrypto.ts

@@ -0,0 +1,127 @@
+import CryptoJS from 'crypto-js';
+import { secureGet, secureSet } from './secureKeyValue';
+
+// AES-256-CBC at rest for the bulk persisted state (message history +
+// room list) that `roomStore/persistence.ts` writes to AsyncStorage.
+// This is envelope encryption, not a SecureStore write of the payload
+// itself: expo-secure-store has historically capped a single value's
+// size on Android (chunking exists in newer releases, but the payload
+// here is unbounded — up to MESSAGE_LIMIT messages per room, times
+// every room), so only the small symmetric KEY goes through the
+// platform Keychain/Keystore (`secureKeyValue.ts`); the ciphertext
+// itself stays in plain AsyncStorage, unreadable without that key.
+const CIPHER_KEY_STORE_KEY = 'ethora_history_cipher_key';
+const ENVELOPE_VERSION = 1;
+const KEY_BYTES = 32; // AES-256
+const IV_BYTES = 16; // one AES block
+
+interface Envelope {
+  v: number;
+  iv: string; // base64
+  ct: string; // base64 ciphertext
+}
+
+/**
+ * `crypto-js`'s own `WordArray.random()` falls back to `Math.random()`
+ * when it can't detect a browser `window.crypto` — not safe for key/IV
+ * material. `react-native-get-random-values` (a REQUIRED peer
+ * dependency, imported at the top of `main.ts`/`index.js` before
+ * anything else in the SDK runs) polyfills the real thing onto
+ * `global.crypto.getRandomValues` instead; source bytes from that and
+ * hand them to crypto-js as a WordArray rather than trust its default.
+ */
+const randomWordArray = (byteLength: number): CryptoJS.lib.WordArray => {
+  const bytes = new Uint8Array(byteLength);
+  (global as any).crypto.getRandomValues(bytes);
+  const words: number[] = [];
+  for (let i = 0; i < bytes.length; i += 4) {
+    words.push(
+      ((bytes[i] || 0) << 24) |
+        ((bytes[i + 1] || 0) << 16) |
+        ((bytes[i + 2] || 0) << 8) |
+        (bytes[i + 3] || 0)
+    );
+  }
+  return CryptoJS.lib.WordArray.create(words, byteLength);
+};
+
+let cachedKeyPromise: Promise<CryptoJS.lib.WordArray> | null = null;
+
+/**
+ * One AES-256 key per install, generated on first use and persisted
+ * through the SecureStore/Keychain bridge. Reused across logins on
+ * purpose: the ciphertext it protects is deleted wholesale on logout
+ * (`clearPersistedState`), so there is no cross-account data for a
+ * stable key to expose — only the encrypted blob of whoever is
+ * currently logged in ever exists on disk at a given time.
+ */
+const loadOrCreateKey = (): Promise<CryptoJS.lib.WordArray> => {
+  if (cachedKeyPromise) {return cachedKeyPromise;}
+  cachedKeyPromise = (async () => {
+    const existing = await secureGet(CIPHER_KEY_STORE_KEY);
+    if (existing) {
+      return CryptoJS.enc.Base64.parse(existing);
+    }
+    const key = randomWordArray(KEY_BYTES);
+    await secureSet(CIPHER_KEY_STORE_KEY, CryptoJS.enc.Base64.stringify(key));
+    return key;
+  })();
+  return cachedKeyPromise;
+};
+
+/** Encrypt a JSON-serialisable payload for storage. Returns the string to persist. */
+export async function encryptForPersist(plaintext: string): Promise<string> {
+  const key = await loadOrCreateKey();
+  const iv = randomWordArray(IV_BYTES);
+  const encrypted = CryptoJS.AES.encrypt(plaintext, key, {
+    iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  const envelope: Envelope = {
+    v: ENVELOPE_VERSION,
+    iv: CryptoJS.enc.Base64.stringify(iv),
+    ct: encrypted.ciphertext.toString(CryptoJS.enc.Base64),
+  };
+  return JSON.stringify(envelope);
+}
+
+/**
+ * Decrypt a value previously written by `encryptForPersist`. Returns
+ * null (never throws) for anything that isn't a valid envelope for the
+ * current key — including a plaintext blob from a pre-encryption
+ * install: the app just re-hydrates that room/history from the server,
+ * same as any other empty-cache cold start.
+ */
+export async function decryptFromPersist(
+  stored: string
+): Promise<string | null> {
+  try {
+    const envelope = JSON.parse(stored) as Partial<Envelope>;
+    if (
+      !envelope ||
+      envelope.v !== ENVELOPE_VERSION ||
+      !envelope.iv ||
+      !envelope.ct
+    ) {
+      return null;
+    }
+    const key = await loadOrCreateKey();
+    const iv = CryptoJS.enc.Base64.parse(envelope.iv);
+    const ciphertext = CryptoJS.enc.Base64.parse(envelope.ct);
+    const decrypted = CryptoJS.AES.decrypt(
+      { ciphertext } as CryptoJS.lib.CipherParams,
+      key,
+      { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }
+    );
+    const plaintext = decrypted.toString(CryptoJS.enc.Utf8);
+    return plaintext || null;
+  } catch {
+    return null;
+  }
+}
+
+/** Test seam only. */
+export const __resetPersistCryptoKeyForTests = (): void => {
+  cachedKeyPromise = null;
+};

package/src/helpers/pickImageAsset.ts

@@ -0,0 +1,68 @@
+import { Alert, Linking } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+
+/**
+ * A picked image in the shape React Native's FormData understands.
+ *
+ * NOT a web `File`: RN streams a multipart part straight from a `file://`
+ * uri and has no usable Blob/File/atob path. Screens ported from the web
+ * client used to carry base64 -> Blob -> File helpers that could never
+ * have run here.
+ */
+export interface PickedImage {
+  uri: string;
+  type: string;
+  name: string;
+}
+
+/**
+ * Ask for library permission, open the picker, and normalise the result.
+ *
+ * Returns `null` for every non-error outcome — permission refused, user
+ * cancelled — so call sites can simply keep their current value.
+ *
+ * Exists because the avatar pickers are wired to `onPress`, which hands
+ * the callback a SyntheticEvent. Storing that event as "the image" (what
+ * two screens used to do) rendered a pooled event as an <Image source>
+ * and then crashed with "Property is not configurable" when React tried
+ * to release it — on top of never letting the user pick anything.
+ */
+export const pickImageAsset = async (): Promise<PickedImage | null> => {
+  try {
+    // expo-image-picker owns the permission prompt internally and
+    // returns a `granted` flag.
+    const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (!perm.granted) {
+      Alert.alert(
+        'Permission required',
+        'Photo library permission is needed to select images.',
+        [
+          { text: 'Cancel', style: 'cancel' },
+          { text: 'Open Settings', onPress: () => Linking.openSettings() },
+        ]
+      );
+      return null;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 0.8,
+    });
+    if (result.canceled || !result.assets?.[0]) {
+      return null;
+    }
+
+    const asset = result.assets[0];
+    const originalName = asset.fileName || asset.uri.split('/').pop();
+    return {
+      uri: asset.uri,
+      type: asset.mimeType || 'image/jpeg',
+      name: originalName || `image_${Date.now()}.jpg`,
+    };
+  } catch (error) {
+    console.error('Failed to pick an image:', error);
+    return null;
+  }
+};