Skip to content

RtkText

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

Properties

PropertyTypeRequiredDefaultDescription
childrenReactNode-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
styleStyleProp<TextStyle>\{\}Custom text styles
onBrandbooleanfalseUse 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>
);
}