RtkControlbar

Last updated Oct 19, 2026 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?

YesNo

On this page

RtkControlbar - 图1Docs

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react-native/rtkcontrolbar/#page","headline":"RtkControlbar","description":"API reference for RtkControlbar component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react-native/rtkcontrolbar/","inLanguage":"en","image":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react-native/rtkcontrolbar/og.png?v=7f0018b9a6115cb7","dateModified":"2026-10-19","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: API reference for RtkControlbarButton component (React Native Library) title: RtkControlbarButton image: https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react-native/rtkcontrolbarbutton/og.png?v=28f06e1419a23ebd

Skip to content

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt
Use this file to discover all available pages before exploring further.