O'Reilly logo

Mastering React Native by Jacob Friedmann, Eric Masiello

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling text with React Native

While most of the rules around React Native styling are equally applicable to text, there is one notable exception: nested Text elements actually inherit type styles from one another. As an example, imagine in the HTML/CSS world you have a span element that contains several words, one of which you'd like to appear bold. You could simply wrap that single word with a strong element and achieve your goal. The inner strong element would inherit the typographic styles of the parent span but make its own text bold. This same concept applies in React Native. Take a look at the following code snippet:

const BasicType = () => ( <Text style={styles.headline}> Welcome to <Text style={styles.bold}>React</Text> Native {'\n'} <Text ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required