stream-chat-react-native-core 4.9.0-beta.4 → 4.10.0

package/src/components/ChannelPreview/hooks/__tests__/useLatestMessagePreview.test.tsx

@@ -5,11 +5,10 @@ import { waitFor } from '@testing-library/react-native';
 
 import type { DefaultStreamChatGenerics } from 'src/types/types';
 
-import type { DefaultGenerics, StreamChat } from 'stream-chat';
+import type { DefaultGenerics, MessageResponse, StreamChat } from 'stream-chat';
 
 import { ChatContext, ChatContextValue } from '../../../../contexts/chatContext/ChatContext';
 import {
-  CHANNEL,
   CHANNEL_WITH_DELETED_MESSAGES,
   CHANNEL_WITH_EMPTY_MESSAGE,
   CHANNEL_WITH_MENTIONED_USERS,
@@ -47,19 +46,11 @@ describe('useLatestMessagePreview', () => {
     </ChatContext.Provider>
   );
 
-  it('should return a channel latest message', async () => {
-    const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL, FORCE_UPDATE, LATEST_MESSAGE),
-      { wrapper: ChatProvider },
-    );
-    await waitFor(() => {
-      expect(result.current.previews).toBeTruthy();
-    });
-  });
+  it('should return a deleted message preview if the latest message is deleted', async () => {
+    const latestMessage = { type: 'deleted' } as unknown as MessageResponse;
 
-  it('should return a deleted message preview', async () => {
     const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL_WITH_DELETED_MESSAGES, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_DELETED_MESSAGES, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
     await waitFor(() => {
@@ -67,9 +58,11 @@ describe('useLatestMessagePreview', () => {
     });
   });
 
-  it('should return an "Nothing yet..." message preview', async () => {
+  it('should return an "Nothing yet..." message preview if channel has no messages', async () => {
+    const latestMessage = undefined;
+
     const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL_WITH_NO_MESSAGES, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_NO_MESSAGES, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
     await waitFor(() => {
@@ -77,11 +70,12 @@ describe('useLatestMessagePreview', () => {
     });
   });
 
-  it('should return latest message preview', async () => {
+  it('should use latestMessage if provided', async () => {
     const { result } = renderHook(
       () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_TEXT, FORCE_UPDATE, LATEST_MESSAGE),
       { wrapper: ChatProvider },
     );
+
     await waitFor(() => {
       expect(result.current.previews).toEqual([
         { bold: true, text: '@okechukwu: ' },
@@ -91,10 +85,13 @@ describe('useLatestMessagePreview', () => {
   });
 
   it('should return a channel with an empty message preview', async () => {
+    const latestMessage = {} as unknown as MessageResponse;
+
     const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL_WITH_EMPTY_MESSAGE, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_EMPTY_MESSAGE, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
+
     await waitFor(() => {
       expect(result.current.previews).toEqual([
         { bold: false, text: '' },
@@ -104,8 +101,16 @@ describe('useLatestMessagePreview', () => {
   });
 
   it('should return a mentioned user (@Max) message preview', async () => {
+    const latestMessage = {
+      mentioned_users: [{ id: 'Max', name: 'Max' }],
+      text: 'Max',
+      user: {
+        id: 'okechukwu',
+      },
+    } as unknown as MessageResponse;
+
     const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL_WITH_MENTIONED_USERS, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_MENTIONED_USERS, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
     await waitFor(() => {
@@ -117,8 +122,15 @@ describe('useLatestMessagePreview', () => {
   });
 
   it('should return the latest command preview', async () => {
+    const latestMessage = {
+      command: 'giphy',
+      user: {
+        id: 'okechukwu',
+      },
+    } as unknown as MessageResponse;
+
     const { result } = renderHook(
-      () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_COMMAND, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_COMMAND, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
     await waitFor(() => {
@@ -130,11 +142,18 @@ describe('useLatestMessagePreview', () => {
   });
 
   it('should return an attachment preview', async () => {
+    const latestMessage = {
+      attachments: ['arbitrary value'],
+      user: {
+        id: 'okechukwu',
+      },
+    } as unknown as MessageResponse;
+
     const { result } = renderHook(
-      () =>
-        useLatestMessagePreview(CHANNEL_WITH_MESSAGES_ATTACHMENTS, FORCE_UPDATE, LATEST_MESSAGE),
+      () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_ATTACHMENTS, FORCE_UPDATE, latestMessage),
       { wrapper: ChatProvider },
     );
+
     await waitFor(() => {
       expect(result.current.previews).toEqual([
         { bold: true, text: '@okechukwu: ' },
@@ -142,4 +161,20 @@ describe('useLatestMessagePreview', () => {
       ]);
     });
   });
+
+  it('should default to messages from the channel state if latestMessage is undefined', async () => {
+    const latestMessage = undefined;
+
+    const { result } = renderHook(
+      () => useLatestMessagePreview(CHANNEL_WITH_MESSAGES_TEXT, FORCE_UPDATE, latestMessage),
+      { wrapper: ChatProvider },
+    );
+
+    await waitFor(() => {
+      expect(result.current.previews).toEqual([
+        { bold: true, text: '@okechukwu: ' },
+        { bold: false, text: 'jkbkbiubicbi' },
+      ]);
+    });
+  });
 });

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -207,7 +207,10 @@ const getLatestMessagePreview = <
       status: MessageReadStatus.NOT_SENT_BY_CURRENT_USER,
     };
   }
-  const message = lastMessage || messages.length ? messages[messages.length - 1] : undefined;
+
+  const channelStateLastMessage = messages.length ? messages[messages.length - 1] : undefined;
+
+  const message = lastMessage !== undefined ? lastMessage : channelStateLastMessage;
 
   return {
     created_at: getLatestMessageDisplayDate(message, tDateTimeParser),

package/src/components/Chat/Chat.tsx

@@ -15,8 +15,9 @@ import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext'
 import { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';
 import type { Theme } from '../../contexts/themeContext/utils/theme';
 import {
-  TranslationContextValue,
+  DEFAULT_USER_LANGUAGE,
   TranslationProvider,
+  TranslatorFunctions,
 } from '../../contexts/translationContext/TranslationContext';
 import { useStreami18n } from '../../hooks/useStreami18n';
 import init from '../../init';
@@ -129,7 +130,7 @@ const ChatWithContext = <
   const { children, client, closeConnectionOnBackground = true, i18nInstance, style } = props;
 
   const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();
-  const [translators, setTranslators] = useState<TranslationContextValue>({
+  const [translators, setTranslators] = useState<TranslatorFunctions>({
     t: (key: string) => key,
     tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
   });
@@ -178,7 +179,9 @@ const ChatWithContext = <
 
   return (
     <ChatProvider<StreamChatGenerics> value={chatContext}>
-      <TranslationProvider value={translators}>
+      <TranslationProvider
+        value={{ ...translators, userLanguage: client.user?.language || DEFAULT_USER_LANGUAGE }}
+      >
         <ThemeProvider style={style}>{children}</ThemeProvider>
       </TranslationProvider>
     </ChatProvider>

package/src/components/ImageGallery/ImageGallery.tsx

@@ -273,21 +273,25 @@ export const ImageGallery = <
 
     const attachmentPhotos = attachmentImages.map((a) => {
       const imageUrl = getUrlOfImageAttachment(a) as string;
+      const giphyURL = a.giphy?.[giphyVersion]?.url || a.thumb_url || a.image_url;
 
       return {
         channelId: cur.cid,
         created_at: cur.created_at,
         id: `photoId-${cur.id}-${imageUrl}`,
         messageId: cur.id,
-        mime_type: a.mime_type,
+        mime_type: a.type === 'giphy' ? 'image/gif' : a.mime_type,
         original_height: a.original_height,
         original_width: a.original_width,
         type: a.type,
-        uri: getResizedImageUrl({
-          height: screenHeight,
-          url: imageUrl,
-          width: screenWidth,
-        }),
+        uri:
+          a.type === 'giphy'
+            ? giphyURL
+            : getResizedImageUrl({
+                height: screenHeight,
+                url: imageUrl,
+                width: screenWidth,
+              }),
         user: cur.user,
         user_id: cur.user_id,
       };

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -171,7 +171,8 @@ export const ImageGalleryFooterWithContext = <
         }-${selectedIndex}.${extension}`,
         fromUrl: photo.uri,
       });
-      await shareImage({ type: photo.mime_type, url: localFile });
+      // `image/jpeg` is added for the case where the mime_type isn't available for a file/image
+      await shareImage({ type: photo.mime_type ?? 'image/jpeg', url: localFile });
       await deleteFile({ uri: localFile });
     } catch (error) {
       console.log(error);

package/src/components/Message/Message.tsx

@@ -503,6 +503,8 @@ const MessageWithContext = <
     updateMessage,
   });
 
+  const { userLanguage } = useTranslationContext();
+
   const showMessageOverlay = async (messageReactions = false, error = errorOrFailed) => {
     await dismissKeyboard();
 
@@ -552,6 +554,7 @@ const MessageWithContext = <
       ownCapabilities,
       supportedReactions,
       threadList,
+      userLanguage,
       videos: attachments.videos,
     });
 

package/src/components/Message/MessageSimple/MessageTextContainer.tsx

@@ -14,7 +14,9 @@ import {
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import type { MarkdownStyle, Theme } from '../../../contexts/themeContext/utils/theme';
+import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   textContainer: { maxWidth: 250, paddingHorizontal: 16 },
@@ -75,6 +77,10 @@ const MessageTextContainerWithContext = <
     },
   } = theme;
 
+  const translatedMessage = useTranslatedMessage<StreamChatGenerics>(
+    message,
+  ) as MessageType<StreamChatGenerics>;
+
   if (!message.text) return null;
 
   const markdownStyles = { ...markdown, ...markdownStylesProp };
@@ -94,7 +100,7 @@ const MessageTextContainerWithContext = <
             ...markdownStyles,
             ...(onlyEmojis ? onlyEmojiMarkdown : {}),
           },
-          message,
+          message: translatedMessage,
           messageOverlay,
           messageTextNumberOfLines,
           onLongPress,

package/src/components/Message/MessageSimple/__tests__/MessageTextContainer.test.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { cleanup, render, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../../contexts/overlayContext/OverlayProvider';
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
+import {
+  generateMessage,
+  generateStaticMessage,
+} from '../../../../mock-builders/generator/message';
+import { generateStaticUser } from '../../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { Channel } from '../../../Channel/Channel';
+import { Chat } from '../../../Chat/Chat';
+import type { MessageType } from '../../../MessageList/hooks/useMessageList';
+import { MessageList } from '../../../MessageList/MessageList';
+import { MessageTextContainer } from '../MessageTextContainer';
+
+afterEach(cleanup);
+
+describe('MessageTextContainer', () => {
+  it('should render message text container', async () => {
+    const staticUser = generateStaticUser(1);
+    const message = generateMessage({
+      user: { ...staticUser, image: undefined },
+    });
+    const { getByTestId, getByText, rerender, toJSON } = render(
+      <ThemeProvider style={defaultTheme}>
+        <MessageTextContainer message={message as unknown as MessageType} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-text-container')).toBeTruthy();
+      expect(getByText(message.text)).toBeTruthy();
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessageTextContainer
+          message={message as unknown as MessageType}
+          MessageText={({ message }) => <Text testID='message-text'>{message?.text}</Text>}
+        />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-text-container')).toBeTruthy();
+      expect(getByTestId('message-text')).toBeTruthy();
+      expect(getByText(message.text)).toBeTruthy();
+    });
+
+    const staticMessage = generateStaticMessage('Hello World', {
+      user: staticUser,
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessageTextContainer message={staticMessage as unknown as MessageType} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  it('should display a translated message if applicable', async () => {
+    const chatClient = await getTestClientWithUser({ id: 'mads', language: 'no' });
+
+    const message = {
+      i18n: {
+        no_text: 'Hallo verden!',
+      },
+      text: 'Hello world!',
+    };
+
+    const mockedChannel = generateChannelResponse({
+      id: 'chans',
+      messages: [message],
+    });
+
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', 'chans');
+    await channel.watch();
+
+    const TestComponent = () => (
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>
+    );
+
+    const { getByText } = render(<TestComponent />);
+
+    await waitFor(() => {
+      expect(getByText(message.i18n.no_text)).toBeTruthy();
+    });
+  });
+});

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -669,10 +669,14 @@ export const MessageInputProvider = <
         }
       }
 
+      // To get the mime type of the image from the file name and send it as an response for an image
+      const mime_type: string | boolean = lookup(image.file.filename as string);
+
       if (image.state === FileState.UPLOADED || image.state === FileState.FINISHED) {
         attachments.push({
           fallback: image.file.name,
           image_url: image.url,
+          mime_type,
           original_height: image.height,
           original_width: image.width,
           type: 'image',
@@ -689,11 +693,14 @@ export const MessageInputProvider = <
         sending.current = false;
         return;
       }
+      const mime_type: string | boolean = lookup(file.file.name as string);
+
       if (file.state === FileState.UPLOADED || file.state === FileState.FINISHED) {
         if (file.file.type?.startsWith('image/')) {
           attachments.push({
             fallback: file.file.name,
             image_url: file.url,
+            mime_type,
             type: 'image',
           } as Attachment<StreamChatGenerics>);
         } else if (file.file.type?.startsWith('audio/')) {

package/src/contexts/messageInputContext/__tests__/__snapshots__/sendMessage.test.tsx.snap

@@ -6,6 +6,7 @@ Object {
     Object {
       "fallback": undefined,
       "image_url": undefined,
+      "mime_type": false,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",
@@ -65,6 +66,7 @@ Object {
     Object {
       "fallback": "dummy.pdf",
       "image_url": undefined,
+      "mime_type": "application/pdf",
       "type": "image",
     },
   ],
@@ -85,6 +87,7 @@ Object {
     Object {
       "fallback": undefined,
       "image_url": undefined,
+      "mime_type": false,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",
@@ -92,6 +95,7 @@ Object {
     Object {
       "fallback": undefined,
       "image_url": undefined,
+      "mime_type": false,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, TranslationLanguages } from 'stream-chat';
 
 import { useResettableState } from './hooks/useResettableState';
 
@@ -43,6 +43,7 @@ export type MessageOverlayData<
   ownCapabilities?: OwnCapabilitiesContextValue;
   supportedReactions?: ReactionData[];
   threadList?: boolean;
+  userLanguage?: TranslationLanguages;
   videos?: Attachment<StreamChatGenerics>[];
 };
 

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -35,8 +35,9 @@ import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext
 import { MessageOverlayProvider } from '../messageOverlayContext/MessageOverlayContext';
 import { ThemeProvider } from '../themeContext/ThemeContext';
 import {
-  TranslationContextValue,
+  DEFAULT_USER_LANGUAGE,
   TranslationProvider,
+  TranslatorFunctions,
 } from '../translationContext/TranslationContext';
 
 /**
@@ -127,7 +128,7 @@ export const OverlayProvider = <
 
   const bottomSheetRef = useRef<BottomSheet>(null);
 
-  const [translators, setTranslators] = useState<TranslationContextValue>({
+  const [translators, setTranslators] = useState<TranslatorFunctions>({
     t: (key: string) => key,
     tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
   });
@@ -198,7 +199,7 @@ export const OverlayProvider = <
   if (loadingTranslators) return null;
 
   return (
-    <TranslationProvider value={translators}>
+    <TranslationProvider value={{ ...translators, userLanguage: DEFAULT_USER_LANGUAGE }}>
       <OverlayContext.Provider value={overlayContext}>
         <MessageOverlayProvider<StreamChatGenerics>>
           <AttachmentPickerProvider value={attachmentPickerContext}>

package/src/contexts/translationContext/TranslationContext.tsx

@@ -5,10 +5,14 @@ import Dayjs from 'dayjs';
 import type { TFunction } from 'i18next';
 import type { Moment } from 'moment';
 
+import type { TranslationLanguages } from 'stream-chat';
+
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
+export const DEFAULT_USER_LANGUAGE: TranslationLanguages = 'en';
+
 export const isDayOrMoment = (output: TDateTimeParserOutput): output is Dayjs.Dayjs | Moment =>
   (output as Dayjs.Dayjs | Moment).isSame != null;
 
@@ -18,14 +22,19 @@ export type TDateTimeParserOutput = string | number | Date | Dayjs.Dayjs | Momen
 
 export type TDateTimeParser = (input?: TDateTimeParserInput) => TDateTimeParserOutput;
 
-export type TranslationContextValue = {
+export type TranslatorFunctions = {
   t: TFunction | ((key: string) => string);
   tDateTimeParser: TDateTimeParser;
 };
 
+export type TranslationContextValue = TranslatorFunctions & {
+  userLanguage: TranslationLanguages;
+};
+
 const defaultTranslationContextValue: TranslationContextValue = {
   t: (key: string) => key,
   tDateTimeParser: (input) => Dayjs(input),
+  userLanguage: DEFAULT_USER_LANGUAGE,
 };
 
 export const TranslationContext = React.createContext<TranslationContextValue>(

package/src/hooks/__tests__/useTranslatedMessage.test.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import type { MessageResponse } from 'stream-chat';
+
+import {
+  MessageOverlayContextValue,
+  MessageOverlayProvider,
+} from '../../contexts/messageOverlayContext/MessageOverlayContext';
+import {
+  TranslationContextValue,
+  TranslationProvider,
+} from '../../contexts/translationContext/TranslationContext';
+import { useTranslatedMessage } from '../useTranslatedMessage';
+
+type TestComponentProps = {
+  message: MessageResponse;
+};
+
+const TestComponent = ({ message }: TestComponentProps) => {
+  const translatedMessage = useTranslatedMessage(message);
+  return <Text>{translatedMessage.text}</Text>;
+};
+
+describe('useTranslatedMessage', () => {
+  it("doesn't translate a message if there isn't a translation available for the userLanguage", async () => {
+    const message = {
+      i18n: {
+        nl_text: 'Hallo wereld!',
+      },
+      text: 'Hello world!',
+    } as MessageResponse;
+
+    const { getByText } = render(
+      <TranslationProvider value={{ userLanguage: 'es' } as TranslationContextValue}>
+        <TestComponent message={message} />
+      </TranslationProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByText('Hello world!')).toBeTruthy();
+    });
+  });
+
+  it('returns a new message with the text translated if userLanguage is set and the translation exists', async () => {
+    const message = {
+      i18n: {
+        no_text: 'Hallo verden!',
+      },
+      text: 'Hello world!',
+    } as MessageResponse;
+
+    const { getByText } = render(
+      <TranslationProvider value={{ userLanguage: 'no' } as TranslationContextValue}>
+        <TestComponent message={message} />
+      </TranslationProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByText('Hallo verden!')).toBeTruthy();
+    });
+  });
+
+  it("returns the original text if the message doesn't contain any translations", async () => {
+    const message = {
+      text: 'Hello world!',
+    } as MessageResponse;
+
+    const { getByText } = render(<TestComponent message={message} />);
+
+    await waitFor(() => {
+      expect(getByText('Hello world!')).toBeTruthy();
+    });
+  });
+
+  it('uses userLanguage from messageOverlayData if it is set', async () => {
+    const message = {
+      i18n: {
+        nl_text: 'Hallo wereld!',
+        no_text: 'Hallo verden!',
+      },
+      text: 'Hello world!',
+    } as MessageResponse;
+
+    /**
+     * The reason for the as unknown as MessageOverlayContextValue is that the provider
+     * uses useResettableState, wrapping the input to fit in the data structure.
+     *
+     * In practice, the userLanguage will be set with the setData call and not directly
+     * in the provider.
+     * */
+    const { getByText } = render(
+      <MessageOverlayProvider
+        value={{ userLanguage: 'nl' } as unknown as MessageOverlayContextValue}
+      >
+        <TestComponent message={message} />
+      </MessageOverlayProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByText('Hallo wereld!')).toBeTruthy();
+    });
+  });
+});

package/src/hooks/useStreami18n.ts

@@ -2,14 +2,14 @@ import { useEffect, useState } from 'react';
 
 import { useIsMountedRef } from './useIsMountedRef';
 
-import type { TranslationContextValue } from '../contexts/translationContext/TranslationContext';
+import type { TranslatorFunctions } from '../contexts/translationContext/TranslationContext';
 import { Streami18n } from '../utils/Streami18n';
 
 export const useStreami18n = ({
   i18nInstance,
   setTranslators,
 }: {
-  setTranslators: React.Dispatch<React.SetStateAction<TranslationContextValue>>;
+  setTranslators: React.Dispatch<React.SetStateAction<TranslatorFunctions>>;
   i18nInstance?: Streami18n;
 }) => {
   const [loadingTranslators, setLoadingTranslators] = useState(true);