> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipmobilefast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Typography

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

<Steps>
  <Step>
    You can import the `ThemedText` component like below:

    ```tsx {1} theme={null}
    import { ThemedText } from '@/components/common/ThemedText';
    ```
  </Step>

  <Step>
    You can use the `ThemedText` component like below:

    ```tsx {1} theme={null}
    <ThemedText>Hello</ThemedText>
    ```
  </Step>
</Steps>

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.

<Steps>
  <Step>
    If you want to look. Go to the `@/components/common/ThemedText.tsx` file.
  </Step>

  <Step>
    You will see:

    ```tsx theme={null}
        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}
        />
      );
    ```
  </Step>

  <Info>
    `type` is a prop that you can pass to the `ThemedText` component. It will determine the style of the text.
  </Info>
</Steps>

### Usage

You can use the `ThemedText` component like below:

```typescript theme={null}
<ThemedText type="title">Hello</ThemedText>
```