Customize Header

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

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

<RtkHeader meeting={meeting} />

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

import React from 'react';
import {
  RtkClock,
  RtkGridPagination,
  RtkHeader,
  RtkLiveStreamIndicator,
  RtkLogo,
  RtkMeetingTitle,
  RtkParticipantCount,
  RtkRecordingIndicator,
  defaultIconPack,
  useLanguage,
} from '@cloudflare/realtimekit-react-native-ui';
import { UIConfig } from '@cloudflare/realtimekit-react-native-ui';
import RealtimeKitClient from '@cloudflare/realtimekit';
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: RealtimeKitClient;
  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">
        <RtkLogo meeting={meeting} />
        <RtkRecordingIndicator meeting={meeting} />
        <RtkLiveStreamIndicator meeting={meeting} />
      </View>
      <View className="flex h-[24px] items-center">
        <RtkMeetingTitle meeting={meeting} />
      </View>
      <View className="flex h-[24px] items-center">
        <RtkGridPagination meeting={meeting} states={states} />
        <RtkParticipantCount meeting={meeting} t={t} />
        <RtkClock meeting={meeting} />
      </View>
    </View>
  );
}

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

if user's preset has a logo, that logo will be shown using RtkLogo 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.