Text

import { Component, input } from '@angular/core';
import { View, Text } from '@ng-native/components';

@Component({
  selector: 'app-greeting',
  imports: [View, Text],
  template: `
    <view>
      <text>Hello, {{ name() }}</text>
    </view>
  `,
})
export class Greeting {
  readonly name = input('there');
}

A <text> nested inside another <text> renders as an inline run sharing the parent's font and baseline, which is how to mix styles within one paragraph: <text>Plain <text class="bold">and bold</text></text>. Text styling - color, font-size, weight - inherits down through the CSS cascade exactly as it does on the web. It does not inherit from an inline [style] set on an ancestor <view>, which is easy to assume works like a cascading color and does not: put text styles in a stylesheet rule or on the <text> itself.

Whitespace

A paragraph drops the whitespace at its start and its end, as a browser does: spaces, tabs, line breaks and form feeds. A <text> written across lines by a formatter is not indented. That applies to a bound value as to the template's own text: {{ value() }} with ' a\n' draws a. Whitespace inside the text, and between a run and a nested <text>, is kept.

A no-break space is text and is kept, at either end: '\u00a0' in a value, or   in a template, holds a space where it has to be drawn, and one alone holds a line open.

Presses

React Native only makes a piece of text pressable when a press handler is actually attached to it, and an Angular template gives no way to ask "is (press) bound to this element" from inside the component. So <text> needs an explicit pressable input before (press), (pressIn), (pressOut) or (longPress) will fire on it - binding the events alone does nothing.

<text pressable (press)="onSelect()">Select</text>

A pressable text is announced as a link, as React Native's Text is, unless it has a role or accessibilityRole of its own or is disabled.

disabled stops the presses and tells VoiceOver and TalkBack the text is disabled, as React Native's Text does. A disabled text says so whether or not it is pressable. When disabled and aria-disabled disagree, disabled decides what is announced, on a text and on every control. When disabled is unset, aria-disabled or accessibilityState.disabled stops the presses as well, as it does on React Native's Text.

Fonts

A font is styled the same way as on the web: font-family, font-weight, font-size in a stylesheet or [style], resolved to native's single-name fontFamily at build time. A custom font still has to be registered with the platform before it can be requested this way - see Load custom fonts for loadFonts(), which has to run before the app mounts so the first frame is not painted in the fallback face.

Truncation, selection and font scaling

numberOfLines truncates after that many lines, with ellipsizeMode choosing where the ellipsis goes. On a device clip is iOS only; in a browser it cuts the text with no ellipsis, and head and middle put the ellipsis at the end. selectable lets the user copy the text. allowFontScaling (on by default) and maxFontSizeMultiplier control how far the system's text-size setting is allowed to grow it. adjustsFontSizeToFit and minimumFontScale (iOS) shrink the font instead of truncating, down to a floor. dynamicTypeRamp (iOS) follows a Dynamic Type style rather than a fixed size, and dataDetectorType (Android) turns phone numbers, links, addresses and emails into tappable text.

Gradient text

<gradient-text> draws a background through its letters: a gradient, or any background the element is given. The rule is the one a web page writes:

<gradient-text class="brand">Week</gradient-text>

.brand {
  background-image: linear-gradient(to bottom, #437dfc, #4ad0ef);
  background-clip: text;
  color: transparent;
  font-size: 34px;
  font-weight: 700;
}

It is text like any other. It wraps, follows the device's text size, is sized by its letters, and takes <text> spans inside it with their own weight or style. A span cannot have a color of its own, since the fill is the one background behind all of it. A screen reader reads the letters as one element, or the accessibilityLabel it is given.

background-clip: text is what this element does, so a rule that has it applies to <gradient-text> and to nothing else. On a <text> the same class does nothing, where it would otherwise leave transparent letters on a block of color, and a rule written for another element, text.brand, is dropped at build time with a warning that names this one. The color in the rule is not used: the letters are the mask, and are drawn in full.

The app must have @react-native-masked-view/masked-view installed, which is where the native view comes from, and which Expo Go includes:

npx expo install @react-native-masked-view/masked-view