Merge pull request #2690 from GetStream/develop

Next Release

.nvmrc

@@ -1 +1 @@
-v20
+v20

docusaurus/docs/reactnative/common-content/contexts/thread-list-item-context/thread.mdx

@@ -0,0 +1,5 @@
+An instance of the [`Thread` class](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) that can be used to either get more data about the thread or pass to `onThreadSelect`.
+
+| Type   |
+| ------ |
+| Thread |

docusaurus/docs/reactnative/common-content/contexts/threads-context/additional-flatlist-props.mdx

@@ -0,0 +1,5 @@
+An object containing [`FlatListProps`](https://reactnative.dev/docs/flatlist#props) that can be used to override the default ones provided in the `ThreadList`.
+
+| Type   |
+| ------ |
+| object |

docusaurus/docs/reactnative/common-content/contexts/threads-context/is-focused.mdx

@@ -0,0 +1,18 @@
+A boolean indicating if the `ThreadList` is currently in focus or not. Essentially a flag that lets us know whether the component is present in the viewport. Whenever present, it controls when updates to the `ThreadList` are active and when they are not. Best used in conjunction with hooks from popular navigation libraries (such as [`useIsFocused()` from React Navigation](https://reactnavigation.org/docs/use-is-focused/)) for lazy loading purposes.
+
+| Type    |
+| ------- |
+| boolean |
+
+Example:
+
+```tsx
+import React from 'react';
+import { useIsFocused } from '@react-navigation/native';
+import { ThreadList } from 'stream-chat-react-native';
+
+export const ThreadListScreen = () => {
+  const isFocused = useIsFocused();
+  return <ThreadList isFocused={isFocused} />;
+};
+```

docusaurus/docs/reactnative/common-content/contexts/threads-context/on-thread-select.mdx

@@ -0,0 +1,19 @@
+A method that will be used as a callback whenever a thread in the list is clicked. As an example, it can be used to navigate to a thread screen displaying the thread.
+
+| Type                                 |
+| ------------------------------------ |
+| `(thread, channel) => Promise<void>` |
+
+The arguments passed are as follows:
+
+#### `thread`
+
+An object containing two properties, `thread` and `threadInstance`. This entire object can be passed as the [`thread` prop](../core-components/channel#thread) to the `Channel` component.
+
+| Type   |
+| ------ |
+| object |
+
+The `threadInstance` property is an instance of the [`Thread` class](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts).
+
+The `thread` property is a reference to the parent message of the thread.

docusaurus/docs/reactnative/common-content/contexts/threads-context/thread-list-empty-placeholder.mdx

@@ -0,0 +1,5 @@
+A custom UI component used to render the empty placeholder if there are no available threads.
+
+| Type          | Default                                                                                                                                                 |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`DefaultThreadListEmptyPlaceholder`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ThreadList/ThreadList.tsx) |

docusaurus/docs/reactnative/common-content/contexts/threads-context/thread-list-item.mdx

@@ -0,0 +1,39 @@
+A custom UI component used to render each item within the `ThreadList`. It will override the UI of the [default `ThreadListItem`](./thread-list-item) while still keeping all of the data.
+
+| Type          | Default                                                                                                                                  |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`ThreadListItem`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ThreadList/ThreadListItem.tsx) |
+
+Example usage:
+
+```tsx
+import { Text, TouchableOpacity } from 'react-native';
+import {
+  OverlayProvider,
+  Chat,
+  ThreadList,
+  useThreadListItemContext,
+  useThreadsContext,
+} from 'stream-chat-react-native';
+
+const ThreadListItem = () => {
+  const { parentMessage, thread, channel } = useThreadListItemContext();
+  const { onThreadSelect } = useThreadsContext();
+
+  return (
+    <TouchableOpacity onPress={() => onThreadSelect(thread, channel)}>
+      <Text>{parentMessage?.text || 'Text not available !'}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const App = () => {
+  return (
+    <OverlayProvider>
+      <Chat client={client}>
+        <ThreadList ThreadListItem={ThreadListItem} />
+      </Chat>
+    </OverlayProvider>
+  );
+};
+```

docusaurus/docs/reactnative/common-content/contexts/threads-context/thread-list-loading-indicator.mdx

@@ -0,0 +1,5 @@
+A custom UI component used to render the loading indicator when `isLoading` is `true`.
+
+| Type          | Default                                                                                                                                                 |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`DefaultThreadListLoadingIndicator`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ThreadList/ThreadList.tsx) |

docusaurus/docs/reactnative/common-content/contexts/threads-context/thread-list-loading-more-indicator.mdx

@@ -0,0 +1,5 @@
+A custom UI component used to render the loading indicator when `isLoadingNext` is `true`.
+
+| Type          | Default                                                                                                                                                     |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`DefaultThreadListLoadingMoreIndicator`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ThreadList/ThreadList.tsx) |

docusaurus/docs/reactnative/common-content/contexts/threads-context/thread-list-unread-banner.mdx

@@ -0,0 +1,5 @@
+A custom UI component used to render the unread threads banner at the top of the list.
+
+| Type          | Default                                                                                                                                                  |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`ThreadListUnreadBanner`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ThreadList/ThreadListUnreadBanner.tsx) |

docusaurus/docs/reactnative/contexts/thread-list-item-context.mdx

@@ -0,0 +1,73 @@
+---
+id: thread-list-item-context
+title: ThreadListItemContext
+---
+
+import Channel from '../common-content/ui-components/channel/props/channel.mdx';
+
+import Thread from '../common-content/contexts/thread-list-item-context/thread.mdx';
+
+The `ThreadListItemContext` is provided by the [`ThreadListItem`](../../ui-components/thread-list-item) component. If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).
+
+The `ThreadListItemContext` needs to be used within the [`ThreadList` component](../../ui-components/thread-list) as it depends on the [`ThreadsContext`](../threads-context).
+
+## Basic Usage
+
+The `ThreadListItemContext` can be consumed by any of the child components of `ThreadList` component as following:
+
+```tsx
+import { useContext } from 'react';
+import { ThreadListItemContext } from 'stream-chat-react-native';
+
+const value = useContext(ThreadListItemContext);
+```
+
+Alternatively, you can also use `useThreadListItemContext` hook provided by library to consume `ThreadListItemContext`.
+
+```tsx
+import { useThreadListItemContext } from 'stream-chat-react-native';
+
+const value = useThreadListItemContext();
+```
+
+## Value
+
+### `channel`
+
+<Channel />
+
+### `dateString`
+
+A formatted date string that can be used as a thread timestamp. The default format is `HH:MM`.
+
+| Type   |
+| ------ |
+| string |
+
+### `lastReply`
+
+A [Message instance](https://github.com/GetStream/stream-chat-react-native/blob/493cdffcb5b2ee915b2f420e359ad685966a0dbe/package/src/components/MessageList/hooks/useMessageList.ts#L35) providing the latest message reply in the thread.
+
+| Type        |
+| ----------- |
+| MessageType |
+
+### `ownUnreadMessageCount`
+
+A number providing the number of unread messages for the particular thread.
+
+| Type   |
+| ------ |
+| number |
+
+### `parentMessage`
+
+A [Message instance](https://github.com/GetStream/stream-chat-react-native/blob/493cdffcb5b2ee915b2f420e359ad685966a0dbe/package/src/components/MessageList/hooks/useMessageList.ts#L35) providing the parent message of the thread.
+
+| Type        |
+| ----------- |
+| MessageType |
+
+### `thread`
+
+<Thread />

docusaurus/docs/reactnative/contexts/threads-context.mdx

@@ -0,0 +1,108 @@
+---
+id: threads-context
+title: ThreadsContext
+---
+
+import Channel from '../common-content/ui-components/channel/props/channel.mdx';
+
+import AdditionalFlatListProps from '../common-content/contexts/threads-context/additional-flatlist-props.mdx';
+import IsFocused from '../common-content/contexts/threads-context/is-focused.mdx';
+import OnThreadSelect from '../common-content/contexts/threads-context/on-thread-select.mdx';
+import ThreadListItem from '../common-content/contexts/threads-context/thread-list-item.mdx';
+import ThreadListEmptyPlaceholder from '../common-content/contexts/threads-context/thread-list-empty-placeholder.mdx';
+import ThreadListLoadingIndicator from '../common-content/contexts/threads-context/thread-list-loading-indicator.mdx';
+import ThreadListLoadingMoreIndicator from '../common-content/contexts/threads-context/thread-list-loading-more-indicator.mdx';
+import ThreadListUnreadBanner from '../common-content/contexts/threads-context/thread-list-unread-banner.mdx';
+
+The `ThreadsContext` is provided by the [`ThreadList`](../../ui-components/thread-list) component. If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).
+
+The `ThreadsContext` needs to be used within the [`Chat` component](../../core-components/chat) as it depends on the [`ChatContext`](./chat-context).
+
+## Basic Usage
+
+The `ThreadsContext` can be consumed by any of the child components of `Chat` as following:
+
+```tsx
+import { useContext } from 'react';
+import { ThreadsContext } from 'stream-chat-react-native';
+
+const value = useContext(ThreadsContext);
+```
+
+Alternatively, you can also use `useThreadsContext` hook provided by library to consume `ThreadContext`.
+
+```tsx
+import { useThreadsContext } from 'stream-chat-react-native';
+
+const value = useThreadsContext();
+```
+
+## Value
+
+### `isLoading` \*
+
+A boolean flag that lets us know whether the threads are currently loading or not.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+### `isLoadingMore` \*
+
+A boolean flag that lets us whether the next page of threads is being loaded or not.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+### `threads` \*
+
+An array of [Thread](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) instances that are used as input for rendering the `ThreadList`.
+
+| Type  |
+| ----- |
+| array |
+
+### `isFocused`
+
+<IsFocused />
+
+### `additionalFlatListProps`
+
+<AdditionalFlatListProps />
+
+### `loadMore`
+
+A method that can be invoked to load more `threads`. Returns a promise.
+
+| Type                  |
+| --------------------- |
+| `() => Promise<void>` |
+
+### `onThreadSelect`
+
+<OnThreadSelect />
+
+#### `channel`
+
+<Channel />
+
+### `ThreadListEmptyPlaceholder`
+
+<ThreadListEmptyPlaceholder />
+
+### `ThreadListItem`
+
+<ThreadListItem />
+
+### `ThreadListLoadingIndicator`
+
+<ThreadListLoadingIndicator />
+
+### `ThreadListLoadingMoreIndicator`
+
+<ThreadListLoadingMoreIndicator />
+
+### `ThreadListUnreadBanner`
+
+<ThreadListUnreadBanner />

docusaurus/docs/reactnative/customization/contexts.mdx

@@ -33,6 +33,8 @@ The majority of the contexts within the SDK are established in the higher level
   - [`OverlayContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/overlayContext/OverlayContext.tsx)
   - [`ThemeContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/themeContext/ThemeContext.tsx)
   - [`TranslationContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/translationContext/TranslationContext.tsx)
+- [`ThreadListContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/threadsContext/ThreadsContext.tsx)
+  - [`ThreadListItemContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/threadsContext/ThreadListItemContext.tsx)
 - `MessageSimple`
   - [`MessageContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/messageContext/MessageContext.tsx)
 - For Debugging using Flipper Plugin