UIKit Responsive UI

Looking for any pointers/feedback to make UIKit JS responsive/mobile friendly. Has anyone implemented it for small/mobile screens?

3 Likes

I am experiencing this issue as well. The demo shows the UIKit working on mobile but when I implent <ChannelList/> and <Channel/> next to each othter they loose their responsiveness. Do we have to provide our own navigation for mobile channel and channel list?

Having the same issue. Had to make my own containers for <channelList> and <channel> and make them expand/contract but something seems to be off, as the whole experience became very slow. Funny enough, the demo apps here Sendbird Chat - Live stream chat demo and samples don’t load at all if you are on mobile screen size.

Looks like you’d have to homebake your own UI or do extensive mods to whats provided. In this codepen ((1-1) Using Sendbird App (forked) - CodeSandbox) if you make screen size small, the <channel> component is the main issue (specially if there is a pre-rendered link, which makes <channel> extra wide).

Hi, you can check out this code sandbox about how you might implement UIKit JavaScript on mobile:

Please be aware that you will have to create your own ChannelPreview component for the channel list because otherwise, the default component is selecting the first channel in the list by default.

1 Like

Thanks for this. Moving forward, it would be very useful if the SendbirdApp component is responsive out of the box because it’s a holistic approach that makes it easy to get started and importantly also makes version updates far simpler. Already the sendbird-uikit-mobile (forked) demo appears out of date as the channel avatars are not displaying their images.