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

# Text

> Render native text with shared typography variants and modifiers

export const LocalUiPlayground = ({component, title, height = 640}) => {
  const [playgroundUrl, setPlaygroundUrl] = useState(null);
  useEffect(() => {
    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    setPlaygroundUrl(isLocal ? 'http://localhost:8090/' : 'https://selcouthdigital.github.io/amisi-mobile-starter/');
  }, []);
  if (!playgroundUrl) {
    return null;
  }
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <iframe src={`${playgroundUrl}?component=${component}`} title={title} className="block w-full" style={{
    height
  }} loading="lazy" />
    </div>;
};

`Text` wraps React Native `Text` with shared utility-class typography.

<LocalUiPlayground component="text" title="Interactive Text example" />

## Usage

```tsx theme={null}
import { Text, View } from '@amisi-mobile-starter/ui';

export const Typography = () => (
  <View className="gap-2">
    <Text variant="heading">Account</Text>
    <Text variant="body">Manage your personal details.</Text>
    <Text variant="caption" italic>
      Updated just now
    </Text>
  </View>
);
```

## Props

| Prop         | Type                                                                                                    | Default     | Description                             |
| ------------ | ------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------- |
| `variant`    | `'base' \| 'heading' \| 'body' \| 'caption' \| 'label' \| 'muted'`                                      | `'base'`    | Typography preset.                      |
| `size`       | `'3xs' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl' \| '6xl'`   | `undefined` | Font-size override.                     |
| `lineHeight` | `'3xs' \| '2xs' \| 'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl' \| '6xl'` | `undefined` | Line-height override.                   |
| `semibold`   | `boolean`                                                                                               | `undefined` | Applies semibold weight when true.      |
| `bold`       | `boolean`                                                                                               | `undefined` | Applies bold weight when true.          |
| `underline`  | `boolean`                                                                                               | `undefined` | Underlines text when true.              |
| `strike`     | `boolean`                                                                                               | `undefined` | Strikes through text when true.         |
| `sub`        | `boolean`                                                                                               | `undefined` | Applies the muted text color when true. |
| `italic`     | `boolean`                                                                                               | `undefined` | Italicizes text when true.              |
| `highlight`  | `boolean`                                                                                               | `undefined` | Applies a yellow background when true.  |

`Text` also accepts all React Native `TextProps`, including `children`, `style`, and `className`.