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

1

You can import the ThemedText component like below:

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

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.

1

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

2

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

type is a prop that you can pass to the ThemedText component. It will determine the style of the text.

​
Usage

You can use the ThemedText component like below:

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

Was this page helpful?

ContainerSearchbar