Nesting and Styling Text

Nested Text elements are not separate views. React Native 36,878 flattens the subtree into one attributed string (a SpannableString on Android, an NSAttributedString on iOS) drawn by a single native view, so inner pieces wrap like inline spans. An inner Text inherits its outer Text's font, color and weight, but nothing inherits from a View, and fontFamily takes one name, not a fallback list. For app-wide typography, use a wrapper component:

src/demos/NestedText.tsx: an AppText wrapper, spans and a row (excerpt)TSX

function AppText({ style, ...rest }: TextProps) {
  return <Text style={[{ fontSize: 16, color: '#37474f' }, style]} {...rest} />;
}
      <AppText style={ui.card}>
        Rated <AppText style={{ fontWeight: '700' }}>4.8</AppText> by{' '}
        <AppText style={{ fontStyle: 'italic' }}>1,204 readers</AppText>.{' '}
        <AppText style={{ color: '#1565c0' }} onPress={() => console.log('reviews')}>
          Read the reviews
        </AppText>
      </AppText>
      <View style={[ui.card, { flexDirection: 'row' }]}>
        <AppText>Two Text boxes in a row View: </AppText>
        <AppText style={{ flexShrink: 1 }}>each one wraps inside its own column.</AppText>
      </View>
      <AppText style={ui.card}>
        <AppText>Two Text nodes in one Text: </AppText>
        <AppText>they flow together like a paragraph.</AppText>
      </AppText>

Inside a Text, layout is text layout, not flexbox: the last card's two nodes run on as one paragraph (middle screen of the figure in Long Text). Inside a row View, each Text is a flex item with its own rectangle, so the second wraps within its own column, but only thanks to flexShrink: 1; without it, the box keeps its one-line width and runs off the screen. Nested onPress makes inline links easy, but a phrase is a much smaller touch target than a button.

MENU