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

package/src/components/Attachment/Giphy.tsx

@@ -49,6 +49,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   container: {
+    borderRadius: 16,
     overflow: 'hidden',
     width: 270,
   },
@@ -63,9 +64,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderRadius: 12,
     flexDirection: 'row',
-    height: 24,
     justifyContent: 'center',
-    width: 68,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
   },
   giphyHeaderText: {
     fontSize: 16,

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 },

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import {
   fireEvent,
   render,
+  screen,
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react-native';
@@ -68,14 +69,14 @@ describe('Gallery', () => {
       original_width: 400,
     });
     const component = await getComponent([attachment1, attachment2]);
-    const { queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
       // expect(queryAllByTestId('gallery-row-1').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
     });
   });
 
@@ -87,13 +88,13 @@ describe('Gallery', () => {
     });
     const attachment2 = generateVideoAttachment();
     const component = await getComponent([attachment1, attachment2]);
-    const { getAllByA11yLabel, queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(getAllByA11yLabel('Video Thumbnail').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.getAllByLabelText('Video Thumbnail').length).toBe(1);
     });
   });
 
@@ -107,13 +108,13 @@ describe('Gallery', () => {
       original_width: 400,
     });
     const component = await getComponent([attachment1, attachment2]);
-    const { queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
     });
   });
 
@@ -135,13 +136,13 @@ describe('Gallery', () => {
       original_width: 400,
     });
     const component = await getComponent([attachment1, attachment2]);
-    const { queryAllByTestId } = render(component);
+    render(component);
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
     });
   });
 
@@ -169,15 +170,15 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([portraitImage, squareImage1, squareImage2]);
-    const { queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-column-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-column-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-column-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-column-1').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-column-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-column-1-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-column-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-column-1-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
     });
   });
 
@@ -205,15 +206,15 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([portraitImage, squareImage1, squareImage2]);
-    const { queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1-item-1').length).toBe(1);
     });
   });
 
@@ -245,16 +246,16 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([image1, image2, image3, image4]);
-    const { queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1').length).toBe(1);
 
-      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
-      expect(queryAllByTestId('gallery-row-1-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-row-1-item-1').length).toBe(1);
     });
   });
 
@@ -265,15 +266,15 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([image1]);
-    const { getByA11yLabel, getByAccessibilityHint, queryAllByTestId } = render(component);
+    render(component);
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-container').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-container').length).toBe(1);
     });
 
-    fireEvent(getByA11yLabel('Gallery Image'), 'error', {
+    fireEvent(screen.getByLabelText('Gallery Image'), 'error', {
       nativeEvent: { error: 'error loading image' },
     });
-    expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
+    expect(screen.getByAccessibilityHint('image-loading-error')).toBeTruthy();
   });
 
   it('should render a loading indicator and when successful render the image', async () => {
@@ -283,17 +284,17 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([image1]);
-    const { getByA11yLabel, getByAccessibilityHint, queryAllByTestId } = render(component);
+    render(component);
 
     await waitFor(() => {
-      expect(queryAllByTestId('gallery-container').length).toBe(1);
+      expect(screen.queryAllByTestId('gallery-container').length).toBe(1);
     });
 
-    fireEvent(getByA11yLabel('Gallery Image'), 'onLoadStart');
-    expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+    fireEvent(screen.getByLabelText('Gallery Image'), 'onLoadStart');
+    expect(screen.getByAccessibilityHint('image-loading')).toBeTruthy();
 
-    fireEvent(getByA11yLabel('Gallery Image'), 'onLoadFinish');
-    waitForElementToBeRemoved(() => getByAccessibilityHint('Image Loading'));
-    expect(getByA11yLabel('Gallery Image')).toBeTruthy();
+    fireEvent(screen.getByLabelText('Gallery Image'), 'onLoadFinish');
+    waitForElementToBeRemoved(() => screen.getByAccessibilityHint('image-loading'));
+    expect(screen.getByLabelText('Gallery Image')).toBeTruthy();
   });
 });

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -4,6 +4,8 @@ import {
   cleanup,
   fireEvent,
   render,
+  screen,
+  userEvent,
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react-native';
@@ -98,29 +100,24 @@ describe('Giphy', () => {
   afterEach(cleanup);
 
   it('should render Card component for "imgur" type attachment', async () => {
-    const { getByTestId } = render(getAttachmentComponent({ attachment }));
+    render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
-      expect(getByTestId('giphy-attachment')).toBeTruthy();
+      expect(screen.getByTestId('giphy-attachment')).toBeTruthy();
     });
   });
 
   it('should render Card component for "giphy" type attachment', async () => {
-    const { getByTestId } = render(getAttachmentComponent({ attachment }));
+    render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
-      expect(getByTestId('giphy-attachment')).toBeTruthy();
+      expect(screen.getByTestId('giphy-attachment')).toBeTruthy();
     });
   });
 
   it('"giphy" attachment size should be customisable', async () => {
     attachment.giphy = giphy;
-    const { getByTestId: getByTestIdFixedHeight } = render(
-      getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
-    );
-    const { getByTestId: getByTestIdOriginal } = render(
-      getAttachmentComponent({ attachment, giphyVersion: 'original' }),
-    );
+    render(getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }));
     await waitFor(() => {
       const checkImageProps = (imageProps, specificSizedGiphyData) => {
         let imageStyle = imageProps.style;
@@ -132,11 +129,23 @@ describe('Giphy', () => {
         expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
       };
       checkImageProps(
-        getByTestIdFixedHeight('giphy-attachment-image').props,
+        screen.getByTestId('giphy-attachment-image').props,
         attachment.giphy.fixed_height,
       );
+    });
+    render(getAttachmentComponent({ attachment, giphyVersion: 'original' }));
+    await waitFor(() => {
+      const checkImageProps = (imageProps, specificSizedGiphyData) => {
+        let imageStyle = imageProps.style;
+        if (Array.isArray(imageStyle)) {
+          imageStyle = Object.assign({}, ...imageStyle);
+        }
+        expect(imageStyle.height).toBe(parseFloat(specificSizedGiphyData.height));
+        expect(imageStyle.width).toBe(parseFloat(specificSizedGiphyData.width));
+        expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
+      };
       checkImageProps(
-        getByTestIdOriginal('giphy-attachment-image').props,
+        screen.getByTestId('giphy-attachment-image').props,
         attachment.giphy.original,
       );
     });
@@ -144,22 +153,21 @@ describe('Giphy', () => {
 
   it('show render giphy action UI and all the 3 action buttons', async () => {
     attachment.actions = actions;
-    const { getByTestId } = render(
-      getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
-    );
+    render(getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }));
 
     await waitFor(() => {
-      expect(getByTestId('giphy-action-attachment')).toBeTruthy();
-      expect(getByTestId('cancel-action-button')).toBeTruthy();
-      expect(getByTestId('shuffle-action-button')).toBeTruthy();
-      expect(getByTestId('send-action-button')).toBeTruthy();
+      expect(screen.getByTestId('giphy-action-attachment')).toBeTruthy();
+      expect(screen.getByTestId('cancel-action-button')).toBeTruthy();
+      expect(screen.getByTestId('shuffle-action-button')).toBeTruthy();
+      expect(screen.getByTestId('send-action-button')).toBeTruthy();
     });
   });
 
   it('should trigger the cancel giphy action', async () => {
     const handleAction = jest.fn();
+    const user = userEvent.setup();
     attachment.actions = actions;
-    const { getByTestId } = render(
+    render(
       getAttachmentComponent({
         attachment,
         giphyVersion: 'fixed_height',
@@ -167,13 +175,13 @@ describe('Giphy', () => {
       }),
     );
 
-    await waitFor(() => getByTestId(`${attachment.actions[2].value}-action-button`));
+    await waitFor(() => screen.getByTestId(`${attachment.actions[2].value}-action-button`));
 
-    expect(getByTestId('giphy-action-attachment')).toContainElement(
-      getByTestId(`${attachment.actions[2].value}-action-button`),
+    expect(screen.getByTestId('giphy-action-attachment')).toContainElement(
+      screen.getByTestId(`${attachment.actions[2].value}-action-button`),
     );
 
-    fireEvent.press(getByTestId(`${attachment.actions[2].value}-action-button`));
+    user.press(screen.getByTestId(`${attachment.actions[2].value}-action-button`));
 
     await waitFor(() => {
       expect(handleAction).toHaveBeenCalledTimes(1);
@@ -182,8 +190,9 @@ describe('Giphy', () => {
 
   it('should trigger the shuffle giphy action', async () => {
     const handleAction = jest.fn();
+    const user = userEvent.setup();
     attachment.actions = actions;
-    const { getByTestId } = render(
+    render(
       getAttachmentComponent({
         attachment,
         giphyVersion: 'fixed_height',
@@ -191,13 +200,13 @@ describe('Giphy', () => {
       }),
     );
 
-    await waitFor(() => getByTestId(`${attachment.actions[1].value}-action-button`));
+    await waitFor(() => screen.getByTestId(`${attachment.actions[1].value}-action-button`));
 
-    expect(getByTestId('giphy-action-attachment')).toContainElement(
-      getByTestId(`${attachment.actions[1].value}-action-button`),
+    expect(screen.getByTestId('giphy-action-attachment')).toContainElement(
+      screen.getByTestId(`${attachment.actions[1].value}-action-button`),
     );
 
-    fireEvent.press(getByTestId(`${attachment.actions[1].value}-action-button`));
+    user.press(screen.getByTestId(`${attachment.actions[1].value}-action-button`));
 
     await waitFor(() => {
       expect(handleAction).toHaveBeenCalledTimes(1);
@@ -206,8 +215,9 @@ describe('Giphy', () => {
 
   it('should trigger the send giphy action', async () => {
     const handleAction = jest.fn();
+    const user = userEvent.setup();
     attachment.actions = actions;
-    const { getByTestId } = render(
+    render(
       getAttachmentComponent({
         attachment,
         giphyVersion: 'fixed_height',
@@ -215,13 +225,13 @@ describe('Giphy', () => {
       }),
     );
 
-    await waitFor(() => getByTestId(`${attachment.actions[0].value}-action-button`));
+    await waitFor(() => screen.getByTestId(`${attachment.actions[0].value}-action-button`));
 
-    expect(getByTestId('giphy-action-attachment')).toContainElement(
-      getByTestId(`${attachment.actions[0].value}-action-button`),
+    expect(screen.getByTestId('giphy-action-attachment')).toContainElement(
+      screen.getByTestId(`${attachment.actions[0].value}-action-button`),
     );
 
-    fireEvent.press(getByTestId(`${attachment.actions[0].value}-action-button`));
+    user.press(screen.getByTestId(`${attachment.actions[0].value}-action-button`));
 
     await waitFor(() => {
       expect(handleAction).toHaveBeenCalledTimes(1);
@@ -245,7 +255,7 @@ describe('Giphy', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.watch();
 
-    const { getByTestId, queryByTestId } = render(
+    render(
       <OverlayProvider i18nInstance={streami18n}>
         <Chat client={chatClient} i18nInstance={streami18n}>
           <Channel channel={channel}>
@@ -256,15 +266,15 @@ describe('Giphy', () => {
     );
 
     await waitFor(() => {
-      expect(queryByTestId('giphy-action-attachment')).toBeTruthy();
-      expect(getByTestId('cancel-action-button')).toBeTruthy();
-      expect(getByTestId('shuffle-action-button')).toBeTruthy();
-      expect(getByTestId('send-action-button')).toBeTruthy();
+      expect(screen.queryByTestId('giphy-action-attachment')).toBeTruthy();
+      expect(screen.getByTestId('cancel-action-button')).toBeTruthy();
+      expect(screen.getByTestId('shuffle-action-button')).toBeTruthy();
+      expect(screen.getByTestId('send-action-button')).toBeTruthy();
     });
   });
 
   it('giphy attachment UI should render within the message list', async () => {
-    const { queryByTestId } = render(
+    render(
       <OverlayProvider i18nInstance={streami18n}>
         <Chat client={chatClient} i18nInstance={streami18n}>
           <Channel channel={channel}>
@@ -275,12 +285,12 @@ describe('Giphy', () => {
     );
 
     await waitFor(() => {
-      expect(queryByTestId('giphy-attachment')).toBeTruthy();
+      expect(screen.queryByTestId('giphy-attachment')).toBeTruthy();
     });
   });
 
   it('should render a error indicator in giphy image', async () => {
-    const { getByA11yLabel, getByAccessibilityHint, queryByTestId } = render(
+    render(
       <OverlayProvider i18nInstance={streami18n}>
         <Chat client={chatClient} i18nInstance={streami18n}>
           <Channel channel={channel}>
@@ -290,15 +300,15 @@ describe('Giphy', () => {
       </OverlayProvider>,
     );
     await waitFor(() => {
-      expect(queryByTestId('giphy-attachment')).toBeTruthy();
+      expect(screen.queryByTestId('giphy-attachment')).toBeTruthy();
     });
 
-    fireEvent(getByA11yLabel('Giphy Attachment Image'), 'error');
-    expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
+    fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'error');
+    expect(screen.getByAccessibilityHint('image-loading-error')).toBeTruthy();
   });
 
   it('should render a loading indicator in giphy image and when successful render the image', async () => {
-    const { getByA11yLabel, getByAccessibilityHint } = render(
+    render(
       <OverlayProvider i18nInstance={streami18n}>
         <Chat client={chatClient} i18nInstance={streami18n}>
           <Channel channel={channel}>
@@ -308,16 +318,16 @@ describe('Giphy', () => {
       </OverlayProvider>,
     );
     await waitFor(() => {
-      expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+      expect(screen.getByAccessibilityHint('image-loading')).toBeTruthy();
     });
 
-    fireEvent(getByA11yLabel('Giphy Attachment Image'), 'onLoadStart');
+    fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'onLoadStart');
 
-    expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+    expect(screen.getByAccessibilityHint('image-loading')).toBeTruthy();
 
-    fireEvent(getByA11yLabel('Giphy Attachment Image'), 'onLoadFinish');
+    fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'onLoadFinish');
 
-    waitForElementToBeRemoved(() => getByAccessibilityHint('image-loading'));
-    expect(getByA11yLabel('Giphy Attachment Image')).toBeTruthy();
+    waitForElementToBeRemoved(() => screen.getByAccessibilityHint('image-loading'));
+    expect(screen.getByLabelText('Giphy Attachment Image')).toBeTruthy();
   });
 });

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -182,13 +182,16 @@ export const AttachmentPicker = React.forwardRef(
       const keyboardSubscription = Keyboard.addListener(keyboardShowEvent, onKeyboardOpenHandler);
 
       return () => {
+        // Following if-else condition to avoid deprecated warning coming RN 0.65
         if (keyboardSubscription?.remove) {
           keyboardSubscription.remove();
           return;
         }
-
-        // To keep compatibility with older versions of React Native, where `remove()` is not available
-        Keyboard.removeListener(keyboardShowEvent, onKeyboardOpenHandler);
+        // @ts-ignore
+        else if (Keyboard.removeListener) {
+          // @ts-ignore
+          Keyboard.removeListener(keyboardShowEvent, onKeyboardOpenHandler);
+        }
       };
     }, [closePicker, selectedPicker]);
 

package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx

@@ -17,9 +17,11 @@ const styles = StyleSheet.create({
   },
 });
 
-export const AttachmentPickerBottomSheetHandle: React.FC<{
+type Props = {
   animatedIndex: Animated.SharedValue<number>;
-}> = ({ animatedIndex }) => {
+};
+
+export const AttachmentPickerBottomSheetHandle = ({ animatedIndex }: Props) => {
   const {
     theme: {
       colors: { black, white },

package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx

@@ -36,7 +36,7 @@ export type AttachmentPickerErrorProps = {
   attachmentPickerErrorText?: string;
 };
 
-export const AttachmentPickerError: React.FC<AttachmentPickerErrorProps> = (props) => {
+export const AttachmentPickerError = (props: AttachmentPickerErrorProps) => {
   const {
     attachmentPickerBottomSheetHeight,
     attachmentPickerErrorButtonText,
@@ -78,14 +78,14 @@ export const AttachmentPickerError: React.FC<AttachmentPickerErrorProps> = (prop
       <AttachmentPickerErrorImage />
       <Text style={[styles.errorText, { color: grey }, errorText]}>
         {attachmentPickerErrorText ||
-          t('Please enable access to your photos and videos so you can share them.')}
+          t<string>('Please enable access to your photos and videos so you can share them.')}
       </Text>
       <Text
         onPress={openSettings}
         style={[styles.errorButtonText, { color: accent_blue }, errorButtonText]}
         suppressHighlighting
       >
-        {attachmentPickerErrorButtonText || t('Allow access to your Gallery')}
+        {attachmentPickerErrorButtonText || t<string>('Allow access to your Gallery')}
       </Text>
     </View>
   );

package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { Picture } from '../../../icons';
 
-export const AttachmentPickerErrorImage: React.FC = () => {
+export const AttachmentPickerErrorImage = () => {
   const {
     theme: {
       colors: { grey_gainsboro },

package/src/components/AttachmentPicker/components/AttachmentPickerIOSSelectMorePhotos.tsx

@@ -17,7 +17,7 @@ export const AttachmentPickerIOSSelectMorePhotos = () => {
       onPress={iOS14RefreshGallerySelection}
       style={[styles.container, { backgroundColor: white }]}
     >
-      <Text style={[styles.text, { color: accent_blue }]}>{t('Select More Photos')}</Text>
+      <Text style={[styles.text, { color: accent_blue }]}>{t<string>('Select More Photos')}</Text>
     </Pressable>
   );
 };

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -28,7 +28,7 @@ type AttachmentImageProps = Omit<AttachmentPickerItemType, 'setSelectedFiles' |
 
 type AttachmentVideoProps = Omit<AttachmentPickerItemType, 'setSelectedImages' | 'selectedImages'>;
 
-const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
+const AttachmentVideo = (props: AttachmentVideoProps) => {
   const {
     asset,
     ImageOverlaySelectedComponent,
@@ -136,7 +136,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
   );
 };
 
-const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
+const AttachmentImage = (props: AttachmentImageProps) => {
   const {
     asset,
     ImageOverlaySelectedComponent,

package/src/components/AttachmentPicker/components/AttachmentSelectionBar.tsx

@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const AttachmentSelectionBar: React.FC = () => {
+export const AttachmentSelectionBar = () => {
   const {
     attachmentSelectionBarHeight,
     CameraSelectorIcon,

package/src/components/AttachmentPicker/components/CameraSelectorIcon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { Camera } from '../../../icons';
 
-export const CameraSelectorIcon: React.FC = () => {
+export const CameraSelectorIcon = () => {
   const {
     theme: {
       colors: { grey },

package/src/components/AttachmentPicker/components/FileSelectorIcon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { Folder } from '../../../icons';
 
-export const FileSelectorIcon: React.FC = () => {
+export const FileSelectorIcon = () => {
   const {
     theme: {
       colors: { grey },

package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx

@@ -14,7 +14,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const ImageOverlaySelectedComponent: React.FC = () => {
+export const ImageOverlaySelectedComponent = () => {
   const {
     theme: {
       attachmentPicker: {

package/src/components/AttachmentPicker/components/ImageSelectorIcon.tsx

@@ -7,7 +7,7 @@ type Props = {
   selectedPicker?: 'images';
 };
 
-export const ImageSelectorIcon: React.FC<Props> = ({ selectedPicker }) => {
+export const ImageSelectorIcon = ({ selectedPicker }: Props) => {
   const {
     theme: {
       colors: { accent_blue, grey },