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.
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
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.
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
Sometimes you want to help the reader by emphasizing specific parts of the text.
quick brown fox bold by wrapping it in a nested
Did you notice that we didn’t specify the
fontSize again on the nested
That’s because nested
Text components inherit some styling rules from parent
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.