Typography

This is basically Text component from npx create-expo-app. But I improved a little bit. Now its better to use.

You can import the ThemedText component like below:

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

You can use the ThemedText component like below:

<ThemedText>Hello</ThemedText>

Initially, you don’t need to set color. It will be automatically set based on the theme. If dark mode is enabled, it will be white. Otherwise, it will be black. But it is not done yet. You can make a header this ThemedText component.

If you want to look. Go to the @/components/common/ThemedText.tsx file.

You will see:

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

Usage

You can use the ThemedText component like below:

<ThemedText type="title">Hello</ThemedText>

Get Started

AI Wrapper

Authentication

Monetization

Core Features

Analytics & Monitoring

Prebuilt Screens

UI Components

Troubleshooting

Usage

​Usage

Usage