@ethora/chat-component-rn 26.8.1 → 26.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.8.1",
+  "version": "26.8.3",
   "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/EmptyChatIllustration.tsx

@@ -6,6 +6,7 @@ interface EmptyChatIllustrationProps {
   height?: number;
   /** Accent colour for the highlighted parts of the drawing. */
   color?: string;
+  panelColor?: string;
 }
 
 // Vector replacement for the legacy raster empty-state PNG (auto-traced
@@ -15,14 +16,15 @@ export const EmptyChatIllustration: React.FC<EmptyChatIllustrationProps> = ({
   width = 240,
   height = 153,
   color = '#0052CD',
+  panelColor,
 }) => (
   <Svg viewBox="0 0 2481 1578" width={width} height={height} fill="none">
     <Path fill={color} d="M1711 206h493c.16 51.98.16 51.98 1 315 4.67-23.34 4.67-23.34 5.62-31.53.12-.99.24-1.98.37-2.99 1.28-11.1 2.05-22.23 2.77-33.37.33-4.96.67-9.92 1-14.87l.51-7.5c.7-10.42 1.45-20.83 2.23-31.25.18-2.48.37-4.97.55-7.46.11-1.5.22-3 .34-4.5.09-1.27.19-2.54.28-3.85.35-3.91.82-7.79 1.33-11.68 3.41 1.93 6.74 3.83 10 6l.48-3.92c3.67-28.04 3.67-28.04 13.52-36.08 5.73-3.29 10.94-3.89 17.3-2.5 5.81 1.71 10.53 4.13 13.92 9.39 7.28 13.63 2.91 29.13-1.22 43.11.46-.32.46-.32 2.81-1.94C2280 384 2280 384 2283 383c-1.08 17.11-2.51 34.18-4.06 51.25-.09 1.04-.19 2.09-.29 3.17-.89 9.86-1.78 19.72-2.69 29.57l-1.77 19.51c-.09 1.06-.19 2.13-.29 3.22-1.04 11.6-2 23.2-2.75 34.83-.06 1.01-.13 2.02-.2 3.07-.3 4.74-.59 9.49-.85 14.25-2.46 41.87-2.46 41.87-16.29 54.82-.82.8-1.65 1.6-2.5 2.43a269 269 0 0 1-11.15 10.21c-4 3.48-7.77 7.15-11.5 10.92-.66.65-1.31 1.31-1.99 1.98-2.06 2.07-4.11 4.14-6.17 6.21-1.41 1.41-2.82 2.82-4.23 4.24-3.42 3.44-6.85 6.88-10.27 10.32 7.2 4.47 14.39 8.91 21.81 13l2.3 1.27c6.86 3.76 13.8 7.31 20.83 10.72 2.12 1.04 4.23 2.1 6.33 3.15 12.6 6.24 25.62 11.08 38.84 15.82 3.65 1.31 7.27 2.67 10.89 4.04-3.12 2.08-5.29 2.71-8.91 3.59l-3.68.9c-1.32.32-2.65.63-3.98.95l-4.07.99c-3.58.88-7.15 1.74-10.73 2.6-5.72 1.38-11.45 2.78-17.17 4.17-2.01.49-4.01.97-6.01 1.45-1.21.29-2.42.59-3.67.89-1.07.26-2.14.52-3.24.78-2.54.68-2.54.68-4.54 1.68 16.02 24.43 32.15 48.79 48.54 72.97 5.61 8.27 11.19 16.54 16.46 25.03-2.54 2.58-4.95 4.84-8 6.81-.66.44-1.32.88-2 1.33-2.53 1.09-3.45.82-6-.14-1.39-1.5-1.39-1.5-2.66-3.47q-.72-1.11-1.47-2.25c-.53-.82-1.05-1.65-1.58-2.49-.56-.86-1.12-1.72-1.7-2.6-1.22-1.87-2.43-3.74-3.63-5.62-3.23-5.01-6.49-10-9.74-14.99-.67-1.03-1.34-2.06-2.04-3.13-7.25-11.13-14.67-22.14-22.12-33.14l-3.69-5.46c-1.67-2.47-3.34-4.93-5.01-7.4-3.48-5.13-6.93-10.29-10.36-15.45-7.04 8.56-13.56 17.48-20.11 26.42-1.91 2.61-3.84 5.22-5.77 7.82-.62.85-1.25 1.7-1.9 2.58l-3.6 4.86c-2.39 3.24-4.74 6.46-6.89 9.86L2186 773h-2l2-32h-475Z" />
-    <Path fill="#f3f3f3" d="M1711 836h493v535h-493Z" />
-    <Path fill="#f1f1f1" d="M1009 836h493v535h-493Z" />
-    <Path fill="#f0f0f0" d="M307 836h493v535H307Z" />
-    <Path fill="#f1f1f1" d="M1009 206h493v535h-493Z" />
-    <Path fill="#f3f3f3" d="M307 206h493v535H307Z" />
+    <Path fill={panelColor ?? '#f3f3f3'} d="M1711 836h493v535h-493Z" />
+    <Path fill={panelColor ?? '#f1f1f1'} d="M1009 836h493v535h-493Z" />
+    <Path fill={panelColor ?? '#f0f0f0'} d="M307 836h493v535H307Z" />
+    <Path fill={panelColor ?? '#f1f1f1'} d="M1009 206h493v535h-493Z" />
+    <Path fill={panelColor ?? '#f3f3f3'} d="M307 206h493v535H307Z" />
     <Path fill="#e3ebf6" d="M1711 206h493c.04 26.42.04 26.42.25 160.12.04 16.71.07 33.41.11 50.62.02 20.35.02 20.35.02 29.87.01 6.67.02 13.33.04 20 .03 7.69.04 15.37.03 23.06 0 3.93.01 7.86.03 11.8.02 4.21.01 8.41 0 12.62.01 1.23.02 2.46.04 3.73-.05 6.36-.15 10.4-4.52 15.18-2.08 1.8-4.11 3.44-6.31 5.06-5.29 4.02-10.39 8.19-15.38 12.56-5.06 4.44-10.16 8.79-15.4 13.02q-3.27 2.655-6.51 5.34c-7.27 6.01-14.65 11.79-22.28 17.33-.77.57-1.55 1.14-2.36 1.73-.72.52-1.44 1.04-2.19 1.57-.64.47-1.28.93-1.94 1.4-1.63.99-1.63.99-3.63.99a7996 7996 0 0 1-24.36-71.91c-.7-2.07-1.39-4.14-2.08-6.22-13.77-41.08-13.77-41.08-15.68-56.43-.09-.6-.09-.6-.5-3.63-.75-5.63-1.44-11.25-2.05-16.89-4.45-40.68-15.71-89.85-48.88-117.2-12.27-9.81-25.53-16.81-40.45-21.72l-2.21-.83c-11.42-4.19-23.32-4.49-35.35-4.42-1.32-.01-2.64-.02-4-.02-8.02.01-15.59.62-23.44 2.27-.7.15-1.39.29-2.11.44-20.19 4.55-37.37 14.13-52.89 27.56-.52.39-.52.39-3.12 2.38-4.5 4.1-8.15 8.82-11.88 13.62-.67.86-1.35 1.71-2.04 2.6-29.12 38.46-31.96 81.46-27.99 127.76l.6 7.35c.53 6.39 1.06 12.77 1.6 19.15.87 10.25 1.72 20.5 2.56 30.75l.9 10.66.54 6.56c.09.98.17 1.95.26 2.95.52 6.42.66 12.78.57 19.22l-2.77-.06c-47.76-.95-47.76-.95-67.23 11.06-.77.4-1.55.81-2.34 1.22-10.73 6.42-15.63 24.2-18.66 35.52-1.05 4.22-2.03 8.46-3 12.7-.35 1.52-.71 3.04-1.06 4.57-2.53 10.95-4.91 21.93-6.94 32.99-.13.71-.26 1.43-.4 2.16-1.34 7.26-2.56 14.53-3.67 21.83-1.6 10.43-3.66 20.71-5.93 31.01l2.43.15c9.87.64 19.64 1.72 29.45 2.91l4.72.57c3.8.45 7.6.91 11.4 1.37.86 5.89 1 10.88 1 17h-58Z" />
     <Path fill="#929497" d="M1323 956c5.22 5.01 9.36 10.23 12 17 .36.91.71 1.82 1.08 2.75 1.05 3.72 1.26 7.17 1.23 11 0 .71-.01 1.41-.01 2.14-.22 9.48-2.86 16.07-8.09 23.88-1.21 2.23-1.21 2.23-1.21 6.23 1.8 1.87 1.8 1.87 4.31 3.88 20.26 17.48 33.73 44.36 40.38 69.81.2.75.4 1.5.61 2.28 3.67 14.76 3.99 29.94 3.9 45.07-.01 1.74-.01 3.49-.01 5.24-.01 4.52-.03 9.05-.05 13.58a6459 6459 0 0 0-.04 13.94c-.02 9.06-.06 18.13-.1 27.2h-20l2-25-12 25h-51l3 11v3c.85-.27 1.69-.53 2.56-.8l3.44-1.08c1.11-.34 2.23-.69 3.38-1.05.59-.18.59-.18 3.62-1.07.63-.19 1.26-.37 1.91-.57 5.07-1.4 9.83-1.76 15.09-1.74.74-.02 1.47-.03 2.23-.05 13.67-.01 26.58 3.92 39.27 8.61 1.36.5 2.73 1 4.09 1.5q3.96 1.455 7.92 2.94c2.88 1.08 5.77 2.13 8.66 3.17 9.85 3.7 15.53 9.03 21.83 17.14.92 1.13 1.83 2.26 2.75 3.38 8.7 10.85 11.86 17.67 11.68 31.58-.01 1.39-.01 2.78-.01 4.17-.01 3.68-.05 7.35-.09 11.03-.03 3.57-.04 7.15-.05 10.72-.12 23.06-.73 46.07-1.28 69.12h-342c0-75.07 0-75.07 16-93 .65-.74 1.31-1.48 1.98-2.24 11.7-12.39 26.58-21.89 41.02-30.76.62-.39 1.24-.77 1.88-1.17 18.69-11.54 37.49-15.55 59.12-14.83-.05-.28-.05-.28-.28-1.69-.41-2.58-.82-5.17-1.22-7.75-.14-.88-.29-1.75-.43-2.66-.14-.87-.27-1.75-.41-2.65-.07-.39-.07-.39-.38-2.39-.38-3.94-.28-7.91-.28-11.86h-26c0-10.12 0-10.12.44-14.04.09-.82.18-1.65.27-2.5.1-.84.19-1.67.29-2.52.1-.87.19-1.73.29-2.63.23-2.1.47-4.21.71-6.31-.39.81-.78 1.63-1.18 2.46-1.44 3.01-2.88 6.02-4.32 9.02-.62 1.3-1.25 2.61-1.87 3.91-.89 1.87-1.79 3.74-2.69 5.61-.54 1.12-1.08 2.25-1.63 3.41-1.31 2.59-1.31 2.59-2.31 3.59-2 .09-4 .11-6 .1-1.22-.01-2.43-.01-3.69-.01l-3.87-.03c-1.29 0-2.57-.01-3.89-.01-3.18-.01-6.37-.03-9.55-.05-.07-12.28-.12-24.57-.16-36.85-.01-5.71-.03-11.42-.07-17.12-.03-5.53-.05-11.05-.05-16.58-.01-2.09-.02-4.18-.04-6.27-.29-38.87 9.23-73.92 36.68-102.5 17.93-18.17 42.46-31.74 68.45-32.02 4.07.04 8.13.16 12.19.34.04-.48.04-.48.26-2.93 1.29-11.98 4.39-21.82 13.74-30.07C1284.67 943.27 1305.41 941.47 1323 956" />
     <Path fill="#6d6e70" d="M1266.323 353.996c15.96 13.18 27.13 28.22 35.68 47 .41.89.82 1.77 1.24 2.68 3.23 7.46 5.02 15.4 6.76 23.32.23 1.04.46 2.08.69 3.15 5.34 28.67-1.52 57.35-14.69 82.85.63-.04 1.26-.09 1.91-.14 15.68-.63 30.19 5.78 41.96 15.89 9.42 9.07 17.45 22.28 18.27 35.62.03 2.65.04 5.3.04 7.95.02.91.03 1.82.04 2.76.02 8.15-1.52 14.72-4.79 22.24-1.24 2.89-2.44 5.7-3.43 8.68.71.25 1.42.49 2.15.75 22.87 7.92 45.85 16.07 66.85 28.25.82.38 1.65.76 2.49 1.15 3.37 2.49 4.21 5.36 5.41 9.21.12.37.12.37.74 2.22.78 2.39 1.54 4.78 2.29 7.17.54 1.65 1.07 3.29 1.6 4.93 8.93 27.74 13.47 51.91 13.47 81.32h-343c0-9.31.4-18.09 1.31-27.31.12-1.3.24-2.6.36-3.93 2.76-28.49 2.76-28.49 8.95-34.16 1.12-.85 2.24-1.7 3.38-2.53 1.27-.97 2.55-1.94 3.82-2.91.34-.26.34-.26 2.06-1.55 2.91-2.21 5.79-4.46 8.67-6.72 8.73-6.82 17.53-13.56 26.34-20.28 2.12-1.61 4.24-3.23 6.35-4.85.71-.54 1.41-1.07 2.13-1.63q2.13-1.62 4.23-3.27c3.58-2.78 7.17-5.39 11-7.82 11.75-7.74 15.73-15.37 18.68-29.09.72-1.95.72-1.95 3.72-3.95 2.02-.51 2.02-.51 4.38-.9 23.63-4.24 49.27-10.92 69.62-24.1.98-.57 1.97-1.15 2.98-1.75 2.02-2.25 2.02-2.25 2.05-5.92-.93-4.73-2.72-9.09-4.6-13.51-.72-1.77-1.45-3.53-2.17-5.29l-1.13-2.75c-2.57-6.32-4.96-12.72-7.36-19.11-1.02-2.73-2.09-5.4-3.23-8.08-2.76-6.57-2.55-10.8-.54-17.59 4.29-16.71.74-36.39-7.78-51.05-2.58-4.12-5.28-8.09-8.22-11.95-.06.76-.12 1.52-.19 2.3-.08 1-.16 1.99-.25 3.02-.04.49-.04.49-.25 2.98-.31 2.7-.31 2.7-1.31 5.7-4.29-.51-8.55-1.07-12.82-1.75-34.72-5.48-58.39 2.43-87.18 21.75-1.31.99-2.62 1.97-3.93 2.96-1.01.68-2.03 1.35-3.07 2.04l-3-1c-.79-1.75-.79-1.75-1.35-4-.22-.8-.43-1.6-.64-2.43-.21-.85-.42-1.69-.64-2.57-.42-1.66-.85-3.33-1.29-5-.18-.74-.37-1.48-.56-2.25-.52-1.75-.52-1.75-1.52-2.75-.66 1.83-1.3 3.67-1.94 5.5-.36 1.02-.72 2.05-1.09 3.1-5.41 18.93-2.03 38.99 7.05 56.11 9.57 15.93 24.78 27.29 42.79 31.98.75.15 1.5.3 2.27.45 5.01 2.26 7 10.32 9.1 15.11.19.42.19.42 1.12 2.51 2.7 6.11 2.7 6.11 2.7 7.24-20.13 2-42.48-8.98-58-21-4.17-3.49-8.09-7.22-12-11-.73-.66-1.46-1.33-2.22-2.02-20-18.77-31.89-48.87-32.89-75.95-.06-3.42-.08-6.85-.08-10.28-.01-1.15-.02-2.3-.04-3.48-.05-32.92 15.07-62.52 37.66-85.77 38.99-36.81 100.78-39.86 142.89-6.5" />

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,42 @@ export const BurgerMenuIcon = ({ color = '#fff', ...props }) => (
   </Svg>
 );
 
-export const LeaveIcon = ({ color = '#fff', ...props }) => (
+export const BellIcon = ({ color = '#141414', ...props }) => (
+  <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+    <Path
+      d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const BellOffIcon = ({ color = '#141414', ...props }) => (
+  <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+    <Path
+      d="M13.73 21a2 2 0 0 1-3.46 0M18.63 13A17.9 17.9 0 0 1 18 8M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14M18 8a6 6 0 0 0-9.33-5M1 1l22 22"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+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 +500,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 +622,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,10 +12,10 @@ 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';
+import { useTheme } from '../../hooks/useTheme';
 
 interface LoginFormProps {
   config?: IConfig;
@@ -23,7 +23,8 @@ interface LoginFormProps {
 
 const LoginForm: React.FC<LoginFormProps> = ({ config }) => {
   const dispatch = useDispatch();
-  const { set } = useLocalStorage(localStorageConstants.ETHORA_USER);
+  const { set } = secureUserStorage();
+  const theme = useTheme();
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -64,6 +65,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));
 
@@ -205,9 +207,9 @@ const LoginForm: React.FC<LoginFormProps> = ({ config }) => {
           style={{
             width: '100%',
             height: 40,
-            backgroundColor: config?.colors?.primary || '#0052CD',
+            backgroundColor: theme.primary,
           }}
-          color="white"
+          color={theme.textOnPrimary}
           disabled={isLoading}
           loading={isLoading}
         />
@@ -223,11 +225,11 @@ const LoginForm: React.FC<LoginFormProps> = ({ config }) => {
           </>
         )}
         <View>
-          <Text>Don't have an account? </Text>
+          <Text style={{ color: theme.text }}>Don't have an account? </Text>
           <Text
             style={{
               textDecorationLine: 'underline',
-              color: '#0052CD',
+              color: theme.primary,
               fontSize: 14,
               display: 'flex',
               fontWeight: '400',
@@ -247,13 +249,13 @@ const FormContainer = styled.View`
   justify-content: center;
   align-items: center;
   width: 100%;
-  background-color: #f5f5f5;
+  background-color: ${({ theme }) => theme.listBackground};
 `;
 
 const Form = styled.View`
   flex-direction: column;
   align-items: center;
-  background-color: white;
+  background-color: ${({ theme }) => theme.surface};
   padding: 30px;
   border-radius: 8px;
   width: 300px;
@@ -261,7 +263,7 @@ const Form = styled.View`
 `;
 
 const ErrorMessage = styled.Text`
-  color: red;
+  color: ${({ theme }) => theme.danger};
   font-size: 12px;
   margin-bottom: 10px;
 `;
@@ -271,7 +273,7 @@ const Delimiter = styled.Text`
   position: relative;
   width: 100%;
   font-size: 14px;
-  color: #999;
+  color: ${({ theme }) => theme.textMuted};
 
   &::before,
   &::after {
@@ -280,7 +282,7 @@ const Delimiter = styled.Text`
     top: 50%;
     width: 45%;
     height: 1px;
-    background: #ccc;
+    background: ${({ theme }) => theme.border};
   }
 
   &::before {

package/src/components/ContextMenu/ContextMenuComponents.tsx

@@ -12,7 +12,7 @@ export const ReactionContainer = styled.View`
   gap: 8px;
   padding: 8px;
   justify-content: space-around;
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
   border-radius: 12px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 `;
@@ -41,10 +41,10 @@ export const ArrowButton = styled.View<{ isRotated: boolean }>`
 export const ContextMenu = styled.View`
   position: absolute;
   z-index: 1000;
-  background-color: white;
+  background-color: ${({ theme }) => theme.surface};
   border-radius: 8px;
   elevation: 4;
-  shadow-color: #121219;
+  shadow-color: ${({ theme }) => theme.shadow};
   shadow-offset: 0px 4px;
   shadow-opacity: 0.1;
   shadow-radius: 6px;
@@ -79,7 +79,7 @@ export const Overlay = styled.Pressable`
 export const Delimeter = styled.View`
   height: 1px;
   align-self: stretch;
-  background-color: #0052cd1f;
+  background-color: ${({ theme }) => theme.surfaceHighlight};
   margin-top: 4px;
   margin-bottom: 4px;
 `;

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -13,6 +13,7 @@ import { BurgerMenuIcon } from '../../assets/icons';
 import { IConfig } from '../../types/types';
 import Button from '../styled/Button';
 import { getIconColor } from '../../helpers/getIconColor';
+import { useTheme } from '../../hooks/useTheme';
 
 const positionMenu = {
   right: { top: 95, right: 10 },
@@ -45,6 +46,7 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({
   config,
   onClose,
 }) => {
+  const theme = useTheme();
   const [isOpen, setIsOpen] = useState(false);
   const menuRef = useRef<View>(null);
 
@@ -119,7 +121,7 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({
           }}
         >
           <TouchableOpacity
-            style={styles.overlay}
+            style={[styles.overlay, { backgroundColor: theme.overlay }]}
             activeOpacity={1}
             onPress={() => {
               setIsOpen(false);
@@ -134,9 +136,11 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({
                     styles.menu,
                     positionMenu[position],
                     {
+                      shadowColor: theme.shadow,
                       opacity: fadeAnim,
                       transform: [{ translateY: translateYAnim }],
                     },
+                    theme.dark && { backgroundColor: theme.surface },
                   ]}
                 >
               {options.map((option, index) => (
@@ -163,12 +167,19 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({
                     >
                       {option.icon}
                     </View>
-                    <Text style={[styles.label, option?.styles]}>
+                    <Text
+                      style={[styles.label, { color: theme.text }, option?.styles]}
+                    >
                       {option.label}
                     </Text>
                   </TouchableOpacity>
                   {index < options.length - 1 && (
-                    <View style={styles.divider} />
+                    <View
+                      style={[
+                        styles.divider,
+                        { backgroundColor: theme.surfaceHighlight },
+                      ]}
+                    />
                   )}
                 </View>
               ))}
@@ -193,7 +204,6 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
     height: '100%',
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
   },
   menuContainer: {
     flex: 1,
@@ -219,7 +229,6 @@ const styles = StyleSheet.create({
     minWidth: 150,
     zIndex: 1000,
     elevation: 10, // Android
-    shadowColor: '#121219', // iOS
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.3,
     shadowRadius: 6,
@@ -240,6 +249,5 @@ const styles = StyleSheet.create({
   divider: {
     height: 1,
     width: '100%',
-    backgroundColor: '#0052cd0d',
   },
 });

package/src/components/ExampleComponents/CustomMessage.tsx

@@ -13,8 +13,9 @@ export const MessageContainer = styled.View<{ isUser: boolean }>`
 `;
 
 export const MessageBubble = styled.View<{ isUser: boolean }>`
-  background-color: ${(props) => (!props.isUser ? '#f1f0f0' : '#0052CD')};
-  color: ${(props) => (!props.isUser ? '#000' : '#fff')};
+  background-color: ${({ isUser, theme }) =>
+    !isUser ? theme.surfaceSecondary : theme.primary};
+  color: ${({ isUser, theme }) => (!isUser ? theme.text : theme.textOnPrimary)};
   border-radius: 12px;
   padding: 10px;
   max-width: 60%;
@@ -27,14 +28,14 @@ export const MessageText = styled.View`
 
 export const UserName = styled.Text<{ isUser: boolean; color?: string }>`
   font-weight: bold;
-  color: ${(props) =>
-    props.color ? props.color : props.isUser ? '#0052CD' : '#333'};
+  color: ${({ color, isUser, theme }) =>
+    color ? color : isUser ? theme.primary : theme.text};
   margin-right: 8px;
 `;
 
 export const MessageTimestamp = styled.Text`
   font-size: 13px;
-  color: #999;
+  color: ${({ theme }) => theme.textMuted};
   margin-left: 8px;
 `;
 
@@ -50,8 +51,8 @@ export const MessagePhotoContainer = styled.Text`
 `;
 
 export const SystemMessage = styled.Text`
-  background-color: #e0e0e0;
-  color: #555;
+  background-color: ${({ theme }) => theme.systemMessageBackground};
+  color: ${({ theme }) => theme.textSecondary};
   text-align: center;
   padding: 8px;
   border-radius: 8px;
@@ -62,7 +63,7 @@ export const SystemMessage = styled.Text`
 export const SystemMessageText = styled.Text`
   margin: 0;
   font-size: 14px;
-  color: #333;
+  color: ${({ theme }) => theme.text};
 `;
 
 const CustomMessageExample = forwardRef<View, MessageProps>(

package/src/components/ExampleComponents/CustomTypingIndicatorExamples.tsx

@@ -96,7 +96,7 @@ const Dot = styled(Animated.View)`
   width: 6px;
   height: 6px;
   border-radius: 3px;
-  background-color: #666;
+  background-color: ${({ theme }) => theme.textSecondary};
   margin: 0 2px;
 `;
 
@@ -132,7 +132,7 @@ export const MinimalTypingIndicator: React.FC<Props> = ({ isVisible }) => {
 };
 
 const Bubble = styled.View`
-  background-color: #f0f0f0;
+  background-color: ${({ theme }) => theme.surfaceSecondary};
   border-radius: 18px;
   padding: 8px 16px;
   margin: 4px 0;
@@ -142,7 +142,7 @@ const Bubble = styled.View`
 
 const BubbleText = styled.Text`
   font-size: 14px;
-  color: #666;
+  color: ${({ theme }) => theme.textSecondary};
 `;
 
 const BubbleTail = styled.View`
@@ -156,7 +156,7 @@ const BubbleTail = styled.View`
   border-top-width: 6px;
   border-left-color: transparent;
   border-right-color: transparent;
-  border-top-color: #f0f0f0;
+  border-top-color: ${({ theme }) => theme.surfaceSecondary};
 `;
 
 const BubbleWrapper = styled.View`
@@ -187,7 +187,7 @@ const ProgressWrap = styled.View`
 
 const ProgressLabel = styled.Text`
   font-size: 12px;
-  color: #666;
+  color: ${({ theme }) => theme.textSecondary};
   margin-right: 8px;
 `;
 
@@ -202,7 +202,7 @@ const Bar = styled.View`
 const Runner = styled(Animated.View)`
   width: 60px;
   height: 4px;
-  background-color: #007bff;
+  background-color: ${({ theme }) => theme.primary};
 `;
 
 export const ProgressTypingIndicator: React.FC<Props> = ({ text, isVisible }) => {