Text

Text shows text. Strings, numbers and nested <Text> inside it become one run of text, each part with its own style; numberOfLines cuts it short.

import { Text, View } from '@soundor/react';

// Text is the only place strings go. Nested <Text> continues the same run
// with its own style; numberOfLines cuts it short.
export default function Typography() {
  return (
    <View style={{ width: 300, gap: 10 }}>
      <Text style={{ fontSize: 22, fontWeight: 'bold', color: '#e6e7ea' }}>
        Warm Tape
      </Text>
      <Text style={{ fontSize: 14, color: '#8b8f98' }}>
        Saturation <Text style={{ color: '#f2b13a' }}>+3 dB</Text>, wow and
        flutter <Text style={{ fontStyle: 'italic' }}>subtle</Text>.
      </Text>
      <Text
        numberOfLines={2}
        style={{ fontSize: 14, lineHeight: 20, color: '#e6e7ea' }}
      >
        A long description is cut after two lines: the rest of this sentence
        keeps going, well past what the box has room for, and never shows.
      </Text>
    </View>
  );
}

text.tsxSource

Strings go in Text. A string anywhere else is an error, as in React Native: there is no text outside a text node.
Styles: fontSize, fontWeight, fontStyle, fontFamily, lineHeight, letterSpacing, textAlign and color, besides a view's layout and paint (Style). A nested <Text> inherits its parent's and overrides some.
To assistive technology a Text is read as its text, nested ones included, once. Accessibility props of a nested <Text> have no effect.

Props

Prop

Type

Text also takes the event props and the accessibility props.

PropsCopy Anchor Link

On this page

Props