View: what it is, container properties and React Native

What is View in React Native

View is a fundamental React Native component that serves as a container for other components. It supports styling through StyleSheet, layout through Flexbox, touch handling, animations, and transformations. View is an abstraction over native container elements: UIView on iOS and android.view.View on Android.

In React Native, it is not possible to use HTML elements — instead, all layouts are built from View. Even Text and Image are usually wrapped in View for positioning. The component can be empty (just a container) or contain any number of child elements at any nesting depth.

View supports rendering on both platforms from a single JavaScript codebase. Flexbox properties, margins, background, shadows, and borders work identically on iOS and Android. Platform differences are minimal — for example, shadows on iOS use shadowColor/shadowOffset, while on Android they use elevation.

According to React Native Layout Docs, 2024, View is optimized for mobile devices: it does not create extra native views during flatten optimization and correctly handles cascading updates when parent styles change.

View Component Properties and API

The View component has a rich set of props for controlling appearance, layout, and interactivity. All props fall into several categories: style props, touch events, accessibility, and platform-specific features. Let’s explore the key groups.

View Style Props

View supports all standard CSS properties for mobile platforms. Key ones include: flexDirection, justifyContent, alignItems for positioning; margin, padding for spacing; backgroundColor, borderRadius for appearance; width, height, maxHeight for sizing.

Touch Events and Gestures

View can handle touch events through the onStartShouldSetResponder, onMoveShouldSetResponder, and onResponderGrant props. These events allow implementing custom gestures without libraries. For standard taps, onTouchStart, onTouchEnd, and onPress (via Pressable or TouchableOpacity) are used.

Platform-Specific Props

On iOS, shadowColor, shadowOffset, shadowOpacity, shadowRadius are available for shadows. On Android, these properties are ignored — instead, elevation is used (a card-like shadow). The onLayout callback is triggered when the View’s dimensions change, which is useful for adaptive layouts.

Layout with View and Flexbox

Flexbox is the only layout mechanism in React Native (unlike the web, where Grid and Float are available). All element positioning is done through Flexbox properties of the View component. By default, View has flexDirection set to column, not row as on the web, which matches the vertical orientation of mobile screens.

Key Flexbox Properties in View

flexDirection determines the main axis direction: column (default) or row. justifyContent controls distribution along the main axis (flex-start, center, space-between). alignItems — along the cross axis (stretch — default value). flex specifies the proportion of available space for a child element.

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

const CardLayout = () => (
    <View style={styles.card}>
        <View style={styles.row}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <Text style={styles.name}>John Doe</Text>
                <Text style={styles.role}>Developer</Text>
            </View>
        </View>
    </View>
);

The example shows a typical structure: an outer View — card, an inner row — a row with an avatar and text block, content — a column with name and role. This nested View structure is the standard for any React Native screen.

Differences Between View and HTML div

Although View is conceptually similar to HTML div, there are key differences that are important to understand when porting code from the web to React Native. These differences relate to rendering, styles, and default behavior.

The most important difference is flexDirection: column by default. This means that without explicit configuration, child elements are arranged vertically, not horizontally. The second difference: View width and height by default stretch to fill all available parent space (analogous to width: 100% in CSS).

Practical Examples with View

Let’s look at two real-world examples of using View in React Native applications: centering content across the full screen and creating a responsive card grid. Both patterns appear in every project.

Example 1: Full-Screen Centering Placeholder

To create an empty state, a View with flex: 1 and centering on both axes is used. This is a standard pattern for loading screens, error states, and empty lists.

const EmptyState = ({ message }) => (
    <View style={styles.container}>
        <Text style={styles.icon}>{icon}</Text>
        <Text style={styles.message}>{message}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    icon: { fontSize: 48 },
    message: { fontSize: 16, color: '#666', marginTop: 16 },
});

The combination of justifyContent: center and alignItems: center in a View with flex: 1 centers the content on both axes across the full screen. This is the most common pattern of using View in React Native.

Example 2: Card Grid with Flexbox

To display two columns of products or articles, a View with flexDirection: row, flexWrap: wrap and child Views with fixed width is used. This pattern replaces CSS Grid in React Native.

const ProductGrid = ({ products }) => (
    <View style={styles.grid}>
        {products.map((product) => (
            <View key={product.id} style={styles.card}>
                <Image source={{ uri: product.image }} />
                <Text>{product.name}</Text>
            </View>
        ))}
    </View>
);

const styles = StyleSheet.create({
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    card: { width: '48%', marginBottom: 16 },
});

In this example, the outer View with flexWrap: wrap works as an analog of CSS Grid. Each card takes up 48% of the width, leaving gaps between columns. This is a typical pattern for catalogs and content feeds.