Gifted chat is sometimes not rendered on the Web version (HOWTO / Solution)

[l2aelba]

Just for someone who is looking for this.

Sometimes you have already loaded the messages and the user is navigating quickly.

Users will get ⚠️ empty / blank screen ⚠️ (I don't know why)

I made a JS can you can use for re-render the gifted chat (HACK solution)

if (Platform.OS === 'web') {
  const gcLoadingContaineEl = document.querySelectorAll('[data-testid="GC_LOADING_CONTAINER"]')[0] as HTMLElement
  if (gcLoadingContaineEl) {
    gcLoadingContaineEl.style.display = 'none'
    setTimeout(() => {
      gcLoadingContaineEl.style.display = 'flex'
    }, 500)
  }
}

// Add this somewhere in your code, for example when fetching messages or `useEffect` with 10 secs delayed

This script will let the gifted render it again if GC_LOADING_CONTAINER found

[jacksonwalker165]

very helpful thank you

[Rafaa17]

Facing the exact same issue, thanks 🙏

[quocvuong2000]

faced the same issue gifted chat render blank page on chrome :(

[maaizelahi]

This was very helpful

[l2aelba]

@FaridSafi take a look when you have time. thanks.

[trevoriancox]

Thank you, this resolves a critical issue for us. I am seeing this same issue for a high % of views when we are using react native web, but the browser is a native webview in an iOS app.

In a regular desktop web browser, more commonly we are seeing the Composer and Load More button render just fine, but the messages are not rendering. Is this a related issue?

[the-simian]

import type { IMessage } from 'react-native-gifted-chat';
import { GiftedChat } from 'react-native-gifted-chat';

const EXISTING_CHATS:IMessage[] = [{
    _id: 'some-id',
    text: 'I load and you can read me',
    createdAt: new Date(),
    user: {
       _id: 'another-user-id'
    }
  }]

export function ChatRoom({ id }: { id: string }) {
  const [messages, setMessages] = useState(EXISTING_CHATS);
  const onSend = useCallback((messages: IMessage[] = []) => {
    setMessages((previousMessages) =>
      GiftedChat.append(previousMessages, messages),
    );
  }, []);
  useEffect(() => {
    invisibleMessagesLoadingFix();
  });
  return (
        <GiftedChat
          messages={messages}
          onSend={(messages) => onSend(messages)}
          user={{ _id: `active-user-id }}
        />
  );
}

function invisibleMessagesLoadingFix() {
  if (Platform.OS === 'web') {
    const gcLoadingContaineEl = document.querySelectorAll(
      '[data-testid="GC_LOADING_CONTAINER"]',
    )[0] as HTMLElement;
    if (gcLoadingContaineEl) {
      gcLoadingContaineEl.style.display = 'none';
      setTimeout(() => {
        gcLoadingContaineEl.style.display = 'flex';
      }, 500);
    }
  }
}

Here is a minimal implementation of the above fix in typescript

[xuelink]

Facing the same issue.