@ethora/chat-component-rn 26.5.5 → 26.5.10

package/src/components/MainComponents/ChatWrapper.tsx

@@ -9,6 +9,7 @@ import {
 } from '../../roomStore/chatSettingsSlice';
 import {ChatWrapperBox} from '../styled/ChatWrapperBox';
 import {Overlay, StyledModal} from '../styled/MediaModal';
+import ConnectionBanner from './ConnectionBanner';
 import {Message} from '../MessageBubble/Message';
 import {IConfig, IRoom, MessageProps, ModalType, User} from '../../types/types';
 import {useXmppClient} from '../../context/xmppProvider';
@@ -30,6 +31,7 @@ import {ModalWrapper} from '../Modals/ModalWrapper/ModalWrapper';
 import {useChatSettingState} from '../../hooks/useChatSettingState';
 import {DeviceEventEmitter, Pressable, Text, View} from 'react-native';
 import {pushLog as devPushLog} from '../../utils/devLogger';
+import {normalizeRoomJid} from '../../helpers/normalizeRoomJid';
 
 interface ChatWrapperProps {
   token?: string;
@@ -126,7 +128,11 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
   useEffect(() => {
     if (roomJID) {
-      dispatch(setCurrentRoom({roomJID: roomJID}));
+      dispatch(
+        setCurrentRoom({
+          roomJID: normalizeRoomJid(roomJID, config?.xmppSettings?.conference),
+        }),
+      );
     }
 
     const initXmmpClient = async () => {
@@ -186,45 +192,79 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
         if (!client && !storedClient) {
           devPushLog('rn', 'ChatWrapper: initing xmpp client (legacy path)');
-          await initializeClient(
-            user.xmppUsername || user.defaultWallet?.walletAddress,
-            user.xmppPassword,
-            config?.xmppSettings
-          ).then(c => {
-            c.getRoomsStanza()
-              .then(() => {
-                c.getChatsPrivateStoreRequestStanza();
-                dispatch(setStoreClient(c));
-                setClient(c);
-              })
-              .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
-          });
+          // The outer `.then(c => {...})` used to lack a `.catch()` —
+          // if initializeClient rejected (network / SASL), the outer
+          // try/catch couldn't see it because the rejection happens in
+          // the .then handler, not in the awaited promise itself.
+          // Convert to await + try/catch.
+          try {
+            const c = await initializeClient(
+              user.xmppUsername || user.defaultWallet?.walletAddress,
+              user.xmppPassword,
+              config?.xmppSettings
+            );
+            try {
+              await c.getRoomsStanza();
+              c.getChatsPrivateStoreRequestStanza().catch((err: unknown) =>
+                console.warn('getChatsPrivateStoreRequestStanza failed', err)
+              );
+              dispatch(setStoreClient(c));
+              setClient(c);
+            } catch (err) {
+              console.warn('getRoomsStanza failed', err);
+            }
+          } catch (err) {
+            devPushLog('warn', 'initializeClient failed (legacy path)', err);
+          }
           setInited(true);
-          if (config?.refreshTokens?.enabled) {refresh();}
+          if (config?.refreshTokens?.enabled) {
+            // refresh() is fire-and-forget but rejects on bad
+            // refreshToken / network — surface via .catch instead of
+            // leaving the rejection unhandled (was bug #4, id:2).
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         } else if (storedClient) {
           devPushLog('rn', 'ChatWrapper: reusing storedClient');
           setClient(storedClient);
           if (!activeRoomJID) {
             storedClient.getRoomsStanza()
               .then(() => {
-                storedClient.getChatsPrivateStoreRequestStanza();
+                storedClient.getChatsPrivateStoreRequestStanza().catch(
+                  (err: unknown) =>
+                    console.warn('getChatsPrivateStoreRequestStanza failed', err)
+                );
               })
               .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
           }
           setInited(true);
-          if (config?.refreshTokens?.enabled) {refresh();}
+          if (config?.refreshTokens?.enabled) {
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         } else if (client) {
           devPushLog('rn', 'ChatWrapper: reusing provider client');
           if (!activeRoomJID) {
             client.getRoomsStanza()
               .then(() => {
-                client.getChatsPrivateStoreRequestStanza();
+                client.getChatsPrivateStoreRequestStanza().catch(
+                  (err: unknown) =>
+                    console.warn('getChatsPrivateStoreRequestStanza failed', err)
+                );
               })
               .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
           }
-          client.getChatsPrivateStoreRequestStanza();
+          client.getChatsPrivateStoreRequestStanza().catch((err: unknown) =>
+            console.warn('getChatsPrivateStoreRequestStanza failed', err)
+          );
           setInited(true);
-          if (config?.refreshTokens?.enabled) {refresh();}
+          if (config?.refreshTokens?.enabled) {
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         }
 
         dispatch(setIsLoading({loading: false}));
@@ -250,6 +290,38 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     config?.initBeforeLoad,
   ]);
 
+  // Cache-first display (initBeforeLoad). The main effect above only marks
+  // the chat `inited` once the provider bootstrap reaches 'ready' — which
+  // waits on the cold XMPP connect. On re-entry that left the user staring
+  // at a loader while fully-cached rooms/messages sat in redux-persist
+  // ("pulls a new connection for 100 years"). Here we render the cached
+  // content the instant rehydration lands; the live client gets wired by
+  // the main effect when the connect completes (send/loadMore activate
+  // then). Mirrors web showing cached rooms immediately + refreshing in
+  // the background.
+  useEffect(() => {
+    if (!config?.initBeforeLoad || initMode !== 'provider') {return;}
+    if (isInited || showModal) {return;}
+    if (providerBootstrapStatus === 'failed') {return;}
+    const haveCachedRooms = !!rooms && Object.keys(rooms).length > 0;
+    const haveUser =
+      !!user?.xmppUsername || !!user?.defaultWallet?.walletAddress;
+    if (haveCachedRooms && haveUser) {
+      devPushLog('rn', 'ChatWrapper: cache-first — showing persisted rooms while provider connects');
+      setShowModal(false);
+      setInited(true);
+    }
+  }, [
+    config?.initBeforeLoad,
+    initMode,
+    isInited,
+    showModal,
+    providerBootstrapStatus,
+    rooms,
+    user?.xmppUsername,
+    user?.defaultWallet?.walletAddress,
+  ]);
+
   // Skip the legacy email/password LoginForm entirely when XmppProvider
   // is driving auth via initBeforeLoad — the bootstrap effect will
   // populate the user shortly. Showing LoginForm here causes a flicker
@@ -270,7 +342,13 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
   return (
     <>
-      {showModal && (
+      {/* Connection/bootstrap error UI. For patient-facing apps the
+          full-screen dark overlay reads as a crash, so
+          `disableConnectionErrorOverlay` swaps it for a subtle inline
+          "Connection lost. Retrying…" banner (and reconnect + re-join now
+          recover automatically). */}
+      {showModal && config?.disableConnectionErrorOverlay && <ConnectionBanner />}
+      {showModal && !config?.disableConnectionErrorOverlay && (
         <Overlay>
           <View
             style={{
@@ -356,6 +434,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 backgroundColorButton="#E53935"
                 handleClick={handleDeleteClick}
                 handleCloseModal={handleCloseDeleteModal}
+                compact
               />
             )}
           </ChatWrapperBox>

package/src/components/MainComponents/MediaMessage.tsx

@@ -5,12 +5,14 @@ import CustomMessageImage from '../styled/MessageImage';
 import CustomMessageVideo from '../styled/VideoMessage';
 import AudioMessage from '../styled/AudioMessage';
 import { Text } from 'react-native';
+import { deriveDisplayFilename } from '../../helpers/mimeToExtension';
 
 interface MediaMessageProps {
   mimeType?: string;
   message?: IMessage;
   location?: string;
   messageText?: string;
+  isUser: boolean;
 }
 
 const MediaMessage: React.FC<MediaMessageProps> = ({
@@ -18,13 +20,20 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
   location,
   messageText,
   message,
+  isUser,
 }) => {
-  if (mimeType)
-    {switch (true) {
+  if (mimeType) {
+    const displayName = deriveDisplayFilename({
+      fileName: message?.fileName,
+      originalName: (message as any)?.originalName,
+      url: location || messageText,
+      mime: mimeType,
+    });
+    switch (true) {
       case mimeType.startsWith('image/'):
         return (
           <CustomMessageImage
-            fileName={message?.fileName || '000132001'}
+            fileName={displayName}
             fileURL={messageText || ''}
             mimetype={mimeType}
           />
@@ -32,7 +41,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
       case mimeType.startsWith('video/'):
         return (
           <CustomMessageVideo
-            fileName={message?.fileName || '000132001'}
+            fileName={displayName}
             fileURL={location || ''}
             mimetype={mimeType}
           />
@@ -44,21 +53,22 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         // Many backends tag binary payloads (PDFs, DOCX, archives) as
         // application/octet-stream; sniff the filename extension for the
         // legitimate audio case before falling through to FileDownload.
-        const fileName = message?.fileName || location?.split('/')?.pop() || 'MediaFile';
         if (mimeType.includes('application/octet-stream')) {
-          if (/\.(mp3|m4a|wav|aac|ogg|flac)$/i.test(fileName)) {
+          if (/\.(mp3|m4a|wav|aac|ogg|flac)$/i.test(displayName)) {
             return <AudioMessage src={location || ''} />;
           }
         }
         return (
           <FileDownload
             fileURL={location ? location : ''}
-            fileName={fileName}
+            fileName={displayName}
             mimetype={mimeType}
+            isUser={isUser}
           />
         );
       }
-    }}
+    }
+  }
   return <Text>Unsupported media type</Text>;
 };
 

package/src/components/MainComponents/MessageContainer.tsx

@@ -73,7 +73,7 @@ export const MessageContainer: FC<MessageContainerProps> = ({
     );
   }
 
-  if (message?.id === 'delimiter-new') {
+  if (String(message?.id || '').startsWith('delimiter-new')) {
     return CustomNewMessageLabel ? (
       <CustomNewMessageLabel color={config?.colors?.primary} />
     ) : (
@@ -85,7 +85,9 @@ export const MessageContainer: FC<MessageContainerProps> = ({
 
   return (
     <View key={message.id}>
-      {showDateLabel && !activeMessage && message.id !== 'delimiter-new' ? (
+      {showDateLabel &&
+      !activeMessage &&
+      !String(message.id || '').startsWith('delimiter-new') ? (
         CustomDaySeparator ? (
           <CustomDaySeparator
             date={messageDate}

package/src/components/MainComponents/MessageList.tsx

@@ -9,16 +9,17 @@ import React, {
 } from 'react';
 import {
   View,
+  Text,
   StyleSheet,
   FlatList,
   Image,
   NativeSyntheticEvent,
   NativeScrollEvent,
   TouchableOpacity,
-  Keyboard,
   ImageSourcePropType,
 } from 'react-native';
 import { IMessage, User, IConfig, IRoom } from '../../types/types';
+import { msgSortableMs } from '../../roomStore/roomsSlice';
 import Composing from '../styled/StyledInputComponents/Composing';
 import TreadLabel from '../styled/TreadLabel';
 import { MessageContainer } from './MessageContainer';
@@ -69,10 +70,24 @@ const MessageList = <TMessage extends IMessage>({
     .room! as IRoom;
   const [isUserAtBottom, setIsUserAtBottom] = useState(true);
   const [showNewMessageIndicator, setShowNewMessageIndicator] = useState(false);
-  const [isContentOffset, setIsContentOffset] = useState(false);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [isScrollBlocked, setIsScrollBlocked] = useState(false);
-  const [hasUserScrolled, setHasUserScrolled] = useState(false);
+  // Count of messages that arrived while the user was scrolled up.
+  // Renders as a badge on the scroll-to-bottom arrow so they know how
+  // much they're missing without having to scroll to find out.
+  const [unreadWhileScrolledUp, setUnreadWhileScrolledUp] = useState(0);
+  // Newest message timestamp at the moment the user scrolled away from
+  // the bottom. The badge counts only messages NEWER than this, so
+  // back-pagination (loading OLDER history while scrolled up) never
+  // inflates the count. Was previously a message-COUNT snapshot, which
+  // wrongly counted back-paginated old messages as "new" (Android repro).
+  const newestSeenTsRef = useRef<number | null>(null);
+  // Refs mirror the viewport state synchronously. The auto-follow logic
+  // runs from FlatList callbacks where setState hasn't necessarily
+  // committed yet; relying on stale React state is what caused the chat
+  // to jump back to the bottom when a new message landed mid-scroll.
+  const isUserAtBottomRef = useRef(true);
+  const hasUserScrolledRef = useRef(false);
 
   const flatListRef = useRef<FlatList<IMessage>>(null);
 
@@ -129,7 +144,10 @@ const MessageList = <TMessage extends IMessage>({
       const bNum = new Date(b?.date as any).getTime() || 0;
       return aNum - bNum;
     });
-    return sorted;
+    const deduped = Array.from(
+      new Map(sorted.map((m) => [m.id, m])).values()
+    );
+    return deduped;
   }, [addReplyMessages, isReply, roomJID, activeMessage]);
 
   const handleLoadMore = useCallback(async () => {
@@ -174,16 +192,72 @@ const MessageList = <TMessage extends IMessage>({
   ]);
 
   const dataMessages = useMemo(() => {
-    return memoizedMessages.slice().reverse();
-  }, [memoizedMessages]);
+    const base = memoizedMessages.slice().reverse();
+    const boundaryTs = newestSeenTsRef.current;
+    if (
+      isUserAtBottomRef.current ||
+      boundaryTs === null ||
+      unreadWhileScrolledUp === 0
+    ) {
+      return base;
+    }
+
+    let lastNewIndex = -1;
+    for (let i = 0; i < base.length; i++) {
+      if (msgSortableMs(base[i]) > boundaryTs) {
+        lastNewIndex = i;
+      } else {
+        break;
+      }
+    }
+
+    if (lastNewIndex === -1) {return base;}
+
+    const withDivider = base.slice();
+    withDivider.splice(lastNewIndex + 1, 0, {
+      id: 'delimiter-new-local',
+      user: {
+        id: 'system',
+        name: undefined,
+        token: '',
+        refreshToken: '',
+      } as any,
+      date: new Date(boundaryTs).toISOString(),
+      body: 'New Messages',
+      roomJid: roomJID,
+    } as IMessage);
+    return withDivider;
+  }, [memoizedMessages, isUserAtBottom, roomJID, unreadWhileScrolledUp]);
 
   const renderMessage = useCallback(
     ({ item, index }: { item: IMessage; index: number }) => {
+      if (String(item.id).startsWith('delimiter-new')) {
+        return (
+          <MessageContainer
+            CustomMessage={CustomMessage}
+            CustomDaySeparator={CustomDaySeparator}
+            CustomNewMessageLabel={CustomNewMessageLabel}
+            message={item}
+            activeMessage={activeMessage}
+            config={config}
+            walletAddress={user.xmppUsername || user.walletAddress}
+            isReply={isReply}
+            showDateLabel={false}
+          />
+        );
+      }
+
       const messageDate = new Date(item.date).toDateString();
       let showDateLabel = false;
 
-      const nextMessage =
-        index < dataMessages.length - 1 ? dataMessages[index + 1] : null;
+      let nextMessage = null;
+      for (let i = index + 1; i < dataMessages.length; i++) {
+        const candidate = dataMessages[i];
+        if (!String(candidate.id).startsWith('delimiter-new')) {
+          nextMessage = candidate;
+          break;
+        }
+      }
       const nextMessageDate = nextMessage
         ? new Date(nextMessage.date).toDateString()
         : null;
@@ -209,10 +283,13 @@ const MessageList = <TMessage extends IMessage>({
     [
       activeMessage,
       config,
+      CustomDaySeparator,
+      CustomMessage,
+      CustomNewMessageLabel,
+      dataMessages,
+      isReply,
       user.xmppUsername,
       user.walletAddress,
-      isReply,
-      memoizedMessages.length,
     ]
   );
 
@@ -226,57 +303,94 @@ const MessageList = <TMessage extends IMessage>({
   }, [flatListRef]);
 
   const handleContentSizeChange = useCallback(() => {
-    if (isContentOffset) {
-      scrollToBottom();
-      setIsContentOffset(false);
-    }
-    if (!isLoadingMore && flatListRef.current && isUserAtBottom) {
+    if (!isLoadingMore && flatListRef.current && isUserAtBottomRef.current) {
       scrollToBottom();
-    } else if (!isLoadingMore && hasUserScrolled) {
+    } else if (!isLoadingMore && hasUserScrolledRef.current) {
       setShowNewMessageIndicator(true);
     }
-  }, [isUserAtBottom, scrollToBottom, isLoadingMore, hasUserScrolled]);
+  }, [scrollToBottom, isLoadingMore]);
 
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       const contentOffset = event.nativeEvent.contentOffset.y;
 
-      Keyboard.dismiss();
+      // Don't force-dismiss the keyboard on every scroll event — any
+      // touch on the message list used to close it, which made replying
+      // to a long thread feel broken. Drag-to-dismiss still works via
+      // FlatList's keyboardDismissMode="interactive" below.
 
-      if (contentOffset > 150 && !hasUserScrolled) {
-        setHasUserScrolled(true);
+      if (contentOffset > 150 && !hasUserScrolledRef.current) {
+        hasUserScrolledRef.current = true;
       }
 
       if (contentOffset < 150) {
-        setIsContentOffset(true);
+        isUserAtBottomRef.current = true;
         setShowNewMessageIndicator(false);
         setIsUserAtBottom(true);
+        // Back at the bottom — clear the unread-while-scrolled-up
+        // counter so the badge disappears with the arrow.
+        setUnreadWhileScrolledUp(0);
+        newestSeenTsRef.current = null;
       } else {
-        setIsContentOffset(false);
-        if (hasUserScrolled) {
+        isUserAtBottomRef.current = false;
+        if (hasUserScrolledRef.current) {
           setShowNewMessageIndicator(true);
         }
+        if (newestSeenTsRef.current === null) {
+          // Snapshot the NEWEST message's timestamp the moment the user
+          // first leaves the bottom. Anything newer than this that
+          // arrives later is genuinely "new"; older history loaded by
+          // back-pagination is < this and never counts.
+          newestSeenTsRef.current = memoizedMessages.reduce(
+            (mx: number, m: IMessage) => {
+              const t = msgSortableMs(m);
+              return t > mx ? t : mx;
+            },
+            0
+          );
+        }
         setIsUserAtBottom(false);
       }
     },
-    [hasUserScrolled]
+    [memoizedMessages]
   );
 
+  // Keep the badge in sync with messages that arrive while the user is
+  // scrolled up. Count ONLY messages newer than the newest-seen snapshot
+  // — so loading older history (back-pagination) doesn't inflate it.
+  useEffect(() => {
+    if (isUserAtBottomRef.current) {return;}
+    if (newestSeenTsRef.current === null) {return;}
+    const since = newestSeenTsRef.current;
+    const count = memoizedMessages.reduce(
+      (n: number, m: IMessage) => (msgSortableMs(m) > since ? n + 1 : n),
+      0
+    );
+    setUnreadWhileScrolledUp(count);
+  }, [memoizedMessages, isUserAtBottom]);
+
   const handleLayout = () => {
-    setIsContentOffset(true);
+    isUserAtBottomRef.current = true;
+    hasUserScrolledRef.current = false;
     setIsUserAtBottom(true);
   };
 
   const handleNewMessageIndicatorPress = () => {
+    isUserAtBottomRef.current = true;
     setShowNewMessageIndicator(false);
     setIsUserAtBottom(true);
+    setUnreadWhileScrolledUp(0);
+    newestSeenTsRef.current = null;
     scrollToBottom();
   };
 
   useEffect(() => {
-    setHasUserScrolled(false);
+    hasUserScrolledRef.current = false;
+    isUserAtBottomRef.current = true;
     setShowNewMessageIndicator(false);
     setIsUserAtBottom(true);
+    setUnreadWhileScrolledUp(0);
+    newestSeenTsRef.current = null;
   }, [roomJID]);
 
   const BackgroundImage = useMemo(() => {
@@ -316,7 +430,7 @@ const MessageList = <TMessage extends IMessage>({
       )}
       <FlatList
         ref={flatListRef}
-        data={memoizedMessages.slice().reverse()}
+        data={dataMessages}
         renderItem={renderMessage}
         keyExtractor={(item) => item.id.toString()}
         onEndReached={handleLoadMore}
@@ -326,6 +440,8 @@ const MessageList = <TMessage extends IMessage>({
         scrollEventThrottle={16}
         onLayout={handleLayout}
         inverted={true}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
         contentContainerStyle={styles.flatListContent}
         ListFooterComponent={
           loading && memoizedMessages.length > 15 ? (
@@ -337,11 +453,21 @@ const MessageList = <TMessage extends IMessage>({
         <TouchableOpacity
           style={[
             styles.newMessageIndicator,
-            { backgroundColor: config?.colors?.secondary },
+            { backgroundColor: config?.colors?.primary || '#0052CD' },
           ]}
           onPress={handleNewMessageIndicatorPress}
         >
-          <ArowDownIcon />
+          {/* White chevron on the saturated FAB. The icon's default
+              color is white, which was invisible against the previous
+              light `secondary` background — hence "no icon". */}
+          <ArowDownIcon color="#FFFFFF" width={22} height={22} />
+          {unreadWhileScrolledUp > 0 && (
+            <View style={styles.newMessageBadge}>
+              <Text style={styles.newMessageBadgeText}>
+                {unreadWhileScrolledUp > 99 ? '99+' : unreadWhileScrolledUp}
+              </Text>
+            </View>
+          )}
         </TouchableOpacity>
       )}
       {config?.customTypingIndicator?.enabled && composing && (
@@ -400,12 +526,40 @@ const styles = StyleSheet.create({
     height: 40,
     bottom: 20,
     right: 20,
-    backgroundColor: '#007AFF',
-    padding: 10,
+    backgroundColor: '#0052CD',
     borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // Lift the FAB off the chat background so it reads as a button.
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 4,
   },
   newMessageText: {
     color: '#fff',
     fontWeight: 'bold',
   },
+  newMessageBadge: {
+    position: 'absolute',
+    top: -6,
+    right: -6,
+    minWidth: 20,
+    height: 20,
+    paddingHorizontal: 6,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // Fixed red so it stays distinct from the (primary-coloured) FAB,
+    // with a white ring to separate the two.
+    backgroundColor: '#E53935',
+    borderWidth: 2,
+    borderColor: '#fff',
+  },
+  newMessageBadgeText: {
+    color: '#fff',
+    fontWeight: 'bold',
+    fontSize: 11,
+  },
 });

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react';
 import {Provider} from 'react-redux';
 import {KeyboardProvider} from 'react-native-keyboard-controller';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {store} from '../../roomStore';
 import {ConfigUser, IConfig, MessageProps} from '../../types/types';
 import {XmppProvider} from '../../context/xmppProvider';
@@ -8,6 +9,12 @@ import {MessageNotificationProvider} from '../../context/MessageNotificationCont
 import {ToastProvider} from '../../context/ToastContext';
 import LoginWrapper from './LoginWrapper';
 import '../../helpers/storeConsole';
+import {installPromiseRejectionTracker} from '../../utils/installPromiseRejectionTracker';
+
+// Mount-time, dev-only — wire a global unhandled-promise-rejection
+// tracker so any future leak surfaces with a real stack trace in Metro
+// logs (bug #4 follow-up). No-op in production.
+installPromiseRejectionTracker();
 
 interface ChatWrapperProps {
   token?: string;
@@ -17,6 +24,7 @@ interface ChatWrapperProps {
   MainComponentStyles?: React.CSSProperties;
   CustomMessageComponent?: React.ComponentType<MessageProps>;
   config?: IConfig;
+  isVisible?: boolean;
 }
 
 export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
@@ -27,15 +35,17 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
 
     return (
       <Provider store={store}>
-        <KeyboardProvider>
-          <XmppProvider config={memoizedConfig}>
-            <ToastProvider>
-              <MessageNotificationProvider config={memoizedConfig}>
-                <LoginWrapper config={memoizedConfig} {...props} />
-              </MessageNotificationProvider>
-            </ToastProvider>
-          </XmppProvider>
-        </KeyboardProvider>
+        <SafeAreaProvider>
+          <KeyboardProvider>
+            <XmppProvider config={memoizedConfig} isVisible={props.isVisible}>
+              <ToastProvider>
+                <MessageNotificationProvider config={memoizedConfig}>
+                  <LoginWrapper config={memoizedConfig} {...props} />
+                </MessageNotificationProvider>
+              </ToastProvider>
+            </XmppProvider>
+          </KeyboardProvider>
+        </SafeAreaProvider>
       </Provider>
     );
   },