stream-chat-react-native-core 5.27.0 → 5.27.1-beta.1

package/src/__tests__/offline-support/offline-feature.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
-import { act, cleanup, render, waitFor } from '@testing-library/react-native';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { v4 as uuidv4 } from 'uuid';
 
@@ -46,7 +46,7 @@ import { BetterSqlite } from '../../test-utils/BetterSqlite';
  * to debug.
  */
 const ChannelPreviewComponent = ({ channel, setActiveChannel }) => (
-  <View accessibilityRole='list-item' onPress={setActiveChannel} testID={channel.cid}>
+  <View accessibilityLabel='list-item' onPress={setActiveChannel} testID={channel.cid}>
     <Text>{channel.data.name}</Text>
     <Text>{channel.state.messages[0]?.text}</Text>
   </View>
@@ -90,12 +90,12 @@ export const Generic = () => {
     });
 
     it('should NOT create tables on first load if offline feature is disabled', async () => {
-      const { getByTestId } = render(
+      render(
         <Chat client={chatClient}>
           <View testID='test-child'></View>
         </Chat>,
       );
-      await waitFor(() => expect(getByTestId('test-child')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('test-child')).toBeTruthy());
 
       const tablesInDb = BetterSqlite.getTables();
       const tableNamesInDB = tablesInDb.map((table) => table.name);
@@ -209,8 +209,8 @@ export const Generic = () => {
         </Chat>,
       );
 
-    const expectCIDsOnUIToBeInDB = (queryAllByA11yRole) => {
-      const channelIdsOnUI = queryAllByA11yRole('list-item').map(
+    const expectCIDsOnUIToBeInDB = (queryAllByLabelText) => {
+      const channelIdsOnUI = queryAllByLabelText('list-item').map(
         (node) => node._fiber.pendingProps.testID,
       );
 
@@ -229,8 +229,8 @@ export const Generic = () => {
       });
     };
 
-    const expectAllChannelsWithStateToBeInDB = (queryAllByA11yRole) => {
-      const channelIdsOnUI = queryAllByA11yRole('list-item').map(
+    const expectAllChannelsWithStateToBeInDB = (queryAllByLabelText) => {
+      const channelIdsOnUI = queryAllByLabelText('list-item').map(
         (node) => node._fiber.pendingProps.testID,
       );
 
@@ -278,12 +278,12 @@ export const Generic = () => {
     };
 
     it('should create tables on first load if offline feature is enabled', async () => {
-      const { getByTestId } = render(
+      render(
         <Chat client={chatClient} enableOfflineSupport>
           <View testID='test-child'></View>
         </Chat>,
       );
-      await waitFor(() => expect(getByTestId('test-child')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('test-child')).toBeTruthy());
 
       const tablesInDb = BetterSqlite.getTables();
       const tableNamesInDB = tablesInDb.map((table) => table.name);
@@ -294,31 +294,31 @@ export const Generic = () => {
 
     it('should store filter-sort query and cids on ChannelList in channelQueries table', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
-      const { getByTestId, queryAllByA11yRole } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       // await waiter();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
-      expectCIDsOnUIToBeInDB(queryAllByA11yRole);
+      expectCIDsOnUIToBeInDB(screen.queryAllByLabelText);
     });
 
     it('should store channels and its state in tables', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId, queryAllByA11yRole } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
-      expectAllChannelsWithStateToBeInDB(queryAllByA11yRole);
+      expectAllChannelsWithStateToBeInDB(screen.queryAllByLabelText);
     });
 
     it('should add a new message to database', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
       const newMessage = generateMessage({
         cid: channels[0].channel.cid,
         user: generateUser(),
@@ -334,9 +334,9 @@ export const Generic = () => {
     it('should add a new channel and a new message to database from notification event', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId, queryAllByA11yRole } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
       const newChannel = createChannel();
       channels.push(newChannel);
@@ -344,21 +344,21 @@ export const Generic = () => {
 
       act(() => dispatchNotificationMessageNewEvent(chatClient, newChannel.channel));
       await waitFor(() => {
-        const channelIdsOnUI = queryAllByA11yRole('list-item').map(
-          (node) => node._fiber.pendingProps.testID,
-        );
+        const channelIdsOnUI = screen
+          .queryAllByLabelText('list-item')
+          .map((node) => node._fiber.pendingProps.testID);
         expect(channelIdsOnUI.includes(newChannel.channel.cid)).toBeTruthy();
       });
 
-      expectAllChannelsWithStateToBeInDB(queryAllByA11yRole);
+      expectAllChannelsWithStateToBeInDB(screen.queryAllByLabelText);
     });
 
     it('should update a message in database', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
       const updatedMessage = { ...channels[0].messages[0] };
       updatedMessage.text = uuidv4();
@@ -375,19 +375,19 @@ export const Generic = () => {
     it('should remove the channel from DB when user is removed as member', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId, queryAllByA11yRole } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
       const removedChannel = channels[getRandomInt(0, channels.length - 1)].channel;
       act(() => dispatchNotificationRemovedFromChannel(chatClient, removedChannel));
       await waitFor(() => {
-        const channelIdsOnUI = queryAllByA11yRole('list-item').map(
-          (node) => node._fiber.pendingProps.testID,
-        );
+        const channelIdsOnUI = screen
+          .queryAllByLabelText('list-item')
+          .map((node) => node._fiber.pendingProps.testID);
         expect(channelIdsOnUI.includes(removedChannel.cid)).toBeFalsy();
       });
 
-      expectCIDsOnUIToBeInDB(queryAllByA11yRole);
+      expectCIDsOnUIToBeInDB(screen.queryAllByLabelText);
 
       const channelsRows = BetterSqlite.selectFromTable('channels');
       const matchingRows = channelsRows.filter((c) => c.id === removedChannel.id);
@@ -402,9 +402,9 @@ export const Generic = () => {
     it('should add the channel to DB when user is added as member', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId, queryAllByA11yRole } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
       const newChannel = createChannel();
       useMockedApis(chatClient, [getOrCreateChannelApi(newChannel)]);
@@ -412,13 +412,13 @@ export const Generic = () => {
       act(() => dispatchNotificationAddedToChannel(chatClient, newChannel.channel));
 
       await waitFor(() => {
-        const channelIdsOnUI = queryAllByA11yRole('list-item').map(
-          (node) => node._fiber.pendingProps.testID,
-        );
+        const channelIdsOnUI = screen
+          .queryAllByLabelText('list-item')
+          .map((node) => node._fiber.pendingProps.testID);
         expect(channelIdsOnUI.includes(newChannel.channel.cid)).toBeTruthy();
       });
 
-      expectCIDsOnUIToBeInDB(queryAllByA11yRole);
+      expectCIDsOnUIToBeInDB(screen.queryAllByLabelText);
       const channelsRows = BetterSqlite.selectFromTable('channels');
       const matchingChannelsRows = channelsRows.filter((c) => c.id === newChannel.channel.id);
 
@@ -432,21 +432,21 @@ export const Generic = () => {
     it('should remove the channel messages from DB when channel is truncated', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId, queryAllByA11yRole } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
       const channelToTruncate = channels[getRandomInt(0, channels.length - 1)].channel;
       act(() => dispatchChannelTruncatedEvent(chatClient, channelToTruncate));
 
       await waitFor(() => {
-        const channelIdsOnUI = queryAllByA11yRole('list-item').map(
-          (node) => node._fiber.pendingProps.testID,
-        );
+        const channelIdsOnUI = screen
+          .queryAllByLabelText('list-item')
+          .map((node) => node._fiber.pendingProps.testID);
         expect(channelIdsOnUI.includes(channelToTruncate.cid)).toBeTruthy();
       });
 
-      expectCIDsOnUIToBeInDB(queryAllByA11yRole);
+      expectCIDsOnUIToBeInDB(screen.queryAllByLabelText);
 
       const messagesRows = BetterSqlite.selectFromTable('messages');
       const matchingMessagesRows = messagesRows.filter((m) => m.cid === channelToTruncate.cid);
@@ -456,10 +456,9 @@ export const Generic = () => {
 
     it('should add a reaction to DB when a new reaction is added', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
-
-      const { getByTestId } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -500,9 +499,9 @@ export const Generic = () => {
     it('should remove a reaction from DB when reaction is deleted', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -548,9 +547,9 @@ export const Generic = () => {
     it('should update a reaction in DB when reaction is updated', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -582,9 +581,9 @@ export const Generic = () => {
     it('should add a member to DB when a new member is added to channel', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const newMember = generateMember();
@@ -601,9 +600,9 @@ export const Generic = () => {
     it('should remove a member from DB when a member is removed from channel', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMember = targetChannel.members[getRandomInt(0, targetChannel.members.length - 1)];
@@ -620,9 +619,9 @@ export const Generic = () => {
     it('should update the member in DB when a member of a channel is updated', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMember = targetChannel.members[getRandomInt(0, targetChannel.members.length - 1)];
@@ -644,9 +643,9 @@ export const Generic = () => {
     it('should update the channel data in DB when a channel is updated', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       targetChannel.channel.name = uuidv4();
@@ -665,9 +664,9 @@ export const Generic = () => {
     it('should update reads in DB when channel is read', async () => {
       useMockedApis(chatClient, [queryChannelsApi(channels)]);
 
-      const { getByTestId } = renderComponent();
+      renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
-      await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMember = targetChannel.members[getRandomInt(0, targetChannel.members.length - 1)];
 

package/src/__tests__/offline-support/optimistic-update.js

@@ -3,7 +3,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { View } from 'react-native';
 
-import { act, cleanup, render, waitFor } from '@testing-library/react-native';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { v4 as uuidv4 } from 'uuid';
 
@@ -146,7 +146,7 @@ export const OptimisticUpdates = () => {
       it('pending task should exist if deleteMessage request fails', async () => {
         const message = generateMessage();
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel} initialValue={message.text}>
               <CallbackEffectWithContext
@@ -165,7 +165,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
@@ -177,7 +177,7 @@ export const OptimisticUpdates = () => {
 
       it('pending task should be cleared if deleteMessage request is succesful', async () => {
         const message = generateMessage();
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel} initialValue={message.text}>
               <CallbackEffectWithContext
@@ -192,7 +192,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
           expect(pendingTasksRows.length).toBe(0);
@@ -205,7 +205,7 @@ export const OptimisticUpdates = () => {
         const reaction = generateReaction();
         const targetMessage = channel.state.messages[0];
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel}>
               <CallbackEffectWithContext
@@ -224,7 +224,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
@@ -238,7 +238,7 @@ export const OptimisticUpdates = () => {
         const reaction = generateReaction();
         const targetMessage = channel.state.messages[0];
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel}>
               <CallbackEffectWithContext
@@ -253,7 +253,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
           expect(pendingTasksRows.length).toBe(0);
@@ -266,7 +266,7 @@ export const OptimisticUpdates = () => {
         const reaction = generateReaction();
         const targetMessage = channel.state.messages[0];
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel}>
               <CallbackEffectWithContext
@@ -285,7 +285,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
@@ -299,7 +299,7 @@ export const OptimisticUpdates = () => {
         const reaction = generateReaction();
         const targetMessage = channel.state.messages[0];
 
-        const { getByTestId } = render(
+        render(
           <Chat client={chatClient} enableOfflineSupport>
             <Channel channel={channel}>
               <CallbackEffectWithContext
@@ -314,7 +314,7 @@ export const OptimisticUpdates = () => {
             </Channel>
           </Chat>,
         );
-        await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
 
         await waitFor(() => {
           const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');
@@ -327,7 +327,7 @@ export const OptimisticUpdates = () => {
       const message = channel.state.messages[0];
       const reaction = generateReaction();
 
-      const { getByTestId } = render(
+      render(
         <Chat client={chatClient} enableOfflineSupport>
           <Channel channel={channel} initialValue={message.text}>
             <CallbackEffectWithContext
@@ -353,7 +353,7 @@ export const OptimisticUpdates = () => {
           </Channel>
         </Chat>,
       );
-      await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
 
       await waitFor(() => {
         const pendingTasksRows = BetterSqlite.selectFromTable('pendingTasks');

package/src/components/Attachment/AudioAttachment.tsx

@@ -311,4 +311,4 @@ export const AudioAttachment = (props: AudioAttachmentProps) => (
   <AudioAttachmentWithContext {...props} />
 );
 
-AudioAttachment.displayName = 'AudioAttachment{messageInput{autoAttachment}}';
+AudioAttachment.displayName = 'AudioAttachment{messageInput{audioAttachment}}';

package/src/components/Attachment/Card.tsx

@@ -121,8 +121,8 @@ const CardWithContext = <
     CardCover,
     CardFooter,
     CardHeader,
-    ImageComponent = Image,
     image_url,
+    ImageComponent = Image,
     og_scrape_url,
     onLongPress,
     onPress,

package/src/components/Attachment/FileAttachment.tsx

@@ -75,8 +75,8 @@ const FileAttachmentWithContext = <
   const {
     additionalTouchableProps,
     attachment,
-    attachmentSize,
     AttachmentActions,
+    attachmentSize,
     FileAttachmentIcon,
     onLongPress,
     onPress,

package/src/components/Attachment/FileIcon.tsx

@@ -361,7 +361,7 @@ const videoFileTypes = [
   'video/x-flv',
 ];
 
-const mimeTypeToIconMap: Record<string, React.FC<IconProps>> = {
+const mimeTypeToIconMap: Record<string, React.ComponentType<IconProps>> = {
   'application/pdf': PDF, // .pdf
   'application/rtf': RTF, // .rtf
   'application/vnd.rar': RAR, // .rar
@@ -416,7 +416,7 @@ for (const type of videoFileTypes) {
   mimeTypeToIconMap[type] = Video;
 }
 
-function mimeTypeToIcon(mimeType?: string): React.FC<IconProps> {
+function mimeTypeToIcon(mimeType?: string): React.ComponentType<IconProps> {
   if (!mimeType) return GenericFile;
 
   const Icon = mimeTypeToIconMap[mimeType];
@@ -430,7 +430,7 @@ export type FileIconProps = {
   size?: number;
 };
 
-export const FileIcon: React.FC<FileIconProps> = ({ mimeType, size }) => {
+export const FileIcon = ({ mimeType, size }: FileIconProps) => {
   const {
     theme: {
       messageSimple: {

package/src/components/Attachment/GalleryImage.tsx

@@ -10,7 +10,7 @@ export type GalleryImageWithContextProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = GalleryImageProps & Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'>;
 
-export const GalleryImageWithContext: React.FC<GalleryImageWithContextProps> = (props) => {
+export const GalleryImageWithContext = (props: GalleryImageWithContextProps) => {
   const { ImageComponent = Image, uri, ...rest } = props;
 
   // Caching image components such as FastImage will not work with local images.

package/src/components/Attachment/ImageLoadingFailedIndicator.tsx

@@ -49,7 +49,7 @@ export const ImageLoadingFailedIndicator = (props: ImageLoadingFailedIndicatorPr
           style={styles.warningIconStyle}
           width={WARNING_ICON_SIZE}
         />
-        <Text style={[styles.errorText, { color: white }]}>{t('Error loading')}</Text>
+        <Text style={[styles.errorText, { color: white }]}>{t<string>('Error loading')}</Text>
       </View>
     </View>
   );

package/src/components/Attachment/VideoThumbnail.tsx

@@ -37,7 +37,7 @@ export type VideoThumbnailProps = {
   thumb_url?: string;
 };
 
-export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
+export const VideoThumbnail = (props: VideoThumbnailProps) => {
   const {
     theme: {
       colors: { static_black, static_white },