Your first component

Learn to write your first component with View and Text.

View and Text

View is the most basic container component in React Native. Think of it like a <div>; you put other components inside it. Text displays text on the screen, like a <p>.

Both are imported from the react-native package: import { View, Text } from 'react-native';.

Component names always start with a capital letter; this lets React tell them apart from HTML tags.

Nested components

In React Native, components can be nested. You can put another <View> or <Text> inside a <View>. This is the basis of the component tree.

Every opening tag must have a closing tag. An empty tag can be written in self-closing form like <View />.

Nested structures let you break the screen into logical pieces.

Exercise Write nested components

Write an App component. Place two <Text> elements inside a <View>: the first says Title, the second says Description.

Show example solution

function App() {
  return (
    <View>
      <Text>Title</Text>
      <Text>Description</Text>
    </View>
  );
}

Test yourself

Closing tag

<View>
  <Text>Hello</Text>
____>

Show answer

<View>
  <Text>Hello</Text>
</View>

How do you place a Text inside a View?
- <Text><View>Hello</View></Text>
- <View><Text>Hello</Text></View>
- <View Text>Hello</View>
- <View><Text Hello /></View>
Show answer

<View><Text Hello /></View> — <View><Text>...</Text></View>. View is the container; Text sits inside.
Match the components

View

Container
Text

Text
import

Bring in
export

Send out

Next lesson: App.js

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies