Themed components are the foundation of GymApp’s UI. They automatically adapt their colors based on the system color scheme, providing a consistent experience across light and dark modes.
ThemedText A text component that automatically applies theme-aware colors and includes predefined typography variants.
Props type
'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'
default: "'default'"
Typography variant to apply:
default: Regular body text (16px, line height 24)title: Large heading (32px, bold)defaultSemiBold: Semi-bold body text (16px, weight 600)subtitle: Section heading (20px, bold)link: Link styling (16px, blue color) Override text color in light mode (e.g., "#000000")
Override text color in dark mode (e.g., "#FFFFFF")
Additional React Native style props
All standard React Native Text props are supported (onPress, numberOfLines, etc.)
Usage Examples Basic Usage
Custom Colors
With Custom Styles
Real Example
import { ThemedText } from '@/components/themed-text' ; export default function MyScreen () { return ( <> < ThemedText > Regular text that adapts to theme </ ThemedText > < ThemedText type = "title" > Welcome! </ ThemedText > < ThemedText type = "subtitle" > Step 1: Try it </ ThemedText > < ThemedText type = "defaultSemiBold" > app/(tabs)/index.tsx </ ThemedText > </> ); }
import { ThemedText } from '@/components/themed-text' ; export default function MyScreen () { return ( < ThemedText lightColor = "#FF0000" darkColor = "#FF6B6B" > Custom colored text </ ThemedText > ); }
import { ThemedText } from '@/components/themed-text' ; import { Fonts } from '@/constants/theme' ; export default function MyScreen () { return ( < ThemedText type = "title" style = { { fontFamily: Fonts . rounded , textAlign: 'center' , } } > Explore </ ThemedText > ); }
From app/(tabs)/index.tsx: < ThemedView style = { styles . stepContainer } > < ThemedText type = "subtitle" > Step 1: Try it </ ThemedText > < ThemedText > Edit < ThemedText type = "defaultSemiBold" > app/(tabs)/index.tsx </ ThemedText > to see changes. Press { ' ' } < ThemedText type = "defaultSemiBold" > { Platform . select ({ ios: 'cmd + d' , android: 'cmd + m' , web: 'F12' , }) } </ ThemedText > { ' ' } to open developer tools. </ ThemedText > </ ThemedView >
Typography Variants The component includes these predefined variants:
Variant Font Size Line Height Weight Use Case default16px 24px 400 Body text defaultSemiBold16px 24px 600 Emphasized text title32px 32px bold Page titles subtitle20px - bold Section headings link16px 30px - Hyperlinks
ThemedView A view container that automatically applies theme-aware background colors.
Props Override background color in light mode (e.g., "#FFFFFF")
Override background color in dark mode (e.g., "#000000")
Additional React Native style props
All standard React Native View props are supported (onLayout, testID, etc.)
Usage Examples Basic Usage
Custom Colors
Real Example
import { ThemedView } from '@/components/themed-view' ; import { ThemedText } from '@/components/themed-text' ; export default function MyScreen () { return ( < ThemedView style = { { padding: 16 } } > < ThemedText > Content goes here </ ThemedText > </ ThemedView > ); }
import { ThemedView } from '@/components/themed-view' ; export default function MyScreen () { return ( < ThemedView lightColor = "#F5F5F5" darkColor = "#1A1A1A" style = { { padding: 20 , borderRadius: 8 } } > { /* Content */ } </ ThemedView > ); }
From app/(tabs)/index.tsx: < ThemedView style = { styles . titleContainer } > < ThemedText type = "title" > Welcome! </ ThemedText > < HelloWave /> </ ThemedView > < ThemedView style = { styles . stepContainer } > < ThemedText type = "subtitle" > Step 1: Try it </ ThemedText > < ThemedText > Edit < ThemedText type = "defaultSemiBold" > app/(tabs)/index.tsx </ ThemedText > to see changes. </ ThemedText > </ ThemedView >
With styles: const styles = StyleSheet . create ({ titleContainer: { flexDirection: 'row' , alignItems: 'center' , gap: 8 , }, stepContainer: { gap: 8 , marginBottom: 8 , }, });
Implementation Details Both components use the useThemeColor hook to automatically resolve colors:
components/themed-text.tsx
export type ThemedTextProps = TextProps & { lightColor ?: string ; darkColor ?: string ; type ?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link' ; }; export function ThemedText ({ style , lightColor , darkColor , type = 'default' , ... rest } : ThemedTextProps ) { const color = useThemeColor ({ light: lightColor , dark: darkColor }, 'text' ); return ( < Text style = { [ { color }, type === 'default' ? styles . default : undefined , type === 'title' ? styles . title : undefined , type === 'defaultSemiBold' ? styles . defaultSemiBold : undefined , type === 'subtitle' ? styles . subtitle : undefined , type === 'link' ? styles . link : undefined , style , ] } { ... rest } /> ); }
components/themed-view.tsx
export type ThemedViewProps = ViewProps & { lightColor ?: string ; darkColor ?: string ; }; export function ThemedView ({ style , lightColor , darkColor , ... otherProps } : ThemedViewProps ) { const backgroundColor = useThemeColor ({ light: lightColor , dark: darkColor }, 'background' ); return < View style = { [{ backgroundColor }, style ] } { ... otherProps } /> ; }
Best Practices
Use themed components consistently
Always use ThemedText and ThemedView instead of the standard Text and View components to ensure your UI adapts properly to theme changes.
Override colors sparingly
Only use lightColor and darkColor props when you need specific colors for branding or emphasis. Let the theme system handle most color decisions.
Choose the right text variant
Use appropriate text types for hierarchy: title for page headers, subtitle for sections, defaultSemiBold for emphasis, and default for body text.
Combine with layout styles
Use the style prop for layout and spacing (padding, margin, flexbox), while letting the component handle colors.
UI Components Explore specialized components
Theming Learn about the theming system
