ChatWrapper.tsx

import React, { PropsWithChildren } from 'react';

import { UserResponse } from 'stream-chat';
import {
  Chat,
  enTranslations,
  OverlayProvider,
  SqliteClient,
  Streami18n,
  useCreateChatClient,
  WithComponents,
} from 'stream-chat-expo';

import { AuthProgressLoader } from './AuthProgressLoader';

import { useExpoMessagingComponentOverrides } from './ExpoMessagingComponentOverrides';

import { useStreamChatTheme } from '../hooks/useStreamChatTheme';

import { STREAM_API_KEY, USER_TOKENS } from '@/constants/ChatUsers';
import { useUserContext } from '@/context/UserContext';
import { usePushNotifications } from '@/hooks/usePushNotifications';
import '../utils/backgroundMessageHandler';

const streami18n = new Streami18n({
  language: 'en',
});

SqliteClient.logger = (_level, _message, _extraData) => {
  // console.log(_level, `SqliteClient: ${_message}`, _extraData);
};

export const ChatWrapper = ({ children }: PropsWithChildren) => {
  const { user } = useUserContext();
  const chatClient = useCreateChatClient({
    apiKey: STREAM_API_KEY,
    userData: user as UserResponse,
    tokenOrProvider: USER_TOKENS[user?.id as string],
  });

  usePushNotifications({ chatClient });

  streami18n.registerTranslation('en', {
    ...enTranslations,
    // Custom translation key used by the live-location feature. It is not part of the
    // SDK's `enTranslations` (a closed key set), but i18next resolves arbitrary keys at
    // runtime, so we cast to the expected parameter type to register it.
    'timestamp/Location end at': '{{ milliseconds | durationFormatter(withSuffix: false) }}',
  } as typeof enTranslations);

  const theme = useStreamChatTheme();
  const componentOverrides = useExpoMessagingComponentOverrides();

  if (!chatClient) {
    return <AuthProgressLoader />;
  }

  return (
    <WithComponents overrides={componentOverrides}>
      <OverlayProvider
        accessibility={{ enabled: true }}
        i18nInstance={streami18n}
        value={{ style: theme }}
      >
        <Chat
          client={chatClient}
          i18nInstance={streami18n}
          enableOfflineSupport
          useNativeMultipartUpload
        >
          {children}
        </Chat>
      </OverlayProvider>
    </WithComponents>
  );
};