Merge pull request #1115 from GetStream/vishal/docs-v4-beta3

docs: updated upgrade helper docs for beta.3 release

Author: vishalnarkhede

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.