@ethora/chat-component-rn 26.7.9 → 26.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.7.9",
+  "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

package/src/components/MainComponents/ChatRoom.tsx

@@ -20,7 +20,6 @@ import NewChatModal from '../Modals/NewChatModal/NewChatModal';
 import { EditWrapper } from './EditWrapper';
 import { EmptyChatIllustration } from '../../assets/EmptyChatIllustration';
 import { getIconColor } from '../../helpers/getIconColor';
-import { getChatBackgroundColor } from '../../helpers/getChatBackground';
 import { ChooseChatMessage } from './ChooseChatMessage';
 import { useRoomUrl } from '../../hooks/useRoomUrl';
 import { useSendMessage } from '../../hooks/useSendMessage';
@@ -28,14 +27,10 @@ import { IConfig } from '../../types/models/config.model';
 import { useRoomInitialization } from '../../hooks/useRoomInitialization';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
-import { isOwnMessage } from '../../helpers/isOwnMessage';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 // import {PanGestureHandler} from 'react-native-gesture-handler';
 import { FlatList } from 'react-native';
 import {
-  AppState,
-  AppStateStatus,
-  Keyboard,
   Platform,
   TouchableWithoutFeedback,
   View,
@@ -47,7 +42,6 @@ import {
 } from 'react-native-keyboard-controller';
 import useComposing from '../../hooks/useComposing';
 import { store } from '../../roomStore';
-import { getServerReadTimestamp } from '../../helpers/getServerReadTimestamp';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   getInputDockPaddingBottom,
@@ -112,45 +106,6 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       configWithEventHandlers || storeConfig,
     );
 
-    // Under the sticky keyboard strategy, the input dock's position is
-    // driven by KeyboardStickyView's native-animated offset. If the app
-    // is backgrounded while the keyboard-close animation hasn't finished,
-    // the OS removes the keyboard from the app-switcher snapshot but the
-    // shared value hasn't caught up to "closed" yet, so the input appears
-    // to float in that preview.
-    //
-    // NOTE on what this does and doesn't fix: iOS actually captures that
-    // preview during the active→inactive transition, BEFORE 'background'
-    // fires — so dismissing here on 'background' lands too late to affect
-    // the snapshot already taken, and is effectively a no-op for the exact
-    // iOS symptom in bug #37. An earlier version keyed this off 'inactive'
-    // instead, which does land in time, but 'inactive' also fires for
-    // Control Center, share sheets, and permission prompts — none of which
-    // should close the user's keyboard — so that traded a rare cosmetic
-    // preview glitch for a much more common false dismissal. Kept on
-    // 'background': it still resets the offset for genuine backgrounding
-    // (home button, app switch) and for Android's recents preview (RN's
-    // AppState has no 'inactive' there), at the cost of leaving the iOS
-    // switcher-preview glitch itself unresolved. Both symptoms are cosmetic
-    // per the QA report, which explicitly accepted leaving this imperfect
-    // rather than risk destabilizing the sticky strategy. Sticky-only;
-    // doesn't touch the other keyboard strategies.
-    const stickyInputEnabled =
-      !configWithEventHandlers?.disableKeyboardAvoidingView &&
-      !!configWithEventHandlers?.keyboardStickyInput;
-    useEffect(() => {
-      if (!stickyInputEnabled) {
-        return;
-      }
-      const onAppStateChange = (nextState: AppStateStatus) => {
-        if (nextState === 'background') {
-          Keyboard.dismiss();
-        }
-      };
-      const subscription = AppState.addEventListener('change', onAppStateChange);
-      return () => subscription.remove();
-    }, [stickyInputEnabled]);
-
     const sendMessage = useCallback(
       (message: string) => {
         if (!activeRoomJID) {
@@ -215,55 +170,27 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       clientRef.current = client;
     }, [client]);
 
-    // Tracks what the user actually saw: `null` while they're at the
-    // bottom (safe to mark everything read), or the timestamp of the
-    // newest message visible when they scrolled away from it. Reported
-    // by MessageList via onReadBoundaryChange. Without this, leaving a
-    // room (or backgrounding) while scrolled up stamped `now()` as read
-    // and silently discarded genuinely-unread messages. Customer-
-    // reported #33.
-    const readBoundaryRef = useRef<number | null>(null);
-    const handleReadBoundaryChange = useCallback((boundaryTs: number | null) => {
-      readBoundaryRef.current = boundaryTs;
-    }, []);
-
     useEffect(() => {
       if (!activeRoomJID) {
         return;
       }
 
-      readBoundaryRef.current = null;
       dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
       setIsLoadingMore(false);
       return () => {
-        const rooms = store.getState().rooms?.rooms;
-        const heapState = store.getState().roomHeapSlice;
-        // Fall back to the newest server-acked message, never the device
-        // clock: a fast device clock would write a future marker that the
-        // forward-only private-store merge could never correct (bug #38).
-        const timestamp =
-          readBoundaryRef.current ??
-          getServerReadTimestamp(rooms?.[activeRoomJID], heapState);
-        if (timestamp > 0) {
-          dispatch(
-            setLastViewedTimestamp({
-              chatJID: activeRoomJID,
-              timestamp,
-            }),
-          );
-        }
+        const timestamp = new Date().getTime();
+        dispatch(
+          setLastViewedTimestamp({
+            chatJID: activeRoomJID,
+            timestamp,
+          }),
+        );
         dispatch(clearVisibleRoom());
         const liveClient = clientRef.current;
         if (liveClient) {
           liveClient
-            .flushLastViewedToPrivateStoreStanza(rooms, {
+            .flushLastViewedToPrivateStoreStanza(store.getState().rooms?.rooms, {
               visibleRoomJID: activeRoomJID,
-              // Carry the same boundary to the SERVER marker. Without
-              // this the flush defaults to "everything" for the visible
-              // room, so messages the user never scrolled down to come
-              // back as read on the next login — the local count was
-              // right but the server overrode it.
-              visibleRoomTs: readBoundaryRef.current,
             })
             .catch(() => {});
         }
@@ -352,20 +279,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       ? KeyboardStickyView
       : View;
     const inputDockProps: any = {
-      // The dock carries the composer's white surface all the way to the
-      // bottom edge, so it needs the same rounded top and upward shadow —
-      // a square white block behind a rounded composer just hid the corners.
-      style: {
-        paddingBottom: inputDockPaddingBottom,
-        backgroundColor: '#fff',
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-        shadowColor: '#101828',
-        shadowOffset: { width: 0, height: -4 },
-        shadowOpacity: 0.06,
-        shadowRadius: 12,
-        elevation: 8,
-      },
+      style: { paddingBottom: inputDockPaddingBottom, backgroundColor: '#fff' },
       ...(stickyInput
         ? { offset: { closed: 0, opened: keyboardVerticalOffset } }
         : {}),
@@ -374,15 +288,11 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     return (
       <KeyboardWrapper {...keyboardWrapperProps}>
         <ChatContainer
-          // The conversation's own colour, not white: the header's rounded
-          // bottom corners and the composer's rounded top corners reveal
-          // THIS view, so a white parent made both look square.
-          style={[
-            { backgroundColor: getChatBackgroundColor(configWithEventHandlers) },
-            configWithEventHandlers?.chatRoomStyles as
-              | import('react-native').ViewStyle
-              | undefined,
-          ]}
+          style={
+            configWithEventHandlers?.chatRoomStyles
+              ? (configWithEventHandlers.chatRoomStyles as import('react-native').ViewStyle)
+              : undefined
+          }
         >
           {!configWithEventHandlers?.disableHeader && (
             <ChatHeader
@@ -421,11 +331,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   flex: 1,
                   justifyContent: 'center',
                   alignItems: 'center',
-                  // Empty rooms used to flip to white, which broke the
-                  // header's rounded corners in exactly the same way.
-                  backgroundColor: getChatBackgroundColor(
-                    configWithEventHandlers
-                  ),
+                  backgroundColor: '#ffffff',
                 }}
               >
                 <NoMessagesPlaceholder />
@@ -451,7 +357,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   CustomMessageComponent ? (
                     <CustomMessageComponent
                       message={decorated.message}
-                      isUser={isOwnMessage(decorated.message, user)}
+                      isUser={decorated.message.user.id === user.xmppUsername}
                       isReply={false}
                     />
                   ) : null
@@ -498,7 +404,6 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                 config={configWithEventHandlers}
                 loading={isLoadingMore}
                 isReply={false}
-                onReadBoundaryChange={handleReadBoundaryChange}
               />
             )}
           </View>