Customize Control Bar

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

Dyte's default header component DyteControlbar can be used as the following.

<DyteControlbar meeting={meeting} />

Following code shows you can customise the DyteControlbar as per your use case.

import React from 'react';
import {
  DyteCameraToggle,
  DyteChatToggle,
  DyteControlbar,
  DyteControlbarButton,
  DyteLeaveButton,
  DyteMicToggle,
  DyteMoreToggle,
  DyteMuteToggle,
  DytePluginsToggle,
  DytePollsToggle,
  DyteRecordingToggle,
  DyteScreenShareToggle,
  DyteSettingsToggle,
  useLanguage,
} from '@dytesdk/react-native-ui-kit';
import { UIConfig, defaultIconPack } from '@dytesdk/react-native-ui-kit';
import DyteClient from '@dytesdk/web-core';
import { CustomStates, SetStates } from '../types';
import { View } from 'react-native';

function ControlBarWithCustomUI({
  meeting,
  states,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  config,
  setStates,
}: {
  meeting: DyteClient;
  config: UIConfig;
  states: CustomStates;
  setStates: SetStates;
}) {
  const t = useLanguage();
  return (
    <>
      {states.activeMoreMenu && (
        <View className="absolute bottom-[60px] w-full">
          <DyteMuteToggle meeting={meeting} />
          <DyteRecordingToggle meeting={meeting} variant="horizontal" />
          <DyteScreenShareToggle meeting={meeting} variant="horizontal" />
          <DyteChatToggle
            meeting={meeting}
            states={states}
            variant="horizontal"
          />
          <DytePollsToggle
            meeting={meeting}
            states={states}
            variant="horizontal"
          />
          <DytePluginsToggle
            meeting={meeting}
            states={states}
            t={t}
            variant="horizontal"
          />
          <DyteSettingsToggle states={states} variant="horizontal" />
          <DyteControlbarButton
            variant="horizontal"
            onClick={() => {
              if (
                states.activeSidebar &&
                !states.sidebar &&
                states.customSidebar === 'warnings'
              ) {
                setStates((oldState) => {
                  return {
                    ...oldState,
                    activeSidebar: false,
                    sidebar: null,
                    customSidebar: null,
                  };
                });
              } else {
                setStates((oldState) => {
                  return {
                    ...oldState,
                    activeSidebar: true,
                    sidebar: null,
                    customSidebar: 'warnings',
                  };
                });
              }
            }}
            icon={defaultIconPack.add}
            label={'Open Custom SideBar'}
          />
        </View>
      )}
      <View className="flex-row justify-evenly bg-black text-white">
        <DyteMicToggle meeting={meeting} variant="horizontal" />
        <DyteCameraToggle meeting={meeting} variant="horizontal" />
        <DyteMoreToggle
          iconPack={defaultIconPack}
          variant="horizontal"
          t={useLanguage()}
        />
        <DyteLeaveButton t={t} />
      </View>
    </>
  );
}