@ethora/chat-component-rn 26.7.10 → 26.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.7.10",
+  "version": "26.8.1",
   "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,7 +48,6 @@
     "@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",
@@ -56,7 +55,6 @@
     "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",
@@ -94,9 +92,6 @@
     "expo-audio": {
       "optional": true
     },
-    "expo-blur": {
-      "optional": true
-    },
     "expo-clipboard": {
       "optional": true
     },
@@ -118,9 +113,6 @@
     "expo-media-library": {
       "optional": true
     },
-    "expo-secure-store": {
-      "optional": true
-    },
     "expo-video": {
       "optional": true
     }
@@ -135,6 +127,7 @@
     "fix-prebuild-deps": "node scripts/fix-prebuild-deps.js",
     "lint": "eslint .",
     "test": "jest",
+    "version": "node scripts/sync-version.mjs",
     "build": "bob build",
     "clean": "rm -rf lib",
     "prepack": "npm run clean && npm run build",
@@ -146,9 +139,8 @@
     "@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.22.3",
+    "react-native-keyboard-controller": "^1.18.5",
     "react-native-webview": "^13.16.1",
     "react-redux": "^9.2.0",
     "styled-components": "^6.1.13"
@@ -157,48 +149,44 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
-    "@livekit/react-native": "2.12.0",
-    "@livekit/react-native-webrtc": "144.1.2",
+    "@livekit/react-native": "2.7.6",
+    "@livekit/react-native-webrtc": "125.0.11",
     "@react-native-async-storage/async-storage": "2.2.0",
-    "@react-native-community/netinfo": "12.0.1",
-    "@react-native/eslint-config": "^0.86.2",
-    "@types/crypto-js": "^4.2.2",
+    "@react-native-community/netinfo": "11.4.1",
     "@types/jest": "^29.5.12",
-    "@types/react": "~19.2.0",
+    "@types/react": "~19.1.0",
     "@types/react-test-renderer": "^19.1.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
-    "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",
+    "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",
     "jest": "^29.6.3",
-    "jest-expo": "~57.0.4",
-    "livekit-client": "2.21.0",
+    "jest-expo": "~54.0.0",
+    "livekit-client": "2.9.0",
     "patch-package": "^8.0.1",
     "prettier": "2.8.8",
-    "react": "19.2.8",
-    "react-native": "0.86.2",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-builder-bob": "^0.41.0",
     "react-native-callkeep": "4.3.16",
-    "react-native-gesture-handler": "~2.32.0",
+    "react-native-gesture-handler": "~2.28.0",
     "react-native-get-random-values": "~1.11.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-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-qr-code": "^2.0.15",
-    "react-test-renderer": "19.2.8",
+    "react-test-renderer": "19.1.0",
     "typescript": "~5.9.0"
   },
   "engines": {

package/src/assets/icons.tsx

@@ -271,18 +271,18 @@ export const NoMessages = ({
   </Svg>
 );
 
-export const ReportIcon = ({ color = '#E53935', ...props }) => (
+export const ReportIcon = ({ color = '#8C8C8C', ...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={color}
+      stroke="#E53935"
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <Path
       d="M12 7V13M12 16H12.01"
-      stroke={color}
+      stroke="#E53935"
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -333,26 +333,6 @@ 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
@@ -457,18 +437,18 @@ export const BurgerMenuIcon = ({ color = '#fff', ...props }) => (
   </Svg>
 );
 
-export const LeaveIcon = ({ color = '#E53935', ...props }) => (
+export const LeaveIcon = ({ color = '#fff', ...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={color}
+      stroke="#E53935"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <Path
       d="M9 12H21M21 12L18 9M21 12L18 15"
-      stroke={color}
+      stroke="#E53935"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -476,12 +456,12 @@ export const LeaveIcon = ({ color = '#E53935', ...props }) => (
   </Svg>
 );
 
-export const BackIcon = ({ color = '#8C8C8C', ...props }) => (
+export const BackIcon = ({ color = '#fff', ...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={color} />
+    <Path d="M5 12H19H5ZM5 12L9 8L5 12ZM5 12L9 16L5 12Z" fill="#8C8C8C" />
     <Path
       d="M5 12H19M5 12L9 8M5 12L9 16"
-      stroke={color}
+      stroke="#8C8C8C"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -598,25 +578,6 @@ 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,8 +12,9 @@ import {
   // signInWithGoogle,
 } from '../../networking/api-requests/auth.api';
 import { useDispatch } from 'react-redux';
-import { secureUserStorage } from '../../helpers/secureUserStorage';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { setUser, unpackAndTransform } from '../../roomStore/chatSettingsSlice';
+import { localStorageConstants } from '../../helpers/constants/LOCAL_STORAGE';
 import { Text, TextInput, View } from 'react-native';
 
 interface LoginFormProps {
@@ -22,7 +23,7 @@ interface LoginFormProps {
 
 const LoginForm: React.FC<LoginFormProps> = ({ config }) => {
   const dispatch = useDispatch();
-  const { set } = secureUserStorage();
+  const { set } = useLocalStorage(localStorageConstants.ETHORA_USER);
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -63,7 +64,6 @@ 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,6 +1,5 @@
 /** @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';
@@ -14,8 +13,6 @@ interface HeaderRoomListProps {
 
 export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   const { config, user, selectedUser } = useChatSettingState();
-  const insets = useSafeAreaInsets();
-  const topInset = config?.headerLayout?.safeAreaTop ? insets.top : 0;
 
   const modalUser: any = selectedUser ?? user;
 
@@ -37,20 +34,15 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   }, [config?.backgroundChat?.image]);
 
   return (
-    <View style={[styles.headerContainer, topInset ? { paddingTop: 16 + topInset } : null]}>
+    <View style={styles.headerContainer}>
       {!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={() =>
-              typeof config?.headerMenu === 'function'
-                ? config.headerMenu()
-                : setDrawerOpen()
-            }
+            onPress={() => config?.headerMenu && config?.headerMenu()}
           />
         </View>
       ) : (
@@ -67,7 +59,7 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
         <ProfileImagePlaceholder
           icon={modalUser?.profileImage ?? null}
           name={modalUser?.name ?? modalUser?.firstName}
-          size={36}
+          size={30}
           click={{
             isClick: true,
             onPress: setDrawerOpen,
@@ -84,19 +76,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 16,
     paddingTop: 16,
-    paddingBottom: 12,
+    paddingBottom: 8,
     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,
@@ -104,7 +86,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   leftContainer: {
-    width: 44,
+    width: 40,
     alignItems: 'flex-start',
     justifyContent: 'center',
   },
@@ -116,7 +98,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   rightContainer: {
-    width: 44,
+    width: 40,
     alignItems: 'flex-end',
     justifyContent: 'center',
   },

package/src/components/MainComponents/ChatHeader.tsx

@@ -1,7 +1,6 @@
 /** @format */
 
 import React, { useCallback } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   CenterContainer,
   ChatContainerHeader,
@@ -29,8 +28,6 @@ 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';
@@ -46,7 +43,6 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   currentRoom,
   handleBackClick,
 }) => {
-  const fileToken = useFileToken();
   const dispatch = useDispatch();
   const { client } = useXmppClient();
 
@@ -88,14 +84,12 @@ 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 insets = useSafeAreaInsets();
-  const topInset = config?.headerLayout?.safeAreaTop ? insets.top : 0;
-  const headerHeight = resolveHeaderHeight(config?.headerLayout?.height) + topInset;
+  const headerHeight = resolveHeaderHeight(config?.headerLayout?.height);
 
   return (
     <>
       <ChatContainerHeader
-        style={{ height: headerHeight, paddingTop: topInset, paddingBottom: 0 }}
+        style={{ height: headerHeight, paddingTop: 0, paddingBottom: 0 }}
       >
         {handleBackClick && !config?.headerChatMenu ? (
           <View style={styles.leftContainer}>
@@ -158,7 +152,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
             <ProfileImagePlaceholder
               name={currentRoom?.title || currentRoom?.name}
               size={40}
-              icon={appendFileToken(currentRoom?.icon, fileToken)}
+              icon={currentRoom?.icon}
               active={!config?.disableChatInfo?.disableChatHeaderMenu}
               click={
                 config?.disableChatInfo?.disableChatHeaderMenu