Because Expo and React Native translate components to their native counterpart, they aren’t exactly similar to plain React. With web, you can render text anywhere in the document without adding parent elements. On native platforms like Android and iOS, that’s not possible.
To render text on Android and iOS, the string needs to be wrapped in a Text component. With this component, you can render and style text. It can also inherit styling from a parent Text component, perfect for emphasizing certain words.
Instructions
Let’s render some text in the center of our screen.
The preview on the right is the web version of our Expo app.
It renders the text because View components are translated to div on web, which allows rendering text without the Text component.
But because this isn’t actually valid React Native code, this will fail on a mobile device.
Wrap the text in a Text component to make it valid code without syntax errors.
Nice! With Text, you can render any string you want.
Although the text is visible, it’s not perfect in terms of readability.
Let’s improve that by making our font-size 16 pixels.
Great!
Sometimes you want to help the reader by emphasizing specific parts of the text.
Let’s make quick brown fox bold by wrapping it in a nested Text component.
Perfect!
Did you notice that we didn’t specify the fontSize again on the nested Text component?
That’s because nested Text components inherit some styling rules from parent Text components.
There are a lot more styling rules for Text waiting to get applied.
You can see them all in the Text style props documentation.
Feel free to try out more rules, press run to continue to the next exercise.