@developer_tribe/react-native-comnyx 0.14.0 → 0.15.1

package/lib/typescript/src/constants/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/constants/translations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,YAAY,EAAE,gBAAgB,CAyuD1D,CAAC"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/constants/translations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,YAAY,EAAE,gBAAgB,CA4sD1D,CAAC"}

package/lib/typescript/src/types/LocalizationKeys.d.ts

@@ -51,6 +51,5 @@ export type LocalizationKeys = {
     'chat.media.pick.title': string;
     'chat.media.pick.photo': string;
     'chat.media.pick.video': string;
-    'chat.media.pick.cancel': string;
 };
 //# sourceMappingURL=LocalizationKeys.d.ts.map

package/lib/typescript/src/types/LocalizationKeys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizationKeys.d.ts","sourceRoot":"","sources":["../../../../src/types/LocalizationKeys.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,4BAA4B,EAAE,MAAM,CAAC;IACrC,6BAA6B,EAAE,MAAM,CAAC;IACtC,2BAA2B,EAAE,MAAM,CAAC;IACpC,2BAA2B,EAAE,MAAM,CAAC;IACpC,gCAAgC,EAAE,MAAM,CAAC;IACzC,mCAAmC,EAAE,MAAM,CAAC;IAC5C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,wCAAwC,EAAE,MAAM,CAAC;IACjD,wCAAwC,EAAE,MAAM,CAAC;IACjD,4CAA4C,EAAE,MAAM,CAAC;IACrD,yCAAyC,EAAE,MAAM,CAAC;IAClD,wCAAwC,EAAE,MAAM,CAAC;IACjD,+BAA+B,EAAE,MAAM,CAAC;IACxC,6BAA6B,EAAE,MAAM,CAAC;IACtC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,wBAAwB,EAAE,MAAM,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,gCAAgC,EAAE,MAAM,CAAC;IACzC,sCAAsC,EAAE,MAAM,CAAC;IAC/C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2BAA2B,EAAE,MAAM,CAAC;IACpC,gCAAgC,EAAE,MAAM,CAAC;IACzC,4BAA4B,EAAE,MAAM,CAAC;IACrC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,4BAA4B,EAAE,MAAM,CAAC;IACrC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,2BAA2B,EAAE,MAAM,CAAC;IACpC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,4BAA4B,EAAE,MAAM,CAAC;IACrC,kCAAkC,EAAE,MAAM,CAAC;IAC3C,qCAAqC,EAAE,MAAM,CAAC;IAC9C,sBAAsB,EAAE,MAAM,CAAC;IAC/B,0BAA0B,EAAE,MAAM,CAAC;IACnC,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;IAChC,wBAAwB,EAAE,MAAM,CAAC;CAClC,CAAC"}
+{"version":3,"file":"LocalizationKeys.d.ts","sourceRoot":"","sources":["../../../../src/types/LocalizationKeys.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,4BAA4B,EAAE,MAAM,CAAC;IACrC,6BAA6B,EAAE,MAAM,CAAC;IACtC,2BAA2B,EAAE,MAAM,CAAC;IACpC,2BAA2B,EAAE,MAAM,CAAC;IACpC,gCAAgC,EAAE,MAAM,CAAC;IACzC,mCAAmC,EAAE,MAAM,CAAC;IAC5C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,wCAAwC,EAAE,MAAM,CAAC;IACjD,wCAAwC,EAAE,MAAM,CAAC;IACjD,4CAA4C,EAAE,MAAM,CAAC;IACrD,yCAAyC,EAAE,MAAM,CAAC;IAClD,wCAAwC,EAAE,MAAM,CAAC;IACjD,+BAA+B,EAAE,MAAM,CAAC;IACxC,6BAA6B,EAAE,MAAM,CAAC;IACtC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,wBAAwB,EAAE,MAAM,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,gCAAgC,EAAE,MAAM,CAAC;IACzC,sCAAsC,EAAE,MAAM,CAAC;IAC/C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2BAA2B,EAAE,MAAM,CAAC;IACpC,gCAAgC,EAAE,MAAM,CAAC;IACzC,4BAA4B,EAAE,MAAM,CAAC;IACrC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,4BAA4B,EAAE,MAAM,CAAC;IACrC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,2BAA2B,EAAE,MAAM,CAAC;IACpC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,4BAA4B,EAAE,MAAM,CAAC;IACrC,kCAAkC,EAAE,MAAM,CAAC;IAC3C,qCAAqC,EAAE,MAAM,CAAC;IAC9C,sBAAsB,EAAE,MAAM,CAAC;IAC/B,0BAA0B,EAAE,MAAM,CAAC;IACnC,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;CACjC,CAAC"}

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "0.14.0";
+export declare const VERSION = "0.15.1";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-native-comnyx",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "description": "React Native chat component with integrated support panel, enabling real-time customer communication and efficient agent workflow management.",
   "source": "./src/index.ts",
   "main": "./src/index.ts",

package/src/NativeComnyxMediaPicker.ts

@@ -3,13 +3,7 @@ import type { MediaAsset } from './types/MediaTypes';
 
 const { ComnyxMediaPicker } = NativeModules;
 
-export async function pickMedia(): Promise<MediaAsset[]> {
-  if (!ComnyxMediaPicker) {
-    return [];
-  }
-  const results = await ComnyxMediaPicker.pickMedia();
-  if (!results || !Array.isArray(results) || results.length === 0) return [];
-
+function mapResults(results: any[]): MediaAsset[] {
   return results.map((result: any) => {
     const isImage =
       result.type === 'image' ||
@@ -29,6 +23,33 @@ export async function pickMedia(): Promise<MediaAsset[]> {
   });
 }
 
+export async function pickMedia(): Promise<MediaAsset[]> {
+  if (!ComnyxMediaPicker) {
+    return [];
+  }
+  const results = await ComnyxMediaPicker.pickMedia();
+  if (!results || !Array.isArray(results) || results.length === 0) return [];
+  return mapResults(results);
+}
+
+export async function pickImage(): Promise<MediaAsset[]> {
+  if (!ComnyxMediaPicker) {
+    return [];
+  }
+  const results = await ComnyxMediaPicker.pickImage();
+  if (!results || !Array.isArray(results) || results.length === 0) return [];
+  return mapResults(results);
+}
+
+export async function pickVideo(): Promise<MediaAsset[]> {
+  if (!ComnyxMediaPicker) {
+    return [];
+  }
+  const results = await ComnyxMediaPicker.pickVideo();
+  if (!results || !Array.isArray(results) || results.length === 0) return [];
+  return mapResults(results);
+}
+
 export async function openVideo(uri: string): Promise<void> {
   if (!ComnyxMediaPicker) {
     console.warn('[Comnyx] ComnyxMediaPicker native module is not available');

package/src/components/ChatList.tsx

@@ -8,9 +8,10 @@ import {
   TouchableOpacity,
   Keyboard,
   StatusBar,
-  KeyboardAvoidingView,
   Platform,
   Animated,
+  LayoutAnimation,
+  UIManager,
   type SectionListData,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -32,6 +33,13 @@ import { formatDate, getDateKey } from '../utils/formatDate';
 import { activeOpacity } from '../constants/activeOpacity';
 import { useAppStore } from '../store/store';
 
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
 const headphonesIcon = require('../assets/headphones-01.png');
 const closeIcon = require('../assets/x-close.png');
 
@@ -197,6 +205,7 @@ export function ChatList({
   const [initFailed, setInitFailed] = useState(false);
   const [showScrollDownButton, setShowScrollDownButton] = useState(false);
   const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+  const [keyboardPadding, setKeyboardPadding] = useState(0);
   const listChangedRef = useRef(false);
   const [popupVisible, setPopupVisible] = useState(false);
   const [selectedMessage, setSelectedMessage] = useState<string>('');
@@ -560,25 +569,55 @@ export function ChatList({
     }
   }, [MESSAGES_PER_PAGE, customer?.external_id, initFailed, setData]);
 
-  // Add keyboard listeners
+  // Add keyboard listeners.
+  // We deliberately bypass RN's KeyboardAvoidingView on Android — under RN 0.85
+  // edge-to-edge (targetSdk 36) its `_relativeKeyboardHeight()` math mismatches
+  // the keyboard frame against the navigation-bar inset and leaves a residual
+  // gap both when the keyboard opens and when it closes. Reading
+  // `endCoordinates.height` directly and applying it as paddingBottom on the
+  // outer container produces the correct offset on every device.
   useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener(
-      'keyboardDidShow',
-      () => {
+    const showEventName =
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEventName =
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const animateNext = (duration?: number, easing?: string) => {
+      const d = duration && duration > 10 ? duration : 250;
+      const types = LayoutAnimation.Types as Record<
+        string,
+        (typeof LayoutAnimation.Types)[keyof typeof LayoutAnimation.Types]
+      >;
+      LayoutAnimation.configureNext({
+        duration: d,
+        update: {
+          duration: d,
+          type: (easing && types[easing]) || LayoutAnimation.Types.keyboard,
+        },
+      });
+    };
+
+    const keyboardShowListener = Keyboard.addListener(
+      showEventName,
+      (event: any) => {
+        const height = event?.endCoordinates?.height ?? 0;
+        animateNext(event?.duration, event?.easing);
+        setKeyboardPadding(height);
         setIsKeyboardVisible(true);
       }
     );
-    const keyboardDidHideListener = Keyboard.addListener(
-      'keyboardDidHide',
-      () => {
+    const keyboardHideListener = Keyboard.addListener(
+      hideEventName,
+      (event: any) => {
+        animateNext(event?.duration, event?.easing);
+        setKeyboardPadding(0);
         setIsKeyboardVisible(false);
       }
     );
 
-    // Cleanup function
     return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
+      keyboardShowListener.remove();
+      keyboardHideListener.remove();
     };
   }, []);
 
@@ -620,9 +659,18 @@ export function ChatList({
         animated={false}
         translucent
       />
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        style={{ flex: 1 }}
+      <View
+        style={{
+          flex: 1,
+          // Android edge-to-edge: keyboardDidShow.endCoordinates.height excludes
+          // the navigation-bar inset, so the keyboard's true visual height is
+          // `kbHeight + insets.bottom`. iOS reports the full height already.
+          paddingBottom:
+            keyboardPadding > 0
+              ? keyboardPadding +
+                (Platform.OS === 'android' ? insets.bottom : 0)
+              : insets.bottom,
+        }}
       >
         <View
           style={[
@@ -749,7 +797,7 @@ export function ChatList({
           />
         </View>
         <CustomToast />
-      </KeyboardAvoidingView>
+      </View>
     </>
   );
 }

package/src/components/CustomerForm.tsx

@@ -7,23 +7,32 @@ import {
   ScrollView,
   StatusBar,
   ActivityIndicator,
-  KeyboardAvoidingView,
   Platform,
+  LayoutAnimation,
+  UIManager,
   type ViewStyle,
   type StyleProp,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { createCustomer } from '../api';
 import { AppText } from './AppText';
 import { useLocalize } from '../hooks/useLocalize';
 import { useThemeColors } from '../hooks/useThemeColors';
 import CustomPopup from './CustomAlert';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { ScaledSheet } from './ScaledSheet';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
 import { activeOpacity } from '../constants/activeOpacity';
 import { useAppStore } from '../store/store';
 
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
 interface CustomerFormData {
   name: string;
   country: string;
@@ -57,6 +66,7 @@ export function CustomerForm({
 
   const themeColors = useThemeColors();
   const localize = useLocalize();
+  const insets = useSafeAreaInsets();
 
   const inputStyle = {
     ...styles.input,
@@ -69,6 +79,45 @@ export function CustomerForm({
     title: '',
     description: 'null',
   });
+  const [keyboardPadding, setKeyboardPadding] = useState(0);
+
+  // Manual keyboard handling — see ChatList for the same rationale: RN 0.85
+  // KeyboardAvoidingView miscomputes on Android edge-to-edge.
+  useEffect(() => {
+    const showEventName =
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEventName =
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const animateNext = (duration?: number, easing?: string) => {
+      const d = duration && duration > 10 ? duration : 250;
+      const types = LayoutAnimation.Types as Record<
+        string,
+        (typeof LayoutAnimation.Types)[keyof typeof LayoutAnimation.Types]
+      >;
+      LayoutAnimation.configureNext({
+        duration: d,
+        update: {
+          duration: d,
+          type: (easing && types[easing]) || LayoutAnimation.Types.keyboard,
+        },
+      });
+    };
+
+    const showSub = Keyboard.addListener(showEventName, (event: any) => {
+      const height = event?.endCoordinates?.height ?? 0;
+      animateNext(event?.duration, event?.easing);
+      setKeyboardPadding(height);
+    });
+    const hideSub = Keyboard.addListener(hideEventName, (event: any) => {
+      animateNext(event?.duration, event?.easing);
+      setKeyboardPadding(0);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
 
   const onSubmit = async (data: CustomerFormData) => {
     try {
@@ -129,10 +178,19 @@ export function CustomerForm({
         animated={false}
         translucent
       />
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      <View
         style={[
-          { flex: 1, backgroundColor: themeColors.dark_background },
+          {
+            flex: 1,
+            backgroundColor: themeColors.dark_background,
+            // Android edge-to-edge: keyboardDidShow height excludes the nav-bar
+            // inset; add it back so the input clears the soft keyboard.
+            paddingBottom:
+              keyboardPadding > 0
+                ? keyboardPadding +
+                  (Platform.OS === 'android' ? insets.bottom : 0)
+                : insets.bottom,
+          },
           containerStyle,
         ]}
       >
@@ -359,7 +417,7 @@ export function CustomerForm({
             buttonText={'customer.form.cancel' as keyof LocalizationKeys}
           />
         </TouchableOpacity>
-      </KeyboardAvoidingView>
+      </View>
     </>
   );
 }

package/src/components/MediaPickerButton.tsx

@@ -1,12 +1,29 @@
-import { TouchableOpacity, Image } from 'react-native';
-import { useCallback } from 'react';
+import {
+  TouchableOpacity,
+  Image,
+  View,
+  Modal,
+  Animated,
+  Dimensions,
+  TouchableWithoutFeedback,
+  Platform,
+} from 'react-native';
+import { useState, useCallback, useRef } from 'react';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { ScaledSheet } from './ScaledSheet';
 import { activeOpacity } from '../constants/activeOpacity';
-import { pickMedia } from '../NativeComnyxMediaPicker';
+import { pickImage, pickVideo } from '../NativeComnyxMediaPicker';
+import { AppText } from './AppText';
+import { useLocalize } from '../hooks/useLocalize';
 import type { MediaAsset } from '../types/MediaTypes';
 
 const paperclipIcon = require('../assets/attachment-01.png');
+const galleryIcon = require('../assets/gallery.png');
+const videoPlayIcon = require('../assets/video-play.png');
+
+const closeCircleIcon = require('../assets/x-circle.png');
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
 
 export function MediaPickerButton({
   onMediaSelected,
@@ -14,23 +31,166 @@ export function MediaPickerButton({
   onMediaSelected: (assets: MediaAsset[]) => void;
 }) {
   const themeColors = useThemeColors();
+  const localize = useLocalize();
+  const [visible, setVisible] = useState(false);
+  const slideAnim = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+
+  const open = useCallback(() => {
+    setVisible(true);
+    Animated.spring(slideAnim, {
+      toValue: 0,
+      useNativeDriver: true,
+      bounciness: 4,
+      speed: 14,
+    }).start();
+  }, [slideAnim]);
+
+  const close = useCallback(() => {
+    Animated.timing(slideAnim, {
+      toValue: SCREEN_HEIGHT,
+      duration: 250,
+      useNativeDriver: true,
+    }).start(() => {
+      setVisible(false);
+    });
+  }, [slideAnim]);
+
+  const pendingAction = useRef<(() => void) | null>(null);
+
+  const dismissAndRun = useCallback(
+    (action: () => void) => {
+      slideAnim.setValue(SCREEN_HEIGHT);
+      if (Platform.OS === 'ios') {
+        // Defer action until Modal's onDismiss fires to avoid
+        // "Attempt to present on a VC which is already presenting"
+        pendingAction.current = action;
+        setVisible(false);
+      } else {
+        setVisible(false);
+        action();
+      }
+    },
+    [slideAnim]
+  );
 
-  const showPicker = useCallback(async () => {
-    const assets = await pickMedia();
-    if (assets.length > 0) onMediaSelected(assets);
-  }, [onMediaSelected]);
+  const handlePickImage = useCallback(async () => {
+    dismissAndRun(async () => {
+      try {
+        const assets = await pickImage();
+        if (assets.length > 0) onMediaSelected(assets);
+      } catch (e) {
+        console.error('[Comnyx] pickImage error:', e);
+      }
+    });
+  }, [dismissAndRun, onMediaSelected]);
+
+  const handlePickVideo = useCallback(async () => {
+    dismissAndRun(async () => {
+      try {
+        const assets = await pickVideo();
+        if (assets.length > 0) onMediaSelected(assets);
+      } catch (e) {
+        console.error('[Comnyx] pickVideo error:', e);
+      }
+    });
+  }, [dismissAndRun, onMediaSelected]);
 
   return (
-    <TouchableOpacity
-      style={styles.button}
-      onPress={showPicker}
-      activeOpacity={activeOpacity}
-    >
-      <Image
-        source={paperclipIcon}
-        style={[styles.icon, { tintColor: themeColors.text }]}
-      />
-    </TouchableOpacity>
+    <>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={open}
+        activeOpacity={activeOpacity}
+      >
+        <Image
+          source={paperclipIcon}
+          style={[styles.icon, { tintColor: themeColors.text }]}
+        />
+      </TouchableOpacity>
+
+      <Modal
+        visible={visible}
+        transparent
+        animationType="none"
+        onRequestClose={close}
+        onDismiss={() => {
+          if (pendingAction.current) {
+            const action = pendingAction.current;
+            pendingAction.current = null;
+            action();
+          }
+        }}
+        statusBarTranslucent
+      >
+        <TouchableWithoutFeedback onPress={close}>
+          <View style={styles.overlay}>
+            <TouchableWithoutFeedback>
+              <Animated.View
+                style={[
+                  styles.sheet,
+                  {
+                    backgroundColor: themeColors.background,
+                    transform: [{ translateY: slideAnim }],
+                  },
+                ]}
+              >
+                <View style={styles.handle} />
+
+                <View style={styles.titleRow}>
+                  <AppText style={[styles.title, { color: themeColors.text }]}>
+                    {localize('chat.media.pick.title')}
+                  </AppText>
+                  {Platform.OS === 'android' && (
+                    <TouchableOpacity
+                      onPress={close}
+                      activeOpacity={activeOpacity}
+                      style={styles.closeButton}
+                    >
+                      <Image
+                        source={closeCircleIcon}
+                        style={styles.closeIcon}
+                      />
+                    </TouchableOpacity>
+                  )}
+                </View>
+
+                <TouchableOpacity
+                  style={styles.option}
+                  onPress={handlePickImage}
+                  activeOpacity={activeOpacity}
+                >
+                  <Image
+                    source={galleryIcon}
+                    style={[styles.optionIcon, { tintColor: themeColors.text }]}
+                  />
+                  <AppText
+                    style={[styles.optionText, { color: themeColors.text }]}
+                  >
+                    {localize('chat.media.pick.photo')}
+                  </AppText>
+                </TouchableOpacity>
+
+                <TouchableOpacity
+                  style={styles.option}
+                  onPress={handlePickVideo}
+                  activeOpacity={activeOpacity}
+                >
+                  <Image
+                    source={videoPlayIcon}
+                    style={[styles.optionIcon, { tintColor: themeColors.text }]}
+                  />
+                  <AppText
+                    style={[styles.optionText, { color: themeColors.text }]}
+                  >
+                    {localize('chat.media.pick.video')}
+                  </AppText>
+                </TouchableOpacity>
+              </Animated.View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
   );
 }
 
@@ -45,4 +205,65 @@ const styles = ScaledSheet.create({
     width: '28@vs',
     height: '28@vs',
   },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    borderTopLeftRadius: '16@vs',
+    borderTopRightRadius: '16@vs',
+    paddingBottom: '34@vs',
+    paddingTop: '12@vs',
+    paddingHorizontal: '20@s',
+  },
+  handle: {
+    width: '36@s',
+    height: '4@vs',
+    backgroundColor: '#ccc',
+    borderRadius: '2@vs',
+    alignSelf: 'center',
+    marginBottom: '16@vs',
+  },
+  titleRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '16@vs',
+  },
+  title: {
+    fontSize: '18@vs',
+    fontWeight: '600',
+  },
+  closeButton: {
+    padding: '4@vs',
+  },
+  closeIcon: {
+    width: '22@vs',
+    height: '22@vs',
+  },
+  optionIcon: {
+    width: '24@vs',
+    height: '24@vs',
+    marginRight: '12@s',
+  },
+  option: {
+    paddingVertical: '14@vs',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  optionText: {
+    fontSize: '16@vs',
+  },
+  cancelButton: {
+    marginTop: '8@vs',
+    paddingVertical: '14@vs',
+    alignItems: 'center',
+    borderTopWidth: 0.5,
+    borderTopColor: '#ddd',
+  },
+  cancelText: {
+    fontSize: '16@vs',
+    opacity: 0.6,
+  },
 });

package/src/components/MediaViewerModal.tsx

@@ -6,7 +6,7 @@ import {
   StatusBar,
   useWindowDimensions,
 } from 'react-native';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { AppText } from './AppText';
 import { ScaledSheet } from './ScaledSheet';
 import { activeOpacity } from '../constants/activeOpacity';
@@ -29,6 +29,12 @@ export function MediaViewerModal({
   const [imageError, setImageError] = useState(false);
   const isVideo = mediaType === 'video';
   const displayUri = isVideo ? thumbnailUri || undefined : mediaUri;
+  // Reset error state when URI or visibility changes
+  useEffect(() => {
+    if (visible) {
+      setImageError(false);
+    }
+  }, [visible, mediaUri]);
 
   const handlePlayVideo = () => {
     if (mediaUri) {
@@ -61,6 +67,7 @@ export function MediaViewerModal({
               source={{ uri: displayUri }}
               style={{ width, height: height * 0.9 }}
               resizeMode="contain"
+              resizeMethod="resize"
               onError={() => setImageError(true)}
             />
           ) : (

package/src/components/MessageItem.tsx

@@ -185,7 +185,6 @@ function TextMessageItem({
                     /https?:\/\/(?:[-\w.])+(?::[0-9]+)?(?:\/(?:[\w/_.])*(?:\?(?:[\w&=%.])*)?(?:#(?:[\w.])*)?)?/g,
                   color: '#0066CC',
                   navigate: (url) => {
-                    console.log('url', url);
                     if (url) {
                       Linking.openURL(url);
                     }