Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Display and Format Text in a React Native Application

    react-nativeReact Native
    javascriptJavaScript
    androidAndroid
    iosiOS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.