View Component in React Native

View is a fundamental React Native component used to contain and organize other components.

import { View } from "react-native";

It is commonly used to create the structure of a mobile screen.

Before using View, import it from the react-native package.

import { View } from "react-native";

You can import multiple React Native components in the same statement.

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

<View>

</View>

The opening and closing tags define the boundaries of the View component.

A View can contain a Text component.

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

export default function App() {

    return (
        <View>
            <Text>
                Hello React Native
            </Text>
        </View>
    );
}

The most common purpose of View is to act as a container for other components.

<View>

    <Text>Student Name</Text>

    <Text>React Native</Text>

</View>

Both Text components are children of the View.

A View can contain other Views.

<View>

    <View>
        <Text>Header</Text>
    </View>

    <View>
        <Text>Content</Text>
    </View>

</View>

This allows developers to create nested layouts.

Nesting means placing one View inside another View.

<View>

    <View>

        <Text>
            Student Information
        </Text>

    </View>

</View>

Nested Views are commonly used for organizing complex interfaces.

A View can receive a style prop.

<View
    style={{
        padding: 20
    }}
>

    <Text>Hello</Text>

</View>

The style controls the appearance and layout of the View.

For larger applications, StyleSheet can be used to organize styles.

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

const styles = StyleSheet.create({

    container: {
        padding: 20
    }

});

<View style={styles.container}>

    <Text>
        Welcome
    </Text>

</View>

The container style is applied to the View.

You can specify the width and height of a View.

const styles = StyleSheet.create({

    box: {
        width: 200,
        height: 100
    }

});

This can be useful for creating cards, panels and other UI sections.

The backgroundColor property changes the background of a View.

const styles = StyleSheet.create({

    box: {
        backgroundColor: "lightblue",
        padding: 20
    }

});

The borderRadius property can be used to create rounded corners.

const styles = StyleSheet.create({

    card: {
        backgroundColor: "white",
        borderRadius: 10,
        padding: 20
    }

});

Rounded Views are commonly used for cards and panels.

Padding creates space between the content and the inside edge of a View.

const styles = StyleSheet.create({

    box: {
        padding: 20
    }

});

Padding can also be specified separately for different sides.

Margin creates space outside a View.

const styles = StyleSheet.create({

    box: {
        margin: 20
    }

});

Margins are useful for creating space between UI elements.

React Native uses Flexbox for many layout requirements.

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }

});

This places the content in the center of the available space.

The flexDirection property can be used to arrange children horizontally.

const styles = StyleSheet.create({

    row: {
        flexDirection: "row"
    }

});

<View style={styles.row}>

    <View>
        <Text>One</Text>
    </View>

    <View>
        <Text>Two</Text>
    </View>

</View>

The default Flexbox direction in React Native is generally column.

const styles = StyleSheet.create({

    column: {
        flexDirection: "column"
    }

});

This places children vertically.

justifyContent controls the arrangement of children along the main axis.

container: {
    flex: 1,
    justifyContent: "center"
}

Common values include:

• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

alignItems controls the alignment of children along the cross axis.

container: {
    flex: 1,
    alignItems: "center"
}

This is commonly used together with justifyContent.

A View can contain an Image component.

import {
    View,
    Image
} from "react-native";

<View>

    <Image
        source={require("./assets/logo.png")}
        style={{
            width: 100,
            height: 100
        }}
    />

</View>

A View can contain input fields.

import {
    View,
    TextInput
} from "react-native";

<View>

    <TextInput
        placeholder="Enter your name"
    />

</View>

This structure is commonly used when creating forms.

A View can also contain interactive components such as Pressable.

<View>

    <Pressable
        onPress={() => alert("Pressed")}
    >

        <Text>
            Press Me
        </Text>

    </Pressable>

</View>

View can be used to create reusable card-like interfaces.

const styles = StyleSheet.create({

    card: {
        padding: 20,
        margin: 10,
        borderRadius: 10,
        backgroundColor: "white"
    }

});

<View style={styles.card}>

    <Text>
        Student Details
    </Text>

    <Text>
        Rahul
    </Text>

</View>

A mobile screen can be divided into multiple View sections.

<View style={styles.container}>

    <View style={styles.header}>
        <Text>Header</Text>
    </View>

    <View style={styles.content}>
        <Text>Content</Text>
    </View>

    <View style={styles.footer}>
        <Text>Footer</Text>
    </View>

</View>

Mobile screens can contain areas occupied by system interface elements such as status bars and device notches.

For appropriate screen layouts, React Native applications can use safe-area solutions such as the safe area APIs provided by the React Native ecosystem.

This helps important content avoid being placed underneath system interface areas.

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

export default function App() {

    return (
        <View style={styles.container}>

            <View style={styles.header}>
                <Text style={styles.title}>
                    Student Dashboard
                </Text>
            </View>

            <View style={styles.card}>

                <Text>
                    Student Name: Rahul
                </Text>

                <Text>
                    Course: React Native
                </Text>

            </View>

        </View>
    );
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        padding: 20
    },

    header: {
        padding: 20,
        backgroundColor: "lightblue",
        borderRadius: 10
    },

    title: {
        fontSize: 22,
        fontWeight: "bold"
    },

    card: {
        marginTop: 20,
        padding: 20,
        borderRadius: 10,
        backgroundColor: "white"
    }

});

The concepts are similar, but the components and styling systems are different.

• Use View to organize screen sections.
• Create reusable components when layouts repeat.
• Use StyleSheet for organized styles.
• Keep deeply nested layouts understandable.
• Use Flexbox for responsive layouts.
• Separate complex screen sections into components.
• Use meaningful component and style names.

View
 ↓
Container
 ↓
 ┌───────────────┐
 ↓               ↓
Text          Image
 ↓
TextInput
 ↓
Pressable
 ↓
Nested View
 ↓
Complete Screen

The View component is a foundation for building React Native layouts. As you progress through the course, you will combine View with Text, Image, TextInput, Pressable, ScrollView, FlatList and other components to create complete mobile application screens.