NativeTemplates
Components

ThemedText

A text component that automatically adapts to light and dark mode.

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

PropTypeDefaultDescription
childrenReact.ReactNodeRequiredText content
classNamestring''Additional Tailwind classes
...propsTextProps—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>

ThemeTabs

A customizable tabs component with support for scrollable and fixed tabs, animations, and sticky headers.

TimePicker

A form component for selecting time values with multiple style variants

On this page