Skip to content

RtkControlbar

Last updated View as MarkdownAgent setup

The main control bar container that renders meeting controls (mic, camera, leave, and more) using the declarative UI config system.

Properties

Property Type Required Default Description
meeting RealtimeKitClient - The RealtimeKit meeting instance
config UIConfig defaultConfig UI configuration object
size 'lg' | 'md' | 'sm' | 'xl' 'sm' Size variant
variant 'boxed' | 'solid' 'solid' Visual style variant
iconPack IconPack - Custom icon pack
states States - UI state object
t RtkI18n - i18n translation function

Usage Examples

Basic Usage

import { RtkControlbar } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return <RtkControlbar meeting={meeting} />;
}

With Properties

import { RtkControlbar } from "@cloudflare/realtimekit-react-native-ui";

function MyComponent() {
	return (
		<RtkControlbar
			meeting={meeting}
			variant="solid"
			size="md"
			config={customConfig}
		/>
	);
}

Was this helpful?