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.
To ensure a smooth transition of UIKit for React to mobile devices, the following changes were implemented.
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.
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.
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.
The three-dot menus is changed to a long press menu UI as shown in the figure below.
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.
breakpoint prop is available in
App as shown below.
You can set the
breakpoint either as a specific pixel value or as a boolean value as shown in the code below.
breakpoint is passed into a
MediaQueryProvider, which can then be accessed using
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
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.
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.
Then, see the code below for the
MobileLayout component. For additional examples, see our sample.
In mobile optimization, a back icon to
Channel and a click handler
onBackClick are added as shown in the code below.
onUserProfileMessage prop was added to
SendbirdProvider as shown in the code below.