ThemedText

A wrapper around React Native's Text component that automatically applies the correct text color based on the current theme.

Import

import ThemedText from '@/components/ThemedText';

Features

Automatic light/dark mode text color adaptation
Extends all React Native Text props
Works with Tailwind CSS classes
Simple drop-in replacement for Text component

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	Required	Text content
`className`	`string`	`''`	Additional Tailwind classes
`...props`	`TextProps`	—	All React Native Text props

Basic Usage

// Basic usage
<ThemedText>
  This text will be black in light mode and white in dark mode
</ThemedText>
 
// With additional styling
<ThemedText className="text-lg font-bold">
  Styled text with proper theme colors
</ThemedText>
 
// With custom text color (overrides theme colors)
<ThemedText className="text-blue-500">
  Custom colored text
</ThemedText>
 
// With other Text props
<ThemedText 
  numberOfLines={2} 
  ellipsizeMode="tail"
  className="text-base"
>
  This is a long text that will be truncated after two lines when it exceeds the available space
</ThemedText>

ThemedText

ThemedText

Import

Features

Props

Basic Usage

On this page