Text

A native view has no concept of a bare text node. There is no <p> and no way to imply one: any character an app wants on screen has to sit inside a <text> element, imported from this package. Writing <view>Hello</view> compiles, and renders nothing.

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.

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>

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 (clip is iOS only). 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.

textdirective@ng-native/components

import { Text } from '@ng-native/components';and add Text to the component's imports

A run of text. Commits as Paragraph , or as a span ( VirtualText ) when nested in another <text> , which the engine decides from the tree so a nested run inherits its parent's font and sits on its baseline.

Inputs

numberOfLines

number

Truncate after this many lines, with ellipsizeMode deciding where the ellipsis goes.

ellipsizeMode

EllipsizeMode

Where truncated text is cut. clip is iOS only. Defaults to tail , as React Native's Text does in JavaScript: native's own default is to clip, with no ellipsis. The default is the engine's, below text-overflow in a stylesheet, which in turn is below this input.

selectable

boolean

Let the user select and copy the text.

selectionColor

string

The highlight colour of a selection.

allowFontScaling

boolean

Scale with the system Text Size setting. Defaults to true.

maxFontSizeMultiplier

number

The most allowFontScaling may scale by; 0 means no limit.

dynamicTypeRamp

DynamicTypeRamp

iOS: the Dynamic Type style this text follows.

adjustsFontSizeToFit

boolean

iOS: shrink the font to fit numberOfLines .

minimumFontScale

number

iOS: the smallest scale adjustsFontSizeToFit may shrink to, from 0.01 to 1.

lineBreakStrategyIOS

'none' | 'standard' | 'hangul-word' | 'push-out'

iOS: the line-breaking strategy.

textBreakStrategy

'simple' | 'highQuality' | 'balanced'

Android: the line-breaking strategy.

dataDetectorType

'phoneNumber' | 'link' | 'email' | 'none' | 'all'

Android: turn phone numbers, links and addresses into tappable text.

android_hyphenationFrequency

'normal' | 'none' | 'full'

Android: how often to hyphenate.

pressable

boolean = false

Respond to presses. See the class note.

suppressHighlighting

boolean = false

iOS: do not grey the text while it is pressed.