diff --git a/releases/next/docs/text.html b/releases/next/docs/text.html index f3a300ac412..8845321661b 100644 --- a/releases/next/docs/text.html +++ b/releases/next/docs/text.html @@ -140,7 +140,15 @@ html { </View>

You also lose the ability to set up a default font for an entire subtree. The recommended way to use consistent fonts and sizes across your application is to create a component MyAppText that includes them and use this component across your app. You can also use this component to make more specific components like MyAppHeaderText for other kinds of text.

<View> <MyAppText>Text styled with the default font for the entire application</MyAppText> <MyAppHeaderText>Text styled as a header</MyAppHeaderText> -</View>

React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.

<Text style={{fontWeight: 'bold'}}> +</View>

Assuming that MyAppText is a component that simply renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:

class MyAppHeaderText extends Component { + render() { + <MyAppText> + <Text style={{fontSize: 20}}> + {this.props.children} + </Text> + </MyAppText> + } +}

Composing MyAppText in this way ensures that we get the styles from a top-level component, but leaves us the ability to add / override them in specific use cases.

React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.

<Text style={{fontWeight: 'bold'}}> I am bold <Text style={{color: 'red'}}> and red