The Text Component

Text is the only component allowed to contain strings; a bare string under a View is a render error. It supports nesting, styling and its own onPress and onLongPress. The classic "nested title" example used fontFamily: 'Cochin', which exists only on iOS; on Android use a generic family such as 'serif', or a font loaded with expo-font:

  const [title, setTitle] = useState('The Quiet Harbor');
  return (
    <Screen>
      <Text style={{ fontFamily: 'serif', fontSize: 16 }}>
        <Text style={ui.h1} onPress={() => setTitle(`${title} [pressed]`)}>{title}{'\n'}</Text>
        <Text>A lighthouse keeper's daughter pieces together a disappearance.</Text>
      </Text>
      <Text selectable style={ui.card}>Long-press to select and copy this line.</Text>
    </Screen>

The title inherits the serif family although ui.h1 sets no font, '\n' is a real line break, and a tap appends " [pressed]". selectable brings Android's own selection handles and Copy toolbar. Also useful: adjustsFontSizeToFit, onTextLayout and, on Android, dataDetectorType (tappable phone numbers, links or emails). Leave allowFontScaling at its default of true: users who raise the system font size depend on it. A layout that breaks at 130% needs flexible heights, plus maxFontSizeMultiplier (say 1.5) on the few labels that truly cannot grow.