Display and Format Text in a React Native Application
Displaying text is a key component of mobile apps, so we’ll look at how to show text on the screen, and how it differs from text on the web. We’ll also format the text style to change the size, alignment, and more.
Instructor: [00:00] Let's clean up this app component even further by removing everything unnecessary and starting from scratch. Now we're left with just the basic React component.
[00:10] Unlike on the web, where you can use divs and paragraph tags without importing them, in React Native everything that gets displayed is a component. We have to import those components. Instead of a div, we'll import and use the View component from React Native. Instead of a paragraph tag, we'll import and use the Text component.
[00:33] When we reload now, we can see the text in the upper-left corner of the screen. It's covered by the status bar however, so let's style the text a bit. We can use inline styles, just like with React on the web. Let's add some padding and change the font size and the text alignment. Now we have our first formatted text label on the screen.
[00:59] The styling that we can do to Text in React Native is similar to what you're used to with React on the web. You can change the color and the font weight of a Text component. Though, note that if you provide font weight as a number, it must be given as a string.
[01:17] We can continue by adding another text block. We're creating a restaurant review app, so let's add the name of a restaurant we'd like to review. When we reload, you can see the text block appear under the first one as if it were another paragraph tag on the web.
[01:33] We can also nest more text inside of a Text component. If we wanted to display the address for the React café, we could put it as a child of the Text component. Then we could style that differently than the parent text.
[01:46] However, if we nest text inside of Text, it acts like inline text. That's useful in some circumstances, but for now we'd like the address beneath the name. We'll pull out the nested Text component.
[02:01] Also note that the only built-in component that can be nested inside of Text is another Text component. If we try to nest a View here, we'll get a message that tells us that we can't nest Views inside of Text components.
[02:17] Finally, whenever you want to display text in a React Native app, remember that it must be wrapped in a text tag. It cannot just be put inside of View or other component. If we wanted to add a second restaurant name here and reload, we'd get an error because the text is not wrapped in a Text component. Instead, let's duplicate what we did for the first restaurant and display our second entry.