Mastering React Native

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