RtkText

Themed text component that applies the design system's colors, font family, and font size.

Properties

Property	Type	Required	Default	Description
`children`	`ReactNode`	✅	-	Text content
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	❌	`'md'`	Font size (sm=14, md=16, lg=18, xl=20)
`fontWeight`	`'normal' \| 'bold' \| '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900'`	❌	`'normal'`	Font weight
`style`	`StyleProp<TextStyle>`	❌	`\{\}`	Custom text styles
`onBrand`	`boolean`	❌	`false`	Use brand text color instead of default text color

Usage Examples

Basic Usage

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

function MyComponent() {
	return <RtkText>Hello World</RtkText>;
}

With Properties

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

function MyComponent() {
	return (
		<RtkText size="lg" fontWeight="bold" onBrand={true}>
			Meeting Title
		</RtkText>
	);
}