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.