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 style={styles.subheader}>This is <Text style={styles.bold}>so cool!</Text></Text> </Text> ); const styles = StyleSheet.create({ headline...