RtkNameTag

Displays a participant's name with optional child content (such as an audio visualizer icon). Used as an overlay on participant tiles.

Properties

Property	Type	Required	Default	Description
`participant`	`Peer`	✅	-	The participant to display the name for
`meeting`	`RealtimeKitClient`	❌	-	The RealtimeKit meeting instance (used to identify self)
`isScreenshare`	`boolean`	❌	`false`	Whether this is a screenshare name tag
`maxLength`	`number`	❌	`20`	Maximum width offset for the name tag
`size`	`'lg' \| 'md' \| 'sm' \| 'xl'`	❌	`'sm'`	Text size
`t`	`RtkI18n`	❌	-	i18n translation function
`children`	`ReactNode`	❌	-	Content to render before the name

Usage Examples

Basic Usage

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

function MyComponent() {
	return <RtkNameTag participant={participant} />;
}

With Properties

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

function MyComponent() {
	return (
		<RtkNameTag
			participant={participant}
			meeting={meeting}
			size="md"
			maxLength={25}
		/>
	);
}