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

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]);
 
@@ -292,7 +295,7 @@ export const AttachmentPicker = React.forwardRef(
      * this is an issue if you are calling close on the bottom sheet.
      */
     const snapPoints = useMemo(
-      () => [initialSnapPoint, finalSnapPoint],
+      () => [Math.max(0, initialSnapPoint), Math.max(0, finalSnapPoint)],
       [initialSnapPoint, finalSnapPoint],
     );
 

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

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -119,11 +119,11 @@ const AutoCompleteInputWithContext = <
     },
   } = useTheme();
 
-  const handleChange = (newText: string, fromUpdate = false) => {
+  const handleChange = async (newText: string, fromUpdate = false) => {
     if (!fromUpdate) {
       onChange(newText);
     } else {
-      handleSuggestionsThrottled(newText);
+      await handleSuggestionsThrottled(newText);
     }
   };
 
@@ -296,7 +296,7 @@ const AutoCompleteInputWithContext = <
     return true;
   };
 
-  const handleMentions = ({ tokenMatch }: { tokenMatch: RegExpMatchArray | null }) => {
+  const handleMentions = async ({ tokenMatch }: { tokenMatch: RegExpMatchArray | null }) => {
     const lastToken = tokenMatch?.[tokenMatch.length - 1];
     const handleMentionsTrigger =
       (lastToken && Object.keys(triggerSettings).find((trigger) => trigger === lastToken[0])) ||
@@ -322,10 +322,10 @@ const AutoCompleteInputWithContext = <
       startTracking('@');
     }
 
-    updateSuggestions({ query: actualToken, trigger: '@' });
+    await updateSuggestions({ query: actualToken, trigger: '@' });
   };
 
-  const handleEmojis = ({ tokenMatch }: { tokenMatch: RegExpMatchArray | null }) => {
+  const handleEmojis = async ({ tokenMatch }: { tokenMatch: RegExpMatchArray | null }) => {
     const lastToken = tokenMatch?.[tokenMatch.length - 1].trim();
     const handleEmojisTrigger =
       (lastToken && Object.keys(triggerSettings).find((trigger) => trigger === lastToken[0])) ||
@@ -351,10 +351,11 @@ const AutoCompleteInputWithContext = <
       startTracking(':');
     }
 
-    updateSuggestions({ query: actualToken, trigger: ':' });
+    await updateSuggestions({ query: actualToken, trigger: ':' });
   };
 
   const handleSuggestions = async (text: string) => {
+    if (text === undefined) return;
     if (
       /\s/.test(text.slice(selectionEnd.current - 1, selectionEnd.current)) &&
       isTrackingStarted.current
@@ -365,12 +366,12 @@ const AutoCompleteInputWithContext = <
         .slice(0, selectionEnd.current)
         .match(/(?!^|\W)?@[^\s@]*\s?[^\s@]*$/g);
       if (mentionTokenMatch) {
-        handleMentions({ tokenMatch: mentionTokenMatch });
+        await handleMentions({ tokenMatch: mentionTokenMatch });
       } else {
         const emojiTokenMatch = text
           .slice(0, selectionEnd.current)
           .match(/(?!^|\W)?:\w{2,}[^\s]*\s?[^\s]*$/g);
-        handleEmojis({ tokenMatch: emojiTokenMatch });
+        await handleEmojis({ tokenMatch: emojiTokenMatch });
       }
     }
   };
@@ -390,12 +391,12 @@ const AutoCompleteInputWithContext = <
       autoFocus={giphyActive}
       maxLength={maxMessageLength}
       multiline
-      onChangeText={(newText) => {
-        if (giphyEnabled && newText.startsWith('/giphy ')) {
-          handleChange(newText.slice(7)); // 7 because of '/giphy' length
+      onChangeText={async (newText) => {
+        if (giphyEnabled && newText && newText.startsWith('/giphy ')) {
+          await handleChange(newText.slice(7)); // 7 because of '/giphy' length
           setGiphyActive(true);
         } else {
-          handleChange(newText);
+          await handleChange(newText);
         }
       }}
       onContentSizeChange={({

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -48,7 +48,7 @@ const AutoCompleteSuggestionHeaderWithContext = <
       <View style={[styles.container, container]}>
         <Lightning pathFill={accent_blue} />
         <Text style={[styles.title, { color: grey }, title]} testID='commands-header-title'>
-          {t('Instant Commands')}
+          {t<string>('Instant Commands')}
         </Text>
       </View>
     );
@@ -57,7 +57,7 @@ const AutoCompleteSuggestionHeaderWithContext = <
       <View style={[styles.container, container]}>
         <Smile pathFill={accent_blue} />
         <Text style={[styles.title, { color: grey }, title]} testID='emojis-header-title'>
-          {t('Emoji matching') + ' "' + queryText + '"'}
+          {t<string>('Emoji matching') + ' "' + queryText + '"'}
         </Text>
       </View>
     );

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -40,7 +40,7 @@ export type AutoCompleteSuggestionListPropsWithContext<
 > &
   AutoCompleteSuggestionListComponentProps<StreamChatGenerics>;
 
-const SuggestionsItem: React.FC<PressableProps> = (props) => {
+const SuggestionsItem = (props: PressableProps) => {
   const { children, style: propsStyle, ...pressableProps } = props;
 
   const style = ({ pressed }: PressableStateCallbackType) => [

package/src/components/Avatar/Avatar.tsx

@@ -59,11 +59,11 @@ export type AvatarProps = {
 /**
  * Avatar - A round avatar image with fallback to user's initials.
  */
-export const Avatar: React.FC<AvatarProps> = (props) => {
+export const Avatar = (props: AvatarProps) => {
   const {
     containerStyle,
-    ImageComponent = Image,
     image: imageProp,
+    ImageComponent = Image,
     imageStyle,
     name,
     online,

package/src/components/Avatar/GroupAvatar.tsx

@@ -37,7 +37,7 @@ export type GroupAvatarProps = {
 /**
  * GroupAvatar - A round group of avatar images with fallbacks to users' initials
  */
-export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
+export const GroupAvatar = (props: GroupAvatarProps) => {
   const { containerStyle, ImageComponent = Image, images, names, size, testID } = props;
   const {
     theme: {

package/src/components/Channel/Channel.tsx

@@ -475,6 +475,8 @@ const ChannelWithContext = <
     hasImagePicker = true,
     hideDateSeparators = false,
     hideStickyDateHeader = false,
+    ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
+    ImageLoadingIndicator = ImageLoadingIndicatorDefault,
     ImageUploadPreview = ImageUploadPreviewDefault,
     initialScrollToFirstUnreadMessage = false,
     initialValue,
@@ -494,15 +496,13 @@ const ChannelWithContext = <
     LoadingIndicator = LoadingIndicatorDefault,
     loadingMore: loadingMoreProp,
     loadingMoreRecent: loadingMoreRecentProp,
-    ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
-    ImageLoadingIndicator = ImageLoadingIndicatorDefault,
     markdownRules,
     maxMessageLength: maxMessageLengthProp,
     maxNumberOfFiles = 10,
     maxTimeBetweenGroupedMessages,
+    members,
     mentionAllAppUsersEnabled = false,
     mentionAllAppUsersQuery,
-    members,
     Message = MessageDefault,
     messageActions,
     MessageAvatar = MessageAvatarDefault,
@@ -525,23 +525,23 @@ const ChannelWithContext = <
     MessageText,
     MoreOptionsButton = MoreOptionsButtonDefault,
     myMessageTheme,
-    newMessageStateUpdateThrottleInterval = defaultThrottleInterval,
     NetworkDownIndicator = NetworkDownIndicatorDefault,
+    newMessageStateUpdateThrottleInterval = defaultThrottleInterval,
     numberOfLines = 5,
     onChangeText,
     onLongPressMessage,
-    overrideOwnCapabilities,
     onPressInMessage,
     onPressMessage,
     OverlayReactionList = OverlayReactionListDefault,
+    overrideOwnCapabilities,
     ReactionList = ReactionListDefault,
     read,
     Reply = ReplyDefault,
     ScrollToBottomButton = ScrollToBottomButtonDefault,
     selectReaction,
     SendButton = SendButtonDefault,
-    SendMessageDisallowedIndicator = SendMessageDisallowedIndicatorDefault,
     sendImageAsync = false,
+    SendMessageDisallowedIndicator = SendMessageDisallowedIndicatorDefault,
     setInputRef,
     setMembers,
     setMessages,
@@ -584,8 +584,9 @@ const ChannelWithContext = <
   const [loadingMore, setLoadingMore] = useState(false);
 
   const [loadingMoreRecent, setLoadingMoreRecent] = useState(false);
-  const [quotedMessage, setQuotedMessage] =
-    useState<boolean | MessageType<StreamChatGenerics>>(false);
+  const [quotedMessage, setQuotedMessage] = useState<boolean | MessageType<StreamChatGenerics>>(
+    false,
+  );
   const [thread, setThread] = useState<ThreadContextValue<StreamChatGenerics>['thread']>(
     threadProps || null,
   );
@@ -656,6 +657,7 @@ const ChannelWithContext = <
   }, [channelId, messageId]);
 
   const threadPropsExists = !!threadProps;
+
   useEffect(() => {
     if (threadProps && shouldSyncChannel) {
       setThread(threadProps);
@@ -1192,7 +1194,6 @@ const ChannelWithContext = <
 
   const resyncChannel = async () => {
     if (!channel || syncingChannelRef.current) return;
-    if (!channel.initialized) return;
     hasOverlappingRecentMessagesRef.current = false;
     clearInterval(mergeSetsIntervalRef.current);
     syncingChannelRef.current = true;
@@ -1704,10 +1705,6 @@ const ChannelWithContext = <
 
     mergeOverlappingMessageSetsRef.current();
 
-    if (!channel?.state.isUpToDate) {
-      await reloadChannel();
-    }
-
     updateMessage(messagePreview, {
       commands: [],
       messageInput: '',
@@ -2364,7 +2361,7 @@ const ChannelWithContext = <
   if (!channel?.cid || !channel.watch) {
     return (
       <Text style={[styles.selectChannel, { color: black }, selectChannel]} testID='no-channel'>
-        {t('Please select a channel first')}
+        {t<string>('Please select a channel first')}
       </Text>
     );
   }