Nesting and Organizing Components

A house contains rooms, and each room contains furniture. A screen in React Native is arranged in a similar way: one component contains other components, and those contain still smaller ones. Placing one component inside another like this is called nesting. The outer component is called the parent, and the inner one is called the child.

Nesting a Component

Here is a user profile made of two components. UserInfo knows how to show the details, and UserProfile adds a heading and places UserInfo below it.

import { View, Text } from 'react-native';

function UserInfo() {