Search⌘ K
AI Features
Home
Courses
Getting Started with Mobile App Development with React Native

View

Explore the View component in React Native to build and style mobile app user interfaces. Learn about nesting Views, using flexbox properties like flex, alignItems, and justifyContent, and incorporating SafeAreaView to handle device safe areas. This lesson helps you create well-structured, visually appealing layouts essential for functional mobile apps.

We'll cover the following...

In React Native, components are used to build the UI. The View component is the most basic component for UI designing. It is similar to the <div> tag in HTML and acts like a container component that can group children components.

Usage

To implement and use the View component, we first have to import it from the react-native library.

Javascript (babel-node)
import { View } from 'react-native';

We also need to import React from the react library.

Javascript (babel-node)
import React from 'react';

Note: We always need to import React from the react library to run our application successfully. We use React to convert the JSX inside our application to regular JavaScript so that our application can compile and run successfully.

Once the View component has been imported, we can use it inside our application using the <view></view> tag.

Javascript (babel-node)
import React from 'react';
import { View } from 'react-native';
const App = () => {
  return (
    <View>
      {/* Children components */}
    </View>
  );
}
export default App;

A View component can be nested inside other View components as well.

Javascript (babel-node)
import React from 'react';
import { View } from 'react-native';
const App = () => {
  return (
    <View>
      {/* Children components */}
      <View>
        {/* Children components */}
      </View>
    </View>
  );
}
export default App;

Nesting ...