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>
  );
}