Text - AMiSi Mobile Starter

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

Usage

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.