React Native <View> vs <Text> — Simplified
<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!