stream-chat-react-native-core 9.11.3-beta.1 → 9.12.0-beta.1

package/src/components/Poll/__tests__/PollTranslation.test.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+
+import { act, render, screen } from '@testing-library/react-native';
+import dayjs from 'dayjs';
+import { Poll, PollAnswer, PollResponse, StreamChat, TranslationLanguages } from 'stream-chat';
+
+import {
+  ChatProvider,
+  OwnCapabilitiesProvider,
+  PollContextProvider,
+  ThemeProvider,
+  TranslationProvider,
+} from '../../../contexts';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { PollAnswerListItem } from '../components/PollAnswersList';
+import { PollAllOptionsContent, PollOption } from '../components/PollOption';
+import { PollResultsContent } from '../components/PollResults/PollResults';
+import { PollHeader } from '../Poll';
+
+const POLL_ID = 'poll-id';
+
+const pollResponse = {
+  created_by: { id: 'other-user' },
+  enforce_unique_vote: true,
+  id: POLL_ID,
+  latest_answers: [],
+  latest_votes_by_option: {},
+  name: 'Favourite colour?',
+  name_i18n: { es_text: '¿Color favorito?', language: 'en' },
+  options: [
+    { id: 'option-red', text: 'Red', text_i18n: { es_text: 'Rojo', language: 'en' } },
+    { id: 'option-blue', text: 'Blue' },
+  ],
+  vote_count: 0,
+  vote_counts_by_option: {},
+} as unknown as PollResponse;
+
+const answer = {
+  answer_text: 'Green, actually',
+  answer_text_i18n: { es_text: 'Verde, en realidad', language: 'en' },
+  created_at: '2026-10-27T10:00:00.000Z',
+  id: 'answer-id',
+  is_answer: true,
+  poll_id: POLL_ID,
+  updated_at: '2026-10-27T10:00:00.000Z',
+  user: { id: 'other-user', name: 'Other' },
+} as unknown as PollAnswer;
+
+const setup = (userLanguage: TranslationLanguages) => {
+  const client = { user: { id: 'own-user' }, userID: 'own-user' } as unknown as StreamChat;
+  const poll = new Poll({ client, poll: pollResponse });
+  const [red, blue] = poll.data.options;
+
+  render(
+    <ThemeProvider>
+      <ChatProvider value={{ client } as never}>
+        <TranslationProvider
+          value={{ t: (key: string) => key, tDateTimeParser: dayjs, userLanguage } as never}
+        >
+          <OwnCapabilitiesProvider value={{ castPollVote: true } as never}>
+            <PollContextProvider value={{ message: generateMessage(), poll }}>
+              <PollHeader />
+              <PollOption option={red} />
+              <PollOption option={blue} />
+              <PollAnswerListItem answer={answer} />
+            </PollContextProvider>
+          </OwnCapabilitiesProvider>
+        </TranslationProvider>
+      </ChatProvider>
+    </ThemeProvider>,
+  );
+
+  return { poll };
+};
+
+const renderDialogs = (userLanguage: TranslationLanguages) => {
+  const client = { user: { id: 'own-user' }, userID: 'own-user' } as unknown as StreamChat;
+  const poll = new Poll({ client, poll: pollResponse });
+
+  return render(
+    <ThemeProvider>
+      <ChatProvider value={{ client } as never}>
+        <TranslationProvider value={{ t: (key: string) => key, userLanguage } as never}>
+          <OwnCapabilitiesProvider value={{} as never}>
+            <PollContextProvider value={{ message: generateMessage(), poll }}>
+              <PollResultsContent />
+              <PollAllOptionsContent />
+            </PollContextProvider>
+          </OwnCapabilitiesProvider>
+        </TranslationProvider>
+      </ChatProvider>
+    </ThemeProvider>,
+  );
+};
+
+describe('Poll translations', () => {
+  it("renders the question, options and answers in the user's language", () => {
+    setup('es');
+
+    expect(screen.getByText('¿Color favorito?')).toBeTruthy();
+    expect(screen.getByText('Rojo')).toBeTruthy();
+    expect(screen.getByLabelText('Rojo')).toBeTruthy();
+    expect(screen.getByText('Verde, en realidad')).toBeTruthy();
+    expect(screen.queryByText('Favourite colour?')).toBeNull();
+    expect(screen.queryByText('Red')).toBeNull();
+  });
+
+  it('falls back to the original text when a text has no translation', () => {
+    setup('es');
+
+    expect(screen.getByText('Blue')).toBeTruthy();
+    expect(screen.getByLabelText('Blue')).toBeTruthy();
+  });
+
+  it("renders the original texts when nothing is translated into the user's language", () => {
+    setup('de');
+
+    expect(screen.getByText('Favourite colour?')).toBeTruthy();
+    expect(screen.getByText('Red')).toBeTruthy();
+    expect(screen.getByText('Blue')).toBeTruthy();
+    expect(screen.getByText('Green, actually')).toBeTruthy();
+  });
+
+  it('shows a translation that arrives later through poll.updated', () => {
+    const { poll } = setup('de');
+    expect(screen.getByText('Favourite colour?')).toBeTruthy();
+
+    act(() => {
+      poll.handlePollUpdated({
+        created_at: '2026-10-27T11:00:00.000Z',
+        poll: {
+          ...pollResponse,
+          name_i18n: { de_text: 'Lieblingsfarbe?', language: 'en' },
+        },
+        type: 'poll.updated',
+      } as never);
+    });
+
+    expect(screen.getByText('Lieblingsfarbe?')).toBeTruthy();
+    expect(screen.queryByText('Favourite colour?')).toBeNull();
+  });
+
+  it('translates the question and options in the results and all-options dialogs', () => {
+    renderDialogs('es');
+
+    // Each dialog shows the question once and every option once.
+    expect(screen.getAllByText('¿Color favorito?')).toHaveLength(2);
+    expect(screen.getAllByText('Rojo')).toHaveLength(2);
+    expect(screen.getAllByText('Blue')).toHaveLength(2);
+    expect(screen.queryByText('Favourite colour?')).toBeNull();
+  });
+});

package/src/components/Poll/components/PollAnswersList.tsx

@@ -21,6 +21,7 @@ import { Button } from '../../ui';
 import { UserAvatar } from '../../ui/Avatar/UserAvatar';
 import { usePollAnswersPagination } from '../hooks/usePollAnswersPagination';
 import { usePollState } from '../hooks/usePollState';
+import { usePollTextTranslation } from '../hooks/usePollTextTranslation';
 
 export const AnswerListAddCommentButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
@@ -71,6 +72,7 @@ export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
   const { client } = useChatContext();
   const { t, tDateTimeParser } = useTranslationContext();
   const { votingVisibility } = usePollState();
+  const translate = usePollTextTranslation();
 
   const {
     theme: {
@@ -104,7 +106,9 @@ export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
   return (
     <View style={[styles.listItemWrapper, itemStyle.wrapper]}>
       <View style={[styles.listItemContainer, itemStyle.container]}>
-        <Text style={[styles.listItemAnswerText, itemStyle.answerText]}>{answer.answer_text}</Text>
+        <Text style={[styles.listItemAnswerText, itemStyle.answerText]}>
+          {translate(answer.answer_text, answer.answer_text_i18n)}
+        </Text>
         <View style={[styles.listItemInfoContainer, itemStyle.infoContainer]}>
           <View style={[styles.listItemUserInfoContainer, itemStyle.userInfoContainer]}>
             {!isAnonymous && answer.user?.image ? (

package/src/components/Poll/components/PollOption.tsx

@@ -23,6 +23,7 @@ import { ProgressBar } from '../../ProgressControl/ProgressBar';
 import { UserAvatarStack } from '../../ui/Avatar/AvatarStack';
 import { useIsPollCreatedByCurrentUser } from '../hook/useIsPollCreatedByCurrentUser';
 import { usePollState } from '../hooks/usePollState';
+import { usePollTextTranslation } from '../hooks/usePollTextTranslation';
 import { usePollVoteToggle } from '../hooks/usePollVoteToggle';
 
 const pollVoteAccessibilityStates = {
@@ -44,7 +45,8 @@ export const PollAllOptionsContent = ({
   additionalScrollViewProps,
 }: Pick<PollAllOptionsContentProps, 'additionalScrollViewProps'>) => {
   const { t } = useTranslationContext();
-  const { name, options } = usePollState();
+  const { name, nameI18n, options } = usePollState();
+  const translate = usePollTextTranslation();
 
   const {
     theme: {
@@ -63,7 +65,7 @@ export const PollAllOptionsContent = ({
     >
       <View style={[styles.allOptionsTitleContainer, titleContainer]}>
         <Text style={styles.allOptionsTitleMeta}>{t('Question')}</Text>
-        <Text style={[styles.allOptionsTitleText, titleText]}>{name}</Text>
+        <Text style={[styles.allOptionsTitleText, titleText]}>{translate(name, nameI18n)}</Text>
       </View>
       <View style={[styles.allOptionsListContainer, listContainer]}>
         {options?.map((option: PollOptionClass) => (
@@ -92,6 +94,7 @@ export const PollAllOptions = ({
 export const PollOption = ({ option, showProgressBar = true, forceIncoming }: PollOptionProps) => {
   const { latestVotesByOption, voteCountsByOption, voteCount } = usePollState();
   const { t } = useTranslationContext();
+  const translate = usePollTextTranslation();
   const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
   // `forceIncoming` is set on the full-options surface, which is a neutral card
   // rather than a bubble - so it wins over poll ownership.
@@ -129,7 +132,7 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
       <View style={[styles.info, info]}>
         <View style={[styles.header, header]}>
           <Text ellipsizeMode='tail' numberOfLines={2} style={[styles.text, text]}>
-            {option.text}
+            {translate(option.text, option.text_i18n)}
           </Text>
           <View style={[styles.votesContainer, votesContainer]}>
             {relevantVotes.length > 0 ? (
@@ -186,6 +189,7 @@ export const VoteButton = ({ forceIncoming, onPress, option }: PollVoteButtonPro
   } = useTheme();
 
   const toggleVote = usePollVoteToggle();
+  const translate = usePollTextTranslation();
 
   const onPressHandler = useCallback(() => {
     if (onPress) {
@@ -203,7 +207,7 @@ export const VoteButton = ({ forceIncoming, onPress, option }: PollVoteButtonPro
 
   return ownCapabilities.castPollVote && !isClosed ? (
     <Pressable
-      accessibilityLabel={option.text}
+      accessibilityLabel={translate(option.text, option.text_i18n)}
       accessibilityRole={poll.data?.enforce_unique_vote ? 'radio' : 'checkbox'}
       accessibilityState={accessibilityState}
       onPress={onPressHandler}

package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx

@@ -16,6 +16,7 @@ import { useComponentsContext } from '../../../../contexts/componentsContext/Com
 import { primitives } from '../../../../theme';
 import { usePollOptionVotesPagination } from '../../hooks/usePollOptionVotesPagination';
 import { usePollState } from '../../hooks/usePollState';
+import { usePollTextTranslation } from '../../hooks/usePollTextTranslation';
 
 export type PollOptionFullResultsProps = PollContextValue & {
   option: PollOption;
@@ -33,6 +34,8 @@ export const PollOptionFullResultsContent = ({
   const { t } = useTranslationContext();
   const { hasNextPage, loadMore, votes } = usePollOptionVotesPagination({ option });
   const { voteCountsByOption } = usePollState();
+  const translate = usePollTextTranslation();
+  const optionText = translate(option.text, option.text_i18n);
 
   const {
     theme: {
@@ -46,7 +49,7 @@ export const PollOptionFullResultsContent = ({
   const PollOptionFullResultsHeader = useCallback(
     () => (
       <View style={[styles.headerContainer, headerContainer]}>
-        <Text style={[styles.headerTitle, headerTitle]}>{option.text}</Text>
+        <Text style={[styles.headerTitle, headerTitle]}>{optionText}</Text>
         <Text style={[styles.headerText, headerText]}>
           {t('{{count}} votes', { count: voteCountsByOption[option.id] ?? 0 })}
         </Text>
@@ -57,7 +60,7 @@ export const PollOptionFullResultsContent = ({
       headerText,
       headerTitle,
       option.id,
-      option.text,
+      optionText,
       styles.headerContainer,
       styles.headerText,
       styles.headerTitle,

package/src/components/Poll/components/PollResults/PollResultItem.tsx

@@ -15,6 +15,7 @@ import {
 
 import { primitives } from '../../../../theme';
 import { usePollState } from '../../hooks/usePollState';
+import { usePollTextTranslation } from '../../hooks/usePollTextTranslation';
 import { GenericPollButton } from '../Button';
 import { PollModal } from '../PollModal';
 import { PollModalHeader } from '../PollModalHeader';
@@ -86,6 +87,7 @@ const PollResultsVoteItem = (vote: PollVoteClass) => (
 export const PollResultsItem = ({ option, index }: PollResultItemProps) => {
   const { t } = useTranslationContext();
   const { latestVotesByOption, voteCountsByOption } = usePollState();
+  const translate = usePollTextTranslation();
 
   const {
     theme: {
@@ -105,7 +107,7 @@ export const PollResultsItem = ({ option, index }: PollResultItemProps) => {
           {t('Option {{count}}', { count: index + 1 })}
         </Text>
         <View style={[styles.headerContainer, headerContainer]}>
-          <Text style={[styles.title, title]}>{option.text}</Text>
+          <Text style={[styles.title, title]}>{translate(option.text, option.text_i18n)}</Text>
           <Text style={[styles.voteCount, voteCount]}>
             {t('{{count}} votes', { count: voteCountsByOption[option.id] ?? 0 })}
           </Text>

package/src/components/Poll/components/PollResults/PollResults.tsx

@@ -14,6 +14,7 @@ import {
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../../theme';
 import { usePollState } from '../../hooks/usePollState';
+import { usePollTextTranslation } from '../../hooks/usePollTextTranslation';
 
 export type PollResultsProps = PollContextValue & {
   additionalScrollViewProps?: Partial<ScrollViewProps>;
@@ -22,7 +23,8 @@ export type PollResultsProps = PollContextValue & {
 export const PollResultsContent = ({
   additionalScrollViewProps,
 }: Pick<PollResultsProps, 'additionalScrollViewProps'>) => {
-  const { name, options, voteCountsByOption } = usePollState();
+  const { name, nameI18n, options, voteCountsByOption } = usePollState();
+  const translate = usePollTextTranslation();
 
   const sortedOptions = useMemo(
     () =>
@@ -51,7 +53,7 @@ export const PollResultsContent = ({
     >
       <View style={[styles.container, container]}>
         <Text style={[styles.titleMeta, titleMeta]}>{t('Question')}</Text>
-        <Text style={[styles.title, title]}>{name}</Text>
+        <Text style={[styles.title, title]}>{translate(name, nameI18n)}</Text>
       </View>
       <View style={styles.resultsContainer}>
         {sortedOptions.map((option, index) => (

package/src/components/Poll/hooks/usePollState.ts

@@ -7,6 +7,7 @@ import {
   PollOption,
   PollState,
   PollVote,
+  TranslatedField,
   UpdatePollAPIResponse,
   UserResponse,
   VotingVisibility,
@@ -28,6 +29,7 @@ export type UsePollStateSelectorReturnType = {
   maxVotedOptionIds: string[];
   maxVotesAllowed: number;
   name: string;
+  nameI18n: TranslatedField | undefined;
   options: PollOption[];
   ownAnswer: PollAnswer | undefined;
   ownVotesByOptionId: Record<string, PollVote>;
@@ -53,6 +55,7 @@ const selector = (nextValue: PollState): UsePollStateSelectorReturnType => ({
   maxVotedOptionIds: nextValue.maxVotedOptionIds,
   maxVotesAllowed: nextValue.max_votes_allowed,
   name: nextValue.name,
+  nameI18n: nextValue.name_i18n,
   options: nextValue.options,
   ownAnswer: nextValue.ownAnswer,
   ownVotesByOptionId: nextValue.ownVotesByOptionId,
@@ -74,6 +77,7 @@ export const usePollState = (): UsePollStateReturnType => {
     maxVotedOptionIds,
     maxVotesAllowed,
     name,
+    nameI18n,
     options,
     ownAnswer,
     ownVotesByOptionId,
@@ -108,6 +112,7 @@ export const usePollState = (): UsePollStateReturnType => {
     maxVotedOptionIds,
     maxVotesAllowed,
     name,
+    nameI18n,
     options,
     ownAnswer,
     ownVotesByOptionId,

package/src/components/Poll/hooks/usePollTextTranslation.ts

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+
+import type { TranslatedField } from 'stream-chat';
+
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { getTranslatedText } from '../../../utils/i18n/getTranslatedText';
+
+/**
+ * Returns `translate(original, i18n)`, which resolves a poll text (question, option or answer)
+ * into the current user's language. Falls back to `original` when there is no translation for it,
+ * the same way auto-translated message text does.
+ */
+export const usePollTextTranslation = () => {
+  const { userLanguage } = useTranslationContext();
+
+  return useCallback(
+    (original: string, i18n: TranslatedField | undefined): string =>
+      getTranslatedText(i18n, userLanguage) ?? original,
+    [userLanguage],
+  );
+};

package/src/components/Poll/index.ts

@@ -8,3 +8,4 @@ export * from './hooks/usePollState';
 export * from './hooks/usePollStateStore';
 export * from './hooks/usePollAnswersPagination';
 export * from './hooks/usePollOptionVotesPagination';
+export * from './hooks/usePollTextTranslation';

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

@@ -59,6 +59,26 @@ describe('useTranslatedMessage', () => {
     });
   });
 
+  it("doesn't translate a deleted message", async () => {
+    const message = {
+      i18n: {
+        no_text: 'Hallo verden!',
+      },
+      text: 'Hello world!',
+      type: 'deleted',
+    } as unknown as MessageResponse;
+
+    render(
+      <TranslationProvider value={{ userLanguage: 'no' } as TranslationContextValue}>
+        <TestComponent message={message} />
+      </TranslationProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Hello world!')).toBeTruthy();
+    });
+  });
+
   it("returns the original text if the message doesn't contain any translations", async () => {
     const message = {
       text: 'Hello world!',

package/src/hooks/messagePreview/__tests__/useMessagePreviewText.test.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react';
 
 import { renderHook, waitFor } from '@testing-library/react-native';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, PollResponse, StreamChat } from 'stream-chat';
 
 import { Chat } from '../../../components/Chat/Chat';
 import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
@@ -15,8 +15,12 @@ import { generateMessage } from '../../../mock-builders/generator/message';
 import { useMessagePreviewText } from '../useMessagePreviewText';
 
 describe('useMessagePreviewText', () => {
-  const render = async (message: ReturnType<typeof generateMessage>) => {
+  const render = async (
+    message: ReturnType<typeof generateMessage>,
+    prepareClient?: (client: StreamChat) => void,
+  ) => {
     const { client } = await initiateClientWithChannels();
+    prepareClient?.(client);
     const wrapper = ({ children }: PropsWithChildren) => <Chat client={client}>{children}</Chat>;
     const { result } = renderHook(() => useMessagePreviewText({ message }), { wrapper });
     return result;
@@ -56,4 +60,35 @@ describe('useMessagePreviewText', () => {
     );
     expect(result.current).toBe('hello');
   });
+
+  describe('poll messages', () => {
+    const poll = {
+      id: 'poll-id',
+      latest_answers: [],
+      latest_votes_by_option: {},
+      name: 'Favourite colour?',
+      name_i18n: { es_text: '¿Color favorito?', language: 'en' },
+      options: [],
+      vote_count: 0,
+      vote_counts_by_option: {},
+    } as unknown as PollResponse;
+
+    const renderPollMessage = (language: string) => {
+      const message = generateMessage({ poll, poll_id: poll.id, text: '' });
+      return render(message, (client) => {
+        (client.user as { language?: string }).language = language;
+        client.polls.hydratePollCache([message]);
+      });
+    };
+
+    it("shows the poll question in the user's language", async () => {
+      const result = await renderPollMessage('es');
+      expect(result.current).toBe('¿Color favorito?');
+    });
+
+    it('shows the original poll question when it has no translation', async () => {
+      const result = await renderPollMessage('de');
+      expect(result.current).toBe('Favourite colour?');
+    });
+  });
 });

package/src/hooks/messagePreview/useMessagePreviewText.tsx

@@ -12,9 +12,11 @@ import { useGroupedAttachments } from './useGroupedAttachments';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks/useStateStore';
+import { getTranslatedText } from '../../utils/i18n/getTranslatedText';
 
 const selector = (nextValue: PollState) => ({
   name: nextValue.name,
+  name_i18n: nextValue.name_i18n,
 });
 
 export const useMessagePreviewText = ({
@@ -22,10 +24,11 @@ export const useMessagePreviewText = ({
 }: {
   message?: LocalMessage | MessageResponse | DraftMessage | null;
 }) => {
-  const { t } = useTranslationContext();
+  const { t, userLanguage } = useTranslationContext();
   const { client } = useChatContext();
   const poll = client.polls.fromState(message?.poll_id ?? '');
-  const { name: pollName } = useStateStore(poll?.state, selector) ?? {};
+  const { name, name_i18n } = useStateStore(poll?.state, selector) ?? {};
+  const pollName = getTranslatedText(name_i18n, userLanguage) ?? name;
   const { giphys, audios, images, videos, files, voiceRecordings } = useGroupedAttachments(
     message?.attachments,
   );

package/src/hooks/useTranslatedMessage.ts

@@ -1,22 +1,22 @@
-import type { LocalMessage, MessageResponse, TranslationLanguages } from 'stream-chat';
+import type { LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useTranslationContext } from '../contexts/translationContext/TranslationContext';
-
-type TranslationKey = `${TranslationLanguages}_text`;
+import { getTranslatedText } from '../utils/i18n/getTranslatedText';
 
 export const useTranslatedMessage = (message?: LocalMessage | MessageResponse) => {
   const { userLanguage } = useTranslationContext();
 
-  const translationKey: TranslationKey = `${userLanguage}_text`;
-
   if (!message) {
     return undefined;
   }
 
-  if (message.i18n && translationKey in message.i18n && message.type !== 'deleted') {
+  const translatedText =
+    message.type !== 'deleted' ? getTranslatedText(message.i18n, userLanguage) : undefined;
+
+  if (translatedText !== undefined) {
     return {
       ...message,
-      text: message.i18n[translationKey],
+      text: translatedText,
     };
   }
 

package/src/store/SqliteClient.ts

@@ -51,7 +51,7 @@ export class SqliteClientError extends Error {
  * This way usage @op-engineering/op-sqlite package is scoped to a single class/file.
  */
 export class SqliteClient {
-  static dbVersion = 16;
+  static dbVersion = 17;
 
   static dbName = DB_NAME;
   static dbLocation = DB_LOCATION;