Add custom sidebar

Source Code: https://github.com/dyte-io/react-native-samples/tree/main/samples/create_your_own_ui

To create a sidebar of your own, you need 2 things.

1. A custom sidebar UI
2. An action button to trigger the UI

import React from 'react';
import {
  DyteChat,
  DyteParticipants,
  DytePlugins,
  DytePolls,
  DyteSidebar,
} from '@dytesdk/react-native-ui-kit';

import { UIConfig } from '@dytesdk/react-native-ui-kit';
import DyteClient from '@dytesdk/web-core';
import { CustomStates, SetStates } from '../types';
import { useState } from 'react';
import { View } from 'react-native';

function SidebarWithCustomUI({
  meeting,
  states,
  config,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  setStates,
}: {
  meeting: DyteClient;
  config: UIConfig;
  states: CustomStates;
  setStates: SetStates;
}) {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [tabs, setTabs] = useState([
    { id: 'chat', name: 'chat' },
    { id: 'polls', name: 'polls' },
    { id: 'participants', name: 'participants' },
    { id: 'plugins', name: 'plugins' },
    { id: 'warnings', name: 'warnings' },
  ]);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [view, setView] = useState('sidebar');

  if (!states.activeSidebar || (!states.sidebar && !states.customSidebar)) {
    return null;
  }

  const currentTab = states.sidebar || states.customSidebar;

  return (
    <>
      {currentTab === 'chat' && <DyteChat meeting={meeting} config={config} />}
      {currentTab === 'polls' && (
        <DytePolls meeting={meeting} config={config} />
      )}
      {currentTab === 'participants' && (
        <DyteParticipants meeting={meeting} config={config} states={states} />
      )}
      {currentTab === 'plugins' && (
        <DytePlugins meeting={meeting} config={config} />
      )}
      {currentTab === 'warnings' && (
        <View className="flex items-center justify-center">
          <View>Do not cheat in the exam</View>
        </View>
      )}
    </>
  );
}

Let's say, we want to show some meeting guidelines to all the participants in a side bar. To do so, in the below code snippet, we have added guidelines sidebar section.

We have added a custom button to trigger the UI as well using DyteControlbarButton component.

<DyteControlbarButton
  onClick={() => {
    if (
      states.activeSidebar &&
      !states.sidebar &&
      states.customSidebar === 'guidelines'
    ) {
      setStates((oldState) => {
        return {
          ...oldState,
          activeSidebar: false,
          sidebar: null,
          customSidebar: null,
        };
      });
    } else {
      setStates((oldState) => {
        return {
          ...oldState,
          activeSidebar: true,
          sidebar: null,
          customSidebar: 'guidelines',
        };
      });
    }
  }}
  icon={defaultIconPack.add}
  label={'Open Custom SideBar'}
/>

For such a sidebar extension, we will have to update the types as well if in case you are using react with Typescript.

import type { States } from '@dytesdk/ui-kit';
import { DyteSidebarSection } from '@dytesdk/ui-kit/dist/types/components/dyte-sidebar/dyte-sidebar';

export type CustomSideBarTabs = DyteSidebarSection | 'guidelines';

export type CustomStates = States & {
  activeMediaPreviewModal?: boolean;
  customSidebar?: CustomSideBarTabs;
};

export type SetStates = React.Dispatch<React.SetStateAction<CustomStates>>;

Now that we know how we can add a custom sidebar, we can move on to customise the DyteStage component further.