This post is part of the series 30 Days of React Native.
In this series, we're starting from the very basics and walk through everything you need to know to get started with React Native. If you've ever wanted to learn React Native, this is the place to start!
The Text component is one of the most common React Native components — we use it whenever we need to display text in our app.
Unlike with React on the web, we can't just put text content directly inside any component. For example, this code won't run:
<View>My text</View>
Instead, we need to wrap all of our text within a Text component:
<View>
<Text>My text</Text>
</View>
We've previously covered how we can use the style prop to style components in general. Here we'll cover some of the common ways we can style Text components specifically.
Text components can use all of the same style properties as View components, plus an additional set of Text-specific properties. Here are a few of the most common Text-specific properties:
Text component. One of: 'auto', 'left', 'right', 'center', 'justify'.In the following example, we'll set each of these properties, along with a few we've already used to style our View components:
By default, Text components automatically grow horizontally to fit the text content drawn within. If the Text component can't grow horizontally within its parent anymore, it will then wrap the text content to the next line and grow vertically. However, we can override this behavior by specifying the dimensions of the component ourselves.
In this example, we set the width of the Text to 200 explicitly, which affects where it wraps to the next line:
Note that textAlign affects the alignment of the text content drawn within the Text component, but not the component itself. If we want to align the Text component in the horizontal center of the screen, we would set the alignItems style property on the parent View.
Text components are similar to "block" elements on the web — if we use multiple Text elements within the same parent, they will stack on top of each other:
However, we sometimes want Text components to act like "inline" elements so that we can render multiple styles of text content within a single paragraph. Text components can be nested to accomplish this. In this example, we'll style a specific range of text within the larger paragraph:
Styles applied to a Text component also apply to every Text component descendant within it. In the previous example, the nested text inherits styles.text, but then overrides the fontWeight by applying styles.boldText (the innermost style has the highest precedence).
Now, text is great and all, but if we want our app to look even better, we'll need to throw in some images. Tomorrow we'll learn how to do that using the Image component.
The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.
If at any point you feel stuck, have further questions, feel free to reach out to us by:
