React Native <View> vs <Text> — Simplified

Infinitypaul
2 min readMar 20, 2020

<Text> and <View> are probably THE most important most-used components built in to React Native

<View> is your #1 component if you need to group and structure content ( provide a layout) or if you want to style something like a container, <View> uses Flexbox to organize its children

A <View> can hold as many child components as you need and it also works with any kind of child component - it can hold <Text> components, other <View>s (for nested containers/ layouts), <Image>s, custom components etc.

If you need scrolling, you should consider using a <ScrollView> - you could wrap your <View> with it or replace your <View> (that depends on your layout and styling). Please note, that due to its scrollable nature, Flexbox works a bit differently on a <ScrollView>

<Text> is also super important. As its name suggests, you can use it for outputting text (of any length). You can also nest other <Text> components into a <Text>. You can also have nested <View>s inside of a <Text> but that comes with certain caveats you should watch out for

Unlike <View>, <Text> does NOT use Flexbox for organizing its content (i.e. the text or nested components). Instead, text inside of <Text> automatically fills a line as you would expect it and wraps into a new line if the text is too long for the available <Text> width.

You can avoid wrapping by setting the numberOfLines prop, possibly combined with ellipsizeMode.

Example:

<Text numberOfLines={1} ellipsizeMode="tail">
This text will never wrap into a new line, instead it will be cut off like this if it is too lon...
</Text>

Also important: When adding styles to a <Text> (no matter if that happens via inline styles or a StyleSheet object), the styles will be shared with any nested <Text> components.

This differs from the behaviour of <View> (or any other component - <Text> is the exception). Styles are only applied to the component to which you add them. Styles are never shared with any child component!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Infinitypaul

Software Developer — I admire breaking up complex problems into understandable and sizeable bits, solving daily challenges with technology