Skip to main content

​
Overview

The RIS Gran Chimú app uses themed components that automatically adapt to light and dark mode. The two primary components are ThemedText and ThemedView, which provide consistent styling across the application.

​
ThemedText

A text component that automatically adapts to the current color scheme.

​
Implementation

src/components/ThemedText.tsx
import { StyleSheet, Text, type TextProps } from 'react-native';
import { useThemeColor } from '@/src/hooks/useThemeColor';

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

const styles = StyleSheet.create({
  default: {
    fontSize: 16,
    lineHeight: 24,
  },
  defaultSemiBold: {
    fontSize: 16,
    lineHeight: 24,
    fontWeight: '600',
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    lineHeight: 32,
  },
  subtitle: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  link: {
    lineHeight: 30,
    fontSize: 16,
    color: '#0a7ea4',
  },
});

​
Props

​
lightColor
string
Override color for light mode
​
darkColor
string
Override color for dark mode
​
type
'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'
default:"default"
Text variant with predefined styles

​
Text Types

TypeFont SizeFont WeightLine HeightUse Case
default16pxnormal24pxBody text
defaultSemiBold16px60024pxEmphasized body text
title32pxbold32pxPage titles
subtitle20pxbold-Section headings
link16pxnormal30pxClickable links (#0a7ea4)

​
Usage Examples

import { ThemedText } from '@/src/components/ThemedText';

export default function Screen() {
  return (
    <ThemedText>This is regular text</ThemedText>
  );
}

​
ThemedView

A view container that automatically adapts its background color to the current color scheme.

​
Implementation

src/components/ThemedView.tsx
import { View, type ViewProps } from 'react-native';
import { useThemeColor } from '@/src/hooks/useThemeColor';

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

​
Props

​
lightColor
string
Override background color for light mode
​
darkColor
string
Override background color for dark mode

​
Usage Examples

import { ThemedView } from '@/src/components/ThemedView';
import { ThemedText } from '@/src/components/ThemedText';

export default function Screen() {
  return (
    <ThemedView style={{ flex: 1, padding: 20 }}>
      <ThemedText type="title">Welcome</ThemedText>
      <ThemedText>This view adapts to light/dark mode</ThemedText>
    </ThemedView>
  );
}

​
Color Theme System

Both components use the useThemeColor hook which references the Colors constant:
src/constants/Colors.ts
export const Colors = {
  light: {
    text: '#11181C',
    background: '#fff',
    tint: '#0a7ea4',
    icon: '#687076',
    tabIconDefault: '#687076',
    tabIconSelected: '#0a7ea4',
  },
  dark: {
    text: '#ECEDEE',
    background: '#151718',
    tint: '#fff',
    icon: '#9BA1A6',
    tabIconDefault: '#9BA1A6',
    tabIconSelected: '#fff',
  },
};
The theme automatically switches based on the device’s system preference. Users can also override this in the app settings.

​
Best Practices

Use Themed Components Consistently

Always use ThemedText and ThemedView instead of raw Text and View components to ensure proper theme support.

Leverage Type Variants

Use the predefined type prop on ThemedText for consistent typography instead of custom styles.

Override Colors Sparingly

Only use lightColor and darkColor props when you need specific branding colors that differ from the theme.

Test Both Themes

Always test your UI in both light and dark modes to ensure readability and proper contrast.

Build docs developers (and LLMs) love

Get started for freeTalk to us