Customize Control Bar

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

RealtimeKit's default header component RtkControlbar can be used as the following.

<RtkControlbar meeting={meeting} />

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

import React from 'react';
import {
  RtkCameraToggle,
  RtkChatToggle,
  RtkControlbar,
  RtkControlbarButton,
  RtkLeaveButton,
  RtkMicToggle,
  RtkMoreToggle,
  RtkMuteToggle,
  RtkPluginsToggle,
  RtkPollsToggle,
  RtkRecordingToggle,
  RtkScreenShareToggle,
  RtkSettingsToggle,
  useLanguage,
} from '@cloudflare/realtimekit-react-native-ui';
import { UIConfig, defaultIconPack } from '@cloudflare/realtimekit-react-native-ui';
import RealtimeKitClient from '@cloudflare/realtimekit';
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: RealtimeKitClient;
  config: UIConfig;
  states: CustomStates;
  setStates: SetStates;
}) {
  const t = useLanguage();
  return (
    <>
      {states.activeMoreMenu && (
        <View className="absolute bottom-[60px] w-full">
          <RtkMuteToggle meeting={meeting} />
          <RtkRecordingToggle meeting={meeting} variant="horizontal" />
          <RtkScreenShareToggle meeting={meeting} variant="horizontal" />
          <RtkChatToggle
            meeting={meeting}
            states={states}
            variant="horizontal"
          />
          <RtkPollsToggle
            meeting={meeting}
            states={states}
            variant="horizontal"
          />
          <RtkPluginsToggle
            meeting={meeting}
            states={states}
            t={t}
            variant="horizontal"
          />
          <RtkSettingsToggle states={states} variant="horizontal" />
          <RtkControlbarButton
            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">
        <RtkMicToggle meeting={meeting} variant="horizontal" />
        <RtkCameraToggle meeting={meeting} variant="horizontal" />
        <RtkMoreToggle
          iconPack={defaultIconPack}
          variant="horizontal"
          t={useLanguage()}
        />
        <RtkLeaveButton t={t} />
      </View>
    </>
  );
}