Provide customActiveChannel prop for ChannelList

[DmitriyNikolenko]

Motivation
React SDK has the ability to set active channels when we navigate to ChannelList which is useful if we wanna highlight a target channel. React Native SDK does not have it as I see.

Proposed solution
Provide 'customActiveChannel' property.

Acceptance Criteria
The user is able to see some channels as active when they navigate to ChatList.

[vishalnarkhede]

hmm we have that in React SDK since channel list and channel components go side to side in the same screen. But thats not the case for RN or mobile.

Curious about the business requirements here, so that we can act on it.

[therajumandapati]

@vishalnarkhede @DmitriyNikolenko and I work on the same team. Our business requirements as explained above are that we navigate to a single conversation in tablets where the channel list is displayed on the side, like web. Given web and tablet share the same visual layout, this feature needs to be supported on RN so we can have web like usability on tablets. Does that help explain the business requirements?

[therajumandapati]

@vishalnarkhede Any update on supporting this in Stream's official SDK here?

[sergeyzhukov]

this is necessary on iPad

[sergeyzhukov]

possible solution is very easy. Add to https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/ChannelPreview/ChannelPreview.tsx following code at the line 35

const { channel: activeChannel } = useChatContext<StreamChatGenerics>(); const active = activeChannel?.id === channel.id;

and then pass that active pro at line 110 this way

return <Preview channel={channel} latestMessagePreview={latestMessagePreview} unread={unread} active={active}/>;

[DmitriyNikolenko]

@sergeyzhukov The problem is not only in highlighting the preview with some background but mostly in loading and showing the channel preview first in the channel list.