2. Layout and style

A component's styles are CSS, and on a phone they are compiled when the app is built: each rule becomes a native style the engine matches against the component's own elements, the way a browser scopes Angular's styles to the component that wrote them.

Layout is flexbox, computed by Yoga, React Native's layout engine. Every <view> is a flex container, and Yoga's defaults are not a browser's: flex-direction: column, align-items: stretch and flex-shrink: 0. Children run top to bottom and stretch to the width of their parent unless it says otherwise, and none of them shrinks to make room, so a long text beside another control in a row needs flex-shrink: 1 (or flex: 1) before it wraps rather than pushing past the edge.

Step 1 of 3

Make the title a title

Give the first <text> a class, and style the class:

<text class="title">Today</text>

.title {
  font-size: 30px;
  font-weight: 700;
}

These examples use px. The compiler turns them into the density-independent units native layout uses, points on iOS and density-independent pixels on Android, so 30px is the same size on every screen density rather than 30 physical pixels. rem, em, percentages and the viewport units work too.