View Component

What is a View?

The View component is the most fundamental building block in React Native. Think of it as the equivalent of a div in web development. It's a container that holds other components and helps you organize your layout. Every screen in your app is built using Views nested inside each other.

A View by itself doesn't display anything visible — it's just a box. But that box is incredibly powerful because it supports layout, styling, touch handling, and accessibility. You'll use View in almost every component you build.

Your First View

Let's create a simple View with some content inside it:

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

function Card() {
  return (
    <View style={{ padding: 20, backgroundColor: '#e0e0e0', borderRadius: 10 }}>
      <Text>This is inside a View</Text>
    </View>
  );
}

export default Card;

The View wraps the Text component and gives it padding, a background color, and rounded corners. Without the View, you couldn't apply these styles because Text components don't support all style properties. Views are your go-to containers for layout and styling.

View Styling Basics

Views accept a style prop that works similarly to CSS, but uses camelCase properties instead of kebab-case. You don't write background-color, you write backgroundColor. There are no CSS files — styles are written in JavaScript.

<View style={{
  flex: 1,
  backgroundColor: '#ffffff',
  padding: 16,
  margin: 8,
  borderRadius: 8,
  alignItems: 'center',
  justifyContent: 'center',
}}>
  <Text>Centered content</Text>
</View>

The most commonly used style properties for Views are flex, padding, margin, backgroundColor, borderRadius, and alignment properties. We'll cover all of these in depth in the styling section.

Nesting Views

Views can be nested inside other Views to create complex layouts. This is how you build most UIs in React Native — layering Views on top of each other to create structure.

<View style={{ flex: 1, padding: 20 }}>
  <View style={{ height: 50, backgroundColor: 'red' }}>
    <Text>Header</Text>
  </View>
  <View style={{ flex: 1, backgroundColor: 'blue' }}>
    <Text>Content</Text>
  </View>
  <View style={{ height: 50, backgroundColor: 'green' }}>
    <Text>Footer</Text>
  </View>
</View>

This creates a basic page layout with a fixed header, flexible content area, and fixed footer. The flex: 1 on the content View tells it to take up all available space. Flexbox is the primary way to layout content in React Native, and we'll explore it thoroughly later.