Text

import { Host, Text } from '@expo/ui/jetpack-compose';

export default function BasicTextExample() {
  return (
    <Host matchContents>
      <Text>Hello, world!</Text>
    </Host>
  );
}

import { Host, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function TypographyExample() {
  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        <Text style={{ typography: 'displayLarge' }}>Display Large</Text>
        <Text style={{ typography: 'headlineMedium' }}>Headline Medium</Text>
        <Text style={{ typography: 'bodySmall' }}>Body Small</Text>
        <Text style={{ typography: 'labelLarge' }}>Label Large</Text>
      </Column>
    </Host>
  );
}

import { Host, Text } from '@expo/ui/jetpack-compose';
import { width } from '@expo/ui/jetpack-compose/modifiers';

export default function TextOverflowExample() {
  return (
    <Host matchContents>
      <Text maxLines={2} overflow="ellipsis" modifiers={[width(200)]}>
        This is a long paragraph of text that will be truncated after two lines with an ellipsis at
        the end to indicate there is more content.
      </Text>
    </Host>
  );
}

import { Host, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function StyledTextExample() {
  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        <Text style={{ fontWeight: 'bold', fontSize: 20 }}>Bold text</Text>
        <Text style={{ fontStyle: 'italic' }}>Italic text</Text>
        <Text style={{ textDecoration: 'underline' }}>Underlined text</Text>
        <Text style={{ letterSpacing: 4 }}>Spaced out text</Text>
        <Text color="#E91E63" style={{ fontSize: 18, textAlign: 'center' }}>
          Colored and centered
        </Text>
      </Column>
    </Host>
  );
}

import { Host, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function NestedTextExample() {
  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        {/* Bold parent, italic child inherits bold */}
        <Text style={{ fontWeight: 'bold' }}>
          Hello <Text style={{ fontStyle: 'italic' }}>world</Text>!
        </Text>

        {/* Mixed inline styles */}
        <Text style={{ fontSize: 16 }}>
          Normal, <Text style={{ fontStyle: 'italic' }}>italic</Text>,{' '}
          <Text style={{ fontWeight: 'bold' }}>bold</Text>, and{' '}
          <Text style={{ textDecoration: 'underline' }}>underlined</Text>
        </Text>

        {/* Color and background overrides per span */}
        <Text style={{ fontSize: 18 }}>
          Click{' '}
          <Text color="#007AFF" style={{ fontWeight: 'bold' }}>
            here
          </Text>{' '}
          or <Text style={{ background: '#FFEB3B' }}>highlighted</Text>
        </Text>

        {/* Deep nesting — styles accumulate */}
        <Text style={{ fontWeight: 'bold' }}>
          Bold{' '}
          <Text style={{ fontStyle: 'italic' }}>
            bold+italic <Text style={{ textDecoration: 'underline' }}>bold+italic+underline</Text>
          </Text>
        </Text>
      </Column>
    </Host>
  );
}

import { Host, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function CustomFontExample() {
  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        <Text style={{ fontFamily: 'serif', fontSize: 16 }}>System serif font</Text>
        <Text style={{ fontFamily: 'monospace', fontSize: 16 }}>System monospace font</Text>
        <Text style={{ fontFamily: 'Inter-Bold', fontSize: 16 }}>Custom Inter Bold font</Text>
      </Column>
    </Host>
  );
}