Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Core Components  ›  Lesson

View and Text

View 10 minView is the container that arranges content, while Text is the only component that shows words; nested Text inherits styles from its parent Text but not from a View.

View and Text

Every screen in Sprout, however fancy, is built mostly from two components. View arranges things and Text says things. They look like div and span, but each has habits of its own that trip up web developers.

The rule

View arranges and holds; Text shows words and nests other Text.

View is the basic building block of layout. It can hold any components, take a style, respond to layout and accessibility props, and it uses Flexbox by default. A View never shows text itself.

<View style={{ padding: 16, backgroundColor: '#eef7ee' }}>
  <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Fern</Text>
  <Text>
    Next water: <Text style={{ fontWeight: 'bold' }}>tomorrow</Text>
  </Text>
</View>

Text has three habits worth learning:

  • Nesting. A Text inside a Text flows inline, like a span, and inherits the outer text's styles such as colour and font size. That is how "tomorrow" becomes bold mid-sentence above.
  • No inheritance from View. A color on a View does nothing for the Text inside it. Text styles only pass from Text to nested Text.
  • Truncation. numberOfLines={1} cuts long text with an ellipsis, handy for long plant notes.

Text also supports onPress, so a word can be tappable, and selectable to let users copy it.

Two more web habits do not carry over. A View never scrolls when its content is too tall; the extra content is simply cut off until you use a scrolling component. And text cannot be selected and copied unless you add selectable.

The shortcut

Before writing a screen, sketch it as boxes and words: every rectangle is a View, every run of words is a Text, and any styled word inside a sentence is a nested Text.

Sketching a plant cardStep 1 of 4

  1. The card

    One rectangle with padding and a background. That is a View.

The trap is putting color: 'green' on the card View and wondering why the text stays black. Move it to the Text.

Drills

Answer fast — trust the rule.

quick drill

You set color: 'green' on a View. What colour is the Text inside it?

quick drill

How do you make one word bold in the middle of a sentence?

quick drill

Which prop shows at most one line of a long note, ending with an ellipsis?

quick drill

A nested Text sits inside an outer Text with fontSize: 18. What font size does the inner one use if it sets none?

Remember

  • View arranges and holds; Text shows words and nests other Text.
  • Sketch as boxes and words: rectangles are View, words are Text.
  • Trap: text styles on a View do not reach the Text inside.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainSketch a card

Describe how you would build a card showing a plant's name in large bold type and the sentence 'Next water: in 2 days' with only '2 days' in green. Explain why a green colour on the card View would not work.