@ethora/chat-component-rn 26.8.1 → 26.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.8.1",
+  "version": "26.8.2",
   "description": "Drop-in XMPP chat component for React Native / Expo. <Chat config={...}/> and you're done.",
   "main": "index.js",
   "module": "lib/module/main.js",
@@ -48,6 +48,7 @@
     "@react-native-async-storage/async-storage": ">=1.21.0",
     "@react-native-community/netinfo": ">=11.0.0",
     "expo-audio": ">=1.0.0",
+    "expo-blur": ">=13.0.0",
     "expo-clipboard": ">=7.0.0",
     "expo-document-picker": ">=13.0.0",
     "expo-file-system": ">=19.0.0",
@@ -55,6 +56,7 @@
     "expo-image-manipulator": ">=13.0.0",
     "expo-image-picker": ">=16.0.0",
     "expo-media-library": ">=17.0.0",
+    "expo-secure-store": ">=13.0.0",
     "expo-video": ">=2.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.73.0",
@@ -92,6 +94,9 @@
     "expo-audio": {
       "optional": true
     },
+    "expo-blur": {
+      "optional": true
+    },
     "expo-clipboard": {
       "optional": true
     },
@@ -113,6 +118,9 @@
     "expo-media-library": {
       "optional": true
     },
+    "expo-secure-store": {
+      "optional": true
+    },
     "expo-video": {
       "optional": true
     }
@@ -139,8 +147,9 @@
     "@reduxjs/toolkit": "^2.5.0",
     "@xmpp/client": "^0.13.1",
     "axios": "^1.7.9",
+    "crypto-js": "^4.2.0",
     "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"
@@ -149,44 +158,48 @@
     "@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/crypto-js": "^4.2.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-blur": "~57.0.2",
+    "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-secure-store": "~15.0.7",
+    "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/assets/icons.tsx

@@ -271,18 +271,18 @@ export const NoMessages = ({
   </Svg>
 );
 
-export const ReportIcon = ({ color = '#8C8C8C', ...props }) => (
+export const ReportIcon = ({ color = '#E53935', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
     <Path
       d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-      stroke="#E53935"
+      stroke={color}
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <Path
       d="M12 7V13M12 16H12.01"
-      stroke="#E53935"
+      stroke={color}
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -333,6 +333,26 @@ export const ReplyIcon = ({ color = '#8C8C8C', ...props }) => (
   </Svg>
 );
 
+/**
+ * Classic "share" glyph — three nodes joined by two links — for the
+ * profile's Share button. `SendItemIcon`, which used to stand in here, is
+ * a textured item/token badge with a hardcoded blue outline: wrong shape,
+ * and it ignores the button's tint.
+ */
+export const ShareIcon = ({ color = '#8C8C8C', width = 24, height = 24, ...props }) => (
+  <Svg width={width} height={height} viewBox="0 0 24 24" fill="none" {...props}>
+    <Circle cx="18" cy="5" r="3" stroke={color} strokeWidth="2" />
+    <Circle cx="6" cy="12" r="3" stroke={color} strokeWidth="2" />
+    <Circle cx="18" cy="19" r="3" stroke={color} strokeWidth="2" />
+    <Path
+      d="M8.59 13.51L15.42 17.49M15.41 6.51L8.59 10.49"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </Svg>
+);
+
 export const SendItemIcon = ({ color = '#8C8C8C', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
     <Path
@@ -437,18 +457,18 @@ export const BurgerMenuIcon = ({ color = '#fff', ...props }) => (
   </Svg>
 );
 
-export const LeaveIcon = ({ color = '#fff', ...props }) => (
+export const LeaveIcon = ({ color = '#E53935', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
     <Path
       d="M14 8V6C14 5.46957 13.7893 4.96086 13.4142 4.58579C13.0391 4.21071 12.5304 4 12 4H5C4.46957 4 3.96086 4.21071 3.58579 4.58579C3.21071 4.96086 3 5.46957 3 6V18C3 18.5304 3.21071 19.0391 3.58579 19.4142C3.96086 19.7893 4.46957 20 5 20H12C12.5304 20 13.0391 19.7893 13.4142 19.4142C13.7893 19.0391 14 18.5304 14 18V16"
-      stroke="#E53935"
+      stroke={color}
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <Path
       d="M9 12H21M21 12L18 9M21 12L18 15"
-      stroke="#E53935"
+      stroke={color}
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -456,12 +476,12 @@ export const LeaveIcon = ({ color = '#fff', ...props }) => (
   </Svg>
 );
 
-export const BackIcon = ({ color = '#fff', ...props }) => (
+export const BackIcon = ({ color = '#8C8C8C', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
-    <Path d="M5 12H19H5ZM5 12L9 8L5 12ZM5 12L9 16L5 12Z" fill="#8C8C8C" />
+    <Path d="M5 12H19H5ZM5 12L9 8L5 12ZM5 12L9 16L5 12Z" fill={color} />
     <Path
       d="M5 12H19M5 12L9 8M5 12L9 16"
-      stroke="#8C8C8C"
+      stroke={color}
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -578,6 +598,25 @@ export const SettingIcon = ({ color = '#8C8C8C', ...props }) => (
   </Svg>
 );
 
+export const LogoutIcon = ({ color = '#8C8C8C', ...props }) => (
+  <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+    <Path
+      d="M15 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H15"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M10 8L14 12L10 16M14 12H4"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
 export const FileIcon = ({ width = 46, height = 46, ...props }) => (
   <Svg width={width} height={height} viewBox="0 0 40 40" fill="none">
     <Rect width="40" height="40" rx="8" fill="#F2E6F6" />

package/src/components/AuthForms/Login.tsx

@@ -12,9 +12,8 @@ import {
   // signInWithGoogle,
 } from '../../networking/api-requests/auth.api';
 import { useDispatch } from 'react-redux';
-import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { secureUserStorage } from '../../helpers/secureUserStorage';
 import { setUser, unpackAndTransform } from '../../roomStore/chatSettingsSlice';
-import { localStorageConstants } from '../../helpers/constants/LOCAL_STORAGE';
 import { Text, TextInput, View } from 'react-native';
 
 interface LoginFormProps {
@@ -23,7 +22,7 @@ interface LoginFormProps {
 
 const LoginForm: React.FC<LoginFormProps> = ({ config }) => {
   const dispatch = useDispatch();
-  const { set } = useLocalStorage(localStorageConstants.ETHORA_USER);
+  const { set } = secureUserStorage();
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -64,6 +63,7 @@ const LoginForm: React.FC<LoginFormProps> = ({ config }) => {
         ...authData.data.user,
         token: authData.data.token,
         refreshToken: authData.data.refreshToken,
+        fileToken: (authData.data as any).fileToken || '',
       };
       dispatch(setUser(user));
 

package/src/components/Header/HeaderRoomList.tsx

@@ -1,11 +1,13 @@
 /** @format */
 
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import React, { FC, useMemo } from 'react';
 import { View, StyleSheet, Image, Text } from 'react-native';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { BurgerMenuIcon } from '../../assets/icons';
 import Button from '../styled/Button';
+import { useT } from '../../i18n/useT';
 
 interface HeaderRoomListProps {
   setDrawerOpen: () => void;
@@ -13,6 +15,9 @@ interface HeaderRoomListProps {
 
 export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   const { config, user, selectedUser } = useChatSettingState();
+  const t = useT();
+  const insets = useSafeAreaInsets();
+  const topInset = config?.headerLayout?.safeAreaTop ? insets.top : 0;
 
   const modalUser: any = selectedUser ?? user;
 
@@ -34,15 +39,20 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   }, [config?.backgroundChat?.image]);
 
   return (
-    <View style={styles.headerContainer}>
+    <View style={[styles.headerContainer, topInset ? { paddingTop: 16 + topInset } : null]}>
       {!config?.disableRoomMenu && config?.headerMenu ? (
         <View style={styles.leftContainer}>
           <Button
+            testID="room-list-burger"
             style={styles.menuButton}
             color="black"
             unstyled
             EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
-            onPress={() => config?.headerMenu && config?.headerMenu()}
+            onPress={() =>
+              typeof config?.headerMenu === 'function'
+                ? config.headerMenu()
+                : setDrawerOpen()
+            }
           />
         </View>
       ) : (
@@ -52,14 +62,16 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
         {config?.headerLogo ? (
           HeaderLogo
         ) : (
-          <Text style={{ fontWeight: 500, fontSize: 18 }}>Chats</Text>
+          <Text style={{ fontWeight: 500, fontSize: 18 }}>
+            {t('roomList.title')}
+          </Text>
         )}
       </View>
       <View style={styles.rightContainer}>
         <ProfileImagePlaceholder
           icon={modalUser?.profileImage ?? null}
           name={modalUser?.name ?? modalUser?.firstName}
-          size={30}
+          size={36}
           click={{
             isClick: true,
             onPress: setDrawerOpen,
@@ -76,9 +88,19 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 16,
     paddingTop: 16,
-    paddingBottom: 8,
+    paddingBottom: 12,
     minHeight: 56,
     justifyContent: 'space-between',
+    backgroundColor: '#FFFFFF',
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+    // Lifts the header off the page ground behind it.
+    shadowColor: '#101828',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+    elevation: 4,
+    zIndex: 2,
   },
   menuButton: {
     padding: 8,
@@ -86,7 +108,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   leftContainer: {
-    width: 40,
+    width: 44,
     alignItems: 'flex-start',
     justifyContent: 'center',
   },
@@ -98,7 +120,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   rightContainer: {
-    width: 40,
+    width: 44,
     alignItems: 'flex-end',
     justifyContent: 'center',
   },

package/src/components/MainComponents/ChatHeader.tsx

@@ -1,6 +1,7 @@
 /** @format */
 
 import React, { useCallback } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   CenterContainer,
   ChatContainerHeader,
@@ -28,6 +29,8 @@ import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { RoomMenu } from '../MenuRoom/MenuRoom';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useFileToken } from '../../hooks/useFileToken';
+import { appendFileToken } from '../../helpers/secureFileUrl';
 import { View, StyleSheet, Text, Keyboard } from 'react-native';
 import { getIconColor } from '../../helpers/getIconColor';
 import { resolveHeaderHeight } from '../../helpers/headerLayout';
@@ -43,6 +46,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   currentRoom,
   handleBackClick,
 }) => {
+  const fileToken = useFileToken();
   const dispatch = useDispatch();
   const { client } = useXmppClient();
 
@@ -84,12 +88,14 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   // here so `height` defines the band exactly (content centers via the
   // styled `align-items: center`); the styled 12px vertical padding would
   // otherwise add on top of it.
-  const headerHeight = resolveHeaderHeight(config?.headerLayout?.height);
+  const insets = useSafeAreaInsets();
+  const topInset = config?.headerLayout?.safeAreaTop ? insets.top : 0;
+  const headerHeight = resolveHeaderHeight(config?.headerLayout?.height) + topInset;
 
   return (
     <>
       <ChatContainerHeader
-        style={{ height: headerHeight, paddingTop: 0, paddingBottom: 0 }}
+        style={{ height: headerHeight, paddingTop: topInset, paddingBottom: 0 }}
       >
         {handleBackClick && !config?.headerChatMenu ? (
           <View style={styles.leftContainer}>
@@ -152,7 +158,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
             <ProfileImagePlaceholder
               name={currentRoom?.title || currentRoom?.name}
               size={40}
-              icon={currentRoom?.icon}
+              icon={appendFileToken(currentRoom?.icon, fileToken)}
               active={!config?.disableChatInfo?.disableChatHeaderMenu}
               click={
                 config?.disableChatInfo?.disableChatHeaderMenu