@ethora/chat-component-rn 26.6.11 → 26.6.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.6.11",
+  "version": "26.6.12",
   "description": "Drop-in XMPP chat component for React Native / Expo. <Chat config={...}/> and you're done.",
   "main": "index.js",
   "module": "lib/module/main.js",
@@ -139,7 +139,7 @@
     "@xmpp/client": "^0.13.1",
     "axios": "^1.7.9",
     "js-sha256": "^0.11.0",
-    "react-native-keyboard-controller": "^1.18.5",
+    "react-native-keyboard-controller": "^1.22.3",
     "react-native-webview": "^13.16.1",
     "react-redux": "^9.2.0",
     "styled-components": "^6.1.13"
@@ -148,44 +148,45 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
-    "@livekit/react-native": "2.7.6",
-    "@livekit/react-native-webrtc": "125.0.11",
+    "@livekit/react-native": "2.12.0",
+    "@livekit/react-native-webrtc": "144.1.2",
     "@react-native-async-storage/async-storage": "2.2.0",
-    "@react-native-community/netinfo": "11.4.1",
+    "@react-native-community/netinfo": "12.0.1",
+    "@react-native/eslint-config": "^0.86.2",
     "@types/jest": "^29.5.12",
-    "@types/react": "~19.1.0",
+    "@types/react": "~19.2.0",
     "@types/react-test-renderer": "^19.1.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
-    "eslint-config-expo": "~9.2.0",
-    "expo": "~54.0.0",
-    "expo-audio": "~1.1.1",
-    "expo-build-properties": "^55.0.14",
-    "expo-clipboard": "~8.0.8",
-    "expo-document-picker": "~14.0.0",
-    "expo-image-manipulator": "~14.0.0",
-    "expo-image-picker": "~17.0.0",
-    "expo-media-library": "~18.2.1",
-    "expo-status-bar": "~3.0.0",
-    "expo-video": "~3.0.16",
+    "eslint-config-expo": "~57.0.1",
+    "expo": "~57.0.0",
+    "expo-audio": "~57.0.3",
+    "expo-build-properties": "~57.0.10",
+    "expo-clipboard": "~57.0.1",
+    "expo-document-picker": "~57.0.1",
+    "expo-image-manipulator": "~57.0.9",
+    "expo-image-picker": "~57.0.9",
+    "expo-media-library": "~57.0.3",
+    "expo-status-bar": "~57.0.1",
+    "expo-video": "~57.0.2",
     "jest": "^29.6.3",
-    "jest-expo": "~54.0.0",
-    "livekit-client": "2.9.0",
+    "jest-expo": "~57.0.4",
+    "livekit-client": "2.21.0",
     "patch-package": "^8.0.1",
     "prettier": "2.8.8",
-    "react": "19.1.0",
-    "react-native": "0.81.5",
+    "react": "19.2.8",
+    "react-native": "0.86.2",
     "react-native-builder-bob": "^0.41.0",
     "react-native-callkeep": "4.3.16",
-    "react-native-gesture-handler": "~2.28.0",
+    "react-native-gesture-handler": "~2.32.0",
     "react-native-get-random-values": "~1.11.0",
-    "react-native-reanimated": "~4.1.0",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0",
-    "react-native-svg": "15.12.1",
-    "react-native-worklets": "~0.5.0",
+    "react-native-reanimated": "~4.5.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.26.0",
+    "react-native-svg": "15.15.4",
+    "react-native-worklets": "~0.10.1",
     "react-qr-code": "^2.0.15",
-    "react-test-renderer": "19.1.0",
+    "react-test-renderer": "19.2.8",
     "typescript": "~5.9.0"
   },
   "engines": {

package/src/components/MainComponents/MediaMessage.tsx

@@ -268,7 +268,7 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   pendingImageOverlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     alignItems: 'center',
     justifyContent: 'center',
     gap: 8,

package/src/components/MessageBubble/InteractionsOverlay.tsx

@@ -115,7 +115,7 @@ export const InteractionsOverlayProvider: React.FC<{
 
 const styles = StyleSheet.create({
   host: { flex: 1 },
-  overlay: { ...StyleSheet.absoluteFillObject, zIndex: 9999, elevation: 9999 },
+  overlay: { ...StyleSheet.absoluteFill, zIndex: 9999, elevation: 9999 },
 });
 
 export default InteractionsOverlayProvider;

package/src/components/MessageBubble/Message.tsx

@@ -605,7 +605,7 @@ const styles = StyleSheet.create({
     position: 'relative',
   },
   overlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     position: 'absolute',
     top: 0,
     left: 0,

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -235,7 +235,7 @@ export default MessageInteractions;
 
 const styles = StyleSheet.create({
   overlayFill: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: 'transparent',
   },
   contextMenu: {

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -82,7 +82,10 @@ const ModalVideo: React.FC<{ uri: string }> = ({ uri }) => {
         contentFit="contain"
         nativeControls
         surfaceType="textureView"
-        allowsFullscreen
+        // Fullscreen stays available by default on both expo-video lines:
+        // `allowsFullscreen` (SDK 54, default true) was replaced by
+        // `fullscreenOptions.enable` (SDK 57, default true). Passing neither
+        // keeps this file compiling against both.
       />
       {/* Play affordance shown immediately on open; tapping starts
           playback and the native controls take over. */}
@@ -90,7 +93,7 @@ const ModalVideo: React.FC<{ uri: string }> = ({ uri }) => {
         <TouchableOpacity
           activeOpacity={0.8}
           onPress={handlePlay}
-          style={StyleSheet.absoluteFillObject}
+          style={StyleSheet.absoluteFill}
         >
           <View style={styles.playOverlay}>
             <View style={styles.playButton}>
@@ -426,7 +429,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
 const styles = StyleSheet.create({
   playOverlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     justifyContent: 'center',
     alignItems: 'center',
   },

package/src/components/Modals/FilePreviewModal/GViewWebView.tsx

@@ -134,7 +134,7 @@ const styles = StyleSheet.create({
   container: { flex: 1, width: '100%', backgroundColor: '#fff' },
   webview: { flex: 1, backgroundColor: '#fff' },
   loadingOverlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#ffffff',

package/src/components/VideoCalls/VideoCallSession.tsx

@@ -345,9 +345,14 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
     if (!runtime) {return;}
     try {
       if (Platform.OS === 'android') {
-        await runtime.AudioSession.setAndroidAudioConfiguration?.({
-          preferredOutputList: next ? ['speaker'] : ['earpiece'],
-        });
+        // NB: not `setAndroidAudioConfiguration` — that method has never
+        // existed on AudioSession (the old `?.` call silently no-oped, so
+        // the speaker icon toggled while audio stayed on the earpiece).
+        // `selectAudioOutput` routes directly; on Android its device ids
+        // are the literal strings 'speaker' / 'earpiece'.
+        await runtime.AudioSession.selectAudioOutput(
+          next ? 'speaker' : 'earpiece'
+        );
       } else {
         await runtime.AudioSession.setAppleAudioConfiguration?.({
           audioCategory: 'playAndRecord',

package/src/components/styled/MediaFilePreview.tsx

@@ -110,7 +110,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#1a1a1a',
   },
   playOverlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'rgba(0,0,0,0.3)',

package/src/components/styled/VideoMessage.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
-import { useVideoPlayer, VideoView } from 'expo-video';
 import { useDispatch } from 'react-redux';
 import {
   setActiveFile,
@@ -37,12 +36,6 @@ const PlayBadge: React.FC = () => (
  * playback happens in the full-screen preview. Drawing that still with a
  * plain <Image> keeps the whole bubble inside the RN view hierarchy, so
  * the play badge is guaranteed to composite on top of it.
- *
- * The VideoView path below cannot make that promise: expo-video draws
- * into a native surface, and depending on platform, expo-video version
- * and surfaceType that surface can end up above its sibling RN views —
- * swallowing the badge and leaving the video looking like a plain photo.
- * It is also cheaper: no video player instance per row in a long list.
  */
 const PosterVideo: React.FC<{
   previewURL: string;
@@ -85,8 +78,8 @@ const PosterVideo: React.FC<{
         resizeMode="cover"
         // Not every backend returns a real still — some set
         // locationPreview to the video URL itself, which decodes to
-        // nothing. Rather than show an empty box, hand the row back to
-        // the player so it can paint a first frame.
+        // nothing. Rather than show an empty box, fall back to the
+        // static placeholder branch.
         onError={onPosterError}
       />
       <PlayBadge />
@@ -95,61 +88,35 @@ const PosterVideo: React.FC<{
 };
 
 /**
- * Fallback for messages with no usable poster frame: mount the player
- * purely to paint its first frame.
+ * Fallback for messages with no usable poster frame: a static dark
+ * placeholder behind the play badge.
+ *
+ * This branch used to mount an expo-video player purely to paint the
+ * first frame (`VideoView` + `surfaceType="textureView"`). That never
+ * composited reliably: on Android (Pixel, Android 16, New Architecture)
+ * the native video surface draws ABOVE sibling RN views, swallowing the
+ * play badge — the video looked like a plain photo. There is no
+ * surfaceType/zIndex combination that guarantees ordering across SDK 54
+ * and 57, so we don't fight it: no live surface in the bubble at all.
+ * The badge is plain RN views over a plain RN background, which cannot
+ * be occluded, and we drop the per-row player instance as a bonus.
+ * Actual playback (and the real first frame) happens in the full-screen
+ * preview modal.
  */
-const VideoSurfaceVideo: React.FC<{
-  fileURL: string;
+const PlaceholderVideo: React.FC<{
   onOpen: () => void;
-}> = ({ fileURL, onOpen }) => {
-  const [dims, setDims] = useState<MediaDims>(defaultMediaDims());
-
-  const player = useVideoPlayer(fileURL, (p) => {
-    p.muted = true;
-  });
-
-  useEffect(() => {
-    const sub = player.addListener('statusChange', () => {
-      const size = player.videoTrack?.size;
-      if (size?.width && size?.height) {
-        setDims(fitMediaDimensions(size.width, size.height));
-      }
-    });
-    return () => sub.remove();
-  }, [player]);
+}> = ({ onOpen }) => {
+  const dims = defaultMediaDims();
 
   return (
-    // Capture-overlay pattern: VideoView sits underneath without ANY
-    // touch participation; a transparent absolute-fill <Pressable> on
-    // top owns the tap. Previously we wrapped VideoView in a
-    // TouchableOpacity and set `pointerEvents="none"` on the inner
-    // VideoView — but on some expo-video versions / iOS the native
-    // VideoView still intercepted gestures despite that hint, so
-    // tapping the poster did nothing. Customer-reported #9 (video
-    // preview unresponsive). The Pressable now guarantees the tap
-    // reaches `onOpen`.
-    <View
+    <Pressable
+      onPress={onOpen}
       style={[styles.wrapper, { width: dims.width, height: dims.height }]}
+      accessibilityRole="button"
+      accessibilityLabel="Play video"
     >
-      <VideoView
-        player={player}
-        style={styles.video}
-        contentFit="cover"
-        nativeControls={false}
-        surfaceType="textureView"
-        pointerEvents="none"
-      />
       <PlayBadge />
-      <Pressable
-        onPress={onOpen}
-        // Sits ON TOP of VideoView + the play-button overlay; transparent
-        // so the poster + play icon show through. Captures the tap and
-        // routes to onOpen → setActiveModal(FILE_PREVIEW).
-        style={StyleSheet.absoluteFill}
-        accessibilityRole="button"
-        accessibilityLabel="Play video"
-      />
-    </View>
+    </Pressable>
   );
 };
 
@@ -177,7 +144,7 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
     );
   }
 
-  return <VideoSurfaceVideo fileURL={fileURL} onOpen={handleOpen} />;
+  return <PlaceholderVideo onOpen={handleOpen} />;
 };
 
 export default CustomMessageVideo;
@@ -193,7 +160,7 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   overlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     justifyContent: 'center',
     alignItems: 'center',
   },