Chat UIKit React v3

Chat UIKit React

Chat UIKit

React

Version 3

Mobile optimization guide

Sendbird UIKit for React is now optimized for mobile browsers. Starting from version 3.5.0, UIKit can easily be made mobile-compatible by setting a flag or defining a breakpoint, along with a few layout-level modifications. This guide explains the UI changes, architecture changes, and how to set up mobile mode.

UI changes

To ensure a smooth transition of UIKit for React to mobile devices, the following changes were implemented.

Responsive UI

The user interface is now fully responsive. You'll no longer need to make additional CSS adjustments, as the UI will automatically resize and restructure according to the mobile device's screen size. For instance, the thumbnail message sizes and the widths of individual modules can now be adjusted without any manual modifications.

Redesigned pop-ups

Pop-ups were redesigned for better mobile experience. Alerts such as Leave channel or Delete message is converted to a more mobile-friendly design shown on the left. Other functionalities such as Invite users in the channel or Moderations are now displayed full-screen as shown in the right image. The Create channel function is specifically modified as shown in the middle image.

Bottom sheet UI

Context menus that was used for the reaction functionality is now replaced with a bottom sheet UI as shown in the image below. This allows for a more familiar and intuitive user experience on mobile devices.

Long press menus

The three-dot menus is changed to a long press menu UI as shown in the figure below.

Architecture changes

A prop called breakpoint can now be used to activate the mobile user experience of UIKit. This feature allows you to define the specific screen size at which the mobile layout should be activated. However, it's not possible to turn off individual features such as long press.

The breakpoint prop is available in SendbirdProvider and App as shown below.

Javascript

@sendbird/uikit-react/SendbirdProvider
breakpoint?: string | boolean

@sendbird/uikit-react/App
breakpoint?: string | boolean

You can set the breakpoint either as a specific pixel value or as a boolean value as shown in the code below.

Javascript

// Example 1
<SendbirdProvider breakpoint="567px" />

// Example 2
function isIOS() {
  const userAgent = window.navigator.userAgent;
  const platform = window.navigator?.userAgentData?.platform || window.navigator.platform;
  const iosPlatforms = ['iPhone', 'iPad', 'iPod'];
  if (iosPlatforms.indexOf(platform) !== -1) {
    return true;
  }
  return false;
}
const isMobile = isIOS();

<SendbirdProvider breakpoint={isMobile} />

The breakpoint is passed into a MediaQueryProvider, which can then be accessed using MediaQueryProvider and useMediaQueryContext. The breakpoint defines when the mobile mode should be activated, while useMediaQueryContext returns a boolean value indicating whether the application is running on a mobile device based on the specified breakpoint.

Javascript

const MediaQueryProvider: (props: MediaQueryProviderProps) => React.ReactElement;

interface MediaQueryProviderProps {
  children: React.ReactElement;
  breakpoint?: string | boolean;
  logger?: Logger;
}

// OR

const useMediaQueryContext: useMediaQueryContextType;

type useMediaQueryContextType = () => ({
  breakpoint: string | boolean;
  isMobile: boolean;
});

Setting up mobile mode

You can follow the implementation below to easily set up mobile mode.

Using component from UIKit

If you're already using the @sendbird/uikit-react/App component in your project, UIKit will automatically optimize for mobile browsers. Set up by simply using the implementation below.

Javascript

import App from '@sendbird/uikit-react/App'

const Chat = () => {
  function isIOS() {
    const userAgent = window.navigator.userAgent;
    const platform = window.navigator?.userAgentData?.platform || window.navigator.platform;
    const iosPlatforms = ['iPhone', 'iPad', 'iPod'];
    if (iosPlatforms.indexOf(platform) !== -1) {
      return true;
    }
    return false;
  }

  return (
    <App
      mediaQueryBreakPoint={isIOS() || '567px'}
    />
  )
}

Using layout management libraries

If you're using your own layout management libraries, you can still implement the mobile optimization by using the boolean property of breakpoint and setup the desired layout as shown in the code below.

Javascript

import useMediaQuery from './useMediaQuery';

export default function SimpleMediaQuery() {
  const matches = useMediaQuery('(max-width:600px)');

  return (
    <SendbirdProvider mediaQueryBreakPoint={matches}>
      {
        matches
          ? <MobileLayout />
          : <DesktopLayout />
      }
    </SendbirdProvider>
  )
}

Then, see the code below for the MobileLayout component. For additional examples, see our sample.

Javascript

import React, { useState } from 'react';
import GroupChannelList from '@sendbird/uikit-react/GroupChannelList';
import GroupChannel from '@sendbird/uikit-react/GroupChannel';

const PANELS  = {
  CHANNEL_LIST: 'CHANNEL_LIST',
  CHANNEL:'CHANNEL',
  CHANNEL_SETTINGS:'CHANNEL_SETTINGS',
  MESSAGE_SEARCH:'MESSAGE_SEARCH',
}

export default MobileLayout = () => {
  const [panel, setPanel] = useState(PANELS.CHANNEL_LIST);
  const [currentChannel, setCurrentChannel] = useState(null);
  return (
    <div className="mobile-layout">
      {
        panel === PANELS.CHANNEL_LIST &&
          <GroupChannelList
            onChannelSelect={(channel) => {
              setCurrentChannel(channel);
              setPanel(PANELS.CHANNEL);
            }}
          />
      }
      {
        panel === PANELS.CHANNEL &&
          <GroupChannel
            channelUrl={currentChannel?.url}
            onBackClick={() => {
              setPanel(PANELS.CHANNEL_LIST);
            }}
            onChatHeaderActionClick={() => {
              setPanel(PANELS.CHANNEL_SETTINGS);
            }}
          />
      }
      {
        panel === PANELS.CHANNEL_SETTINGS && (
          <>Channel Settings...</>
        )
      }
    </div>
  )
}

Additional information

In mobile optimization, a back icon to Channel and a click handler onBackClick are added as shown in the code below.

Javascript

<Channel
  onBackClick={() => {
    setPanel(PANELS.CHANNEL_LIST);
  }}
/>

Also, onUserProfileMessage prop was added to SendbirdProvider as shown in the code below.

Javascript

onUserProfileMessage?: (props: GroupChannel) => void;

// Facilitates the action when clicking the message button in the user profile popup.
<SendbirdProvider
  onUserProfileMessage={(channel) => {
    setCurrentChannel(channel);
  }}
/>

On this page

UI changes

Responsive UI Redesigned pop-ups Bottom sheet UI Long press menus

Architecture changes Setting up mobile mode

Using component from UIKit Using layout management libraries

Additional information

Sample app