Customize Header

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

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

<DyteHeader meeting={meeting} />

Following code shows how you can customise the DyteHeader or build it from scratch as per your use case.

import React from 'react';
import {
  DyteClock,
  DyteGridPagination,
  DyteHeader,
  DyteLiveStreamIndicator,
  DyteLogo,
  DyteMeetingTitle,
  DyteParticipantCount,
  DyteRecordingIndicator,
  defaultIconPack,
  useLanguage,
} 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 { View } from 'react-native';

function HeaderWithCustomUI({
  meeting,
  states,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  config,
}: {
  meeting: DyteClient;
  config: UIConfig;
  states: CustomStates;
  setStates: SetStates;
}) {
  const t = useLanguage();
  return (
    <View className="flex justify-between bg-black text-white">
      <View className="flex h-[24px] items-center">
        <DyteLogo meeting={meeting} />
        <DyteRecordingIndicator meeting={meeting} />
        <DyteLiveStreamIndicator meeting={meeting} />
      </View>
      <View className="flex h-[24px] items-center">
        <DyteMeetingTitle meeting={meeting} />
      </View>
      <View className="flex h-[24px] items-center">
        <DyteGridPagination meeting={meeting} states={states} />
        <DyteParticipantCount meeting={meeting} t={t} />
        <DyteClock meeting={meeting} />
      </View>
    </View>
  );
}

Please note that the DyteRecordingIndicator will be shown only when recording is in-progress. Similarly DyteLivestreamIndicator only shows "Live" indicator if the preset is a livestream preset.

if user's preset has a logo, that logo will be shown using DyteLogo component.

Now that we know how we can build a custom header, let's move on to discuss how we can build a custom footer otherwise knows as control bar.