Getting Started with Mobile App Development with React Native/

...

/

View

View

Learn about the View component and see how we can use and style it.

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.

Press + to interact
import { View } from 'react-native';

We also need to import React from the react library.

Press + to interact
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.

Press + to interact
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.

Press + to interact
import React from 'react';
import { View } from 'react-native';
const App = () => {
  return (
    <View>
      {/* Children components */}
      <View>
        {/* Children components */}
      </View>
    </View>
  );
}
export default App;

Nesting multiple View components is similar to nesting multiple <div> tags in HTML. Nesting allows developers to divide components into different sections and helps with styling them per our requirements and needs.

Styling

Mobile applications must have a good style to compete in the marketplace and engage users. We can develop a fully functional app, but people will not use it if it is not user-friendly. In React ...