Merge https://github.com/GetStream/stream-chat-react-native into khushal86-crns-285

Author: khushal87

docusaurus/docs/reactnative/assets/basics/upgrading-from-v3/gallery_after_1.png

@@ -3,25 +3,30 @@ id: upgrading-from-v3
 title: Upgrading from V3
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 import pinMessageAction from '../assets/basics/upgrading-from-v3/pin_message_action.png';
 import pinnedMessage from '../assets/basics/upgrading-from-v3/pinned_message.png';
 import scrollViewWarning from '../assets/basics/upgrading-from-v3/scroll_view_warning.png';
 import slowMode from '../assets/basics/upgrading-from-v3/slow_mode.gif';
 
+import galleryBefore1 from '../assets/basics/upgrading-from-v3/gallery_before_1.png';
+import galleryBefore2 from '../assets/basics/upgrading-from-v3/gallery_before_2.png';
+import galleryBefore3 from '../assets/basics/upgrading-from-v3/gallery_before_3.png';
+import galleryAfter1 from '../assets/basics/upgrading-from-v3/gallery_after_1.png';
+import galleryAfter2 from '../assets/basics/upgrading-from-v3/gallery_after_2.png';
+import galleryAfter3 from '../assets/basics/upgrading-from-v3/gallery_after_3.png';
+
 ## Add a required `threadList` prop
 
 Add a `threadList` prop on `Channel` component which wraps the Thread component as following:
 
 (This change is only required if you use `Thread` component within your application. )
 
 ```tsx
-<Channel
-  channel={channel}
-  thread={thread}
-  threadList
->
-    <Thread />
-  </View>
+<Channel channel={channel} thread={thread} threadList>
+  <Thread />
 </Channel>
 ```
 
@@ -209,6 +214,78 @@ npx pod-install
 
 ## Whats new in v4?
 
+### Optimized Image Attachments
+
+[Gallery](../ui-components/gallery.mdx) component has been revamped to be more performant and more responsive.
+Heavy images have been one of the crucial reasons previously for slow performance on low end devices. In this version of SDK,
+we render resized version of images to avoid heavy load on memory.
+
+Also previously all the image attachments used to be rendered in fixed size container, which was not ideal for portrait or landscape images since
+user won't be able to see a cropped image on UI. In this version, we render images in dynamic size container, depending on aspect ratio of image.
+
+<Tabs
+  defaultValue='case1'
+  values={[
+    { label: 'Case 1', value: 'case1' },
+    { label: 'Case 2', value: 'case2' },
+    { label: 'Case 3', value: 'case3' },
+  ]}
+>
+<TabItem value='case1'>
+
+<table>
+  <tr>
+    <td align='center'>Before</td>
+    <td align='center'>After</td>
+  </tr>
+  <tr>
+    <td align='center' width='50%'>
+      <img src={galleryBefore1} />
+    </td>
+    <td align='center' width='50%'>
+      <img src={galleryAfter1} />
+    </td>
+  </tr>
+</table>
+
+</TabItem>
+<TabItem value='case2'>
+
+<table>
+  <tr>
+    <td align='center'>Before</td>
+    <td align='center'>After</td>
+  </tr>
+  <tr>
+    <td align='center' width='50%'>
+      <img src={galleryBefore2} />
+    </td>
+    <td align='center' width='50%'>
+      <img src={galleryAfter2} />
+    </td>
+  </tr>
+</table>
+
+</TabItem>
+<TabItem value='case3'>
+  <table>
+  <tr>
+    <td align='center'>Before</td>
+    <td align='center'>After</td>
+  </tr>
+  <tr>
+    <td align='center' width='50%'>
+      <img src={galleryBefore3} />
+    </td>
+    <td align='center' width='50%'>
+      <img src={galleryAfter3} />
+    </td>
+  </tr>
+  <tr></tr>
+</table>
+</TabItem>
+</Tabs>
+
 ### Slow Mode Feature
 
 Slow mode helps reduce noise on a channel by limiting users to a maximum of 1 message per cooldown interval.
@@ -269,6 +346,8 @@ You can override these capabilities on UI level by providing [`overrideOwnCapabi
 
 ### UI/UX Changes and Performance Improvements
 
+- Images will be rendered
+
 - Background for the overlay which opens up when user long-presses on a message, has been replaced with
   opacity based background instead of [BlurView](https://github.com/Kureev/react-native-blur) [#874](https://github.com/GetStream/stream-chat-react-native/pull/874)
   This dependency caused a lot of issues due to its underlying native [BlurView](https://github.com/Dimezis/BlurView) dependency.
@@ -287,18 +366,18 @@ You can override these capabilities on UI level by providing [`overrideOwnCapabi
 
 Following two new props on `Channel` componenent allows customizing UI for autocomplete suggestions list:
 
-- `AutoCompleteSuggestionHeader`
-- `AutoCompleteSuggestionList`
-- `AutoCompleteSuggestionItem`
+- [`AutoCompleteSuggestionHeader`](../core-components/channel.mdx#autocompletesuggestionheader)
+- [`AutoCompleteSuggestionList`](../core-components/channel.mdx#autocompletesuggestionlist)
+- [`AutoCompleteSuggestionItem`](../core-components/channel.mdx#autocompletesuggestionitem)
 
 For details please read the docs on [Autocomplete Suggestions Customizations](../guides/auto_complete_suggestion_list_customizations.mdx)
 
 #### Message Actions
 
 Following two new props on `OverlayProvider` component allows customizing UI for message actions:
 
-- `MessageActionList`
-- `MessageActionListItem`
+- [`MessageActionList`](../core-components/overlay_provider.mdx#messageactionlist)
+- [`MessageActionListItem`](../core-components/overlay_provider.mdx#messageactionlistitem)
 
 Additionally styles of the message actions can be customized using following new theme keys:
 
@@ -329,6 +408,11 @@ This prop has following 4 possible values:
 - `sender`: The deleted messages in the channel will only be visible to sender.
 - `receiver`: The deleted messages in the channel will only be visible to receiver.
 
+#### Overlay Reactions User Avatar
+
+Avatar of users (shown in OverlayReactions component) who reacted to message, can now be customized
+using a prop on `OverlayProvide` component - [`OverlayReactionsAvatar`](../core-components/overlay_provider.mdx#overlayreactionsavatar).
+
 ### Fixes Issues
 
 #### Warning about Virtualized List wrapped inside ScrollView
@@ -346,3 +430,24 @@ You can customize the truncation length of message text by providing a prop [`me
 ```tsx
 <OverlayProvider messageTextNumberOfLines={300}>{/** child components */}</OverlayProvider>
 ```
+
+#### ChannelList ignores updated filters if api call is in progress
+
+https://github.com/GetStream/stream-chat-react-native/issues/678
+
+If the screen which creates the filter prop for ChannelList quickly renders two or more
+different filters, only the first filter will be fetched, with the subsequent filters
+being discarded. This results in a stale ChannelList until it is manually refreshed.
+
+#### Failed messages can't be deleted
+
+Delete action on failed message would result in error previously, which has been fixed in this release.
+
+#### Mentioned users get removed after editing message
+
+https://github.com/GetStream/stream-chat-react-native/issues/1023
+
+#### Url parsing crashes the app when text contains special character
+
+Application would crash if the message text contains special character and someone
+replies to the message. This has been fixed in this release.

docusaurus/docs/reactnative/assets/basics/upgrading-from-v3/gallery_after_2.png

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+// @ts-ignore
+import { ASTNode, SingleASTNode } from 'simple-markdown';
+
+import { ListOutput, ListOutputProps } from './renderText';
+
+describe('list', () => {
+  const createNode = ({
+    amount,
+    ordered = false,
+    start = 1,
+  }: {
+    amount: number;
+    ordered?: boolean;
+    start?: number;
+  }): SingleASTNode => ({
+    items: Array.from(Array(amount).keys()),
+    ordered,
+    start,
+    type: 'text',
+  });
+
+  const mockOutput = (node: ASTNode) => <Text>{node}</Text>;
+  const MockText = ({ node, output, state }: ListOutputProps) => (
+    <>
+      <ListOutput node={node} output={output} state={state} styles={{}} />
+    </>
+  );
+
+  it('renders numbered items', async () => {
+    const node = createNode({ amount: 3, ordered: true, start: 1 });
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+  });
+
+  it('renders numbered items from a start index', async () => {
+    const node = createNode({ amount: 3, ordered: true, start: 3 });
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('4. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('5. ')).toBeTruthy());
+  });
+
+  it('does not throw an error if an item is empty', async () => {
+    const node = {
+      ...createNode({ amount: 3, ordered: true }),
+      items: ['Not empty', null, 'Not empty'],
+    };
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+  });
+
+  it('renders an unordered list', async () => {
+    const node = createNode({ amount: 3 });
+    const { getAllByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getAllByText('\u2022 ')).toHaveLength(3));
+  });
+});