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!