RtkGrid

Last updated Oct 19, 2026 The main participant grid that automatically switches between simple, mixed, spotlight, and livestream layouts based on meeting state.

Properties

Property Type Required Default Description
meeting RealtimeKitClient ✅ - The RealtimeKit meeting instance
config UIConfig ❌ defaultConfig UI configuration object
states States ❌ - UI state object
t RtkI18n ❌ - i18n translation function
aspectRatio string ❌ '3:4' Aspect ratio for grid tiles
gap number ❌ 8 Gap between grid tiles in pixels
iconPack IconPack ❌ defaultIconPack Custom icon pack
size 'lg' \| 'md' \| 'sm' \| 'xl' ❌ 'sm' Size variant

Usage Examples

Basic Usage

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

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

With Properties

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

function MyComponent() {
    return <RtkGrid meeting={meeting} aspectRatio="16:9" gap={12} size="md" />;
}

Was this helpful?

YesNo

On this page

RtkGrid - 图1Docs

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react-native/rtkgrid/#page","headline":"RtkGrid","description":"API reference for RtkGrid component (React Native Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react-native/rtkgrid/","inLanguage":"en","image":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react-native/rtkgrid/og.png?v=515ca2287a49b4e3","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 RtkGridPagination component (React Native Library) title: RtkGridPagination image: https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react-native/rtkgridpagination/og.png?v=e5272e9f91aade2a

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.