How to center a View component on screen ?

The View Component is the basic building block for creating the user interface. It can map directly to the native view of different platforms, like UIView, <div>, android.view, etc. The View component can consist of nested View components as well as other native components (children).

Approach: To center a View component on the screen, we can use two approaches: 

• Using flexbox: This is the most commonly used method used to center any component/element. The flexbox model was introduced to create a responsive layout without the use of float or positioning properties. To center any component using the flexbox, we simply need to simply set the flex property as 1, along with the justifyAlign and alignItems properties.
• Using CSS position property: The position property is less widely used in React Native to center any components. The value of the position property is set as “absolute” so as to ensure that it is positioned relative to the nearest ancestor. Then, the top, bottom, left, and right properties are set as 0 along with the justifyAlign and alignItems properties, which are set as “center”.

Example: Let’s see how to center the View component on the screen using the above approaches through examples:

• Step 1: Open your terminal and install expo-cli by the following command.

  npm install -g expo-cli

• Step 2: Now create a project by the following command.

  expo init demo-app

• Step 3: Now go into your project folder i.e. demo-app

  cd demo-app

Project Structure: The project directory should look like the following:

Example 1: Using flexbox
We will use a single View Component with nested Text components as its children. To center our View component, we will use the flex property, which is set to 1, along with the justifyAlign and alignItems properties (both set to center since the View component is required to be centered on the screen).

App.js

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

export default function App() {
  return (
    <View style={styles.centered}>
      <Text style={styles.title}>Center a View Component</Text>
      <Text style={styles.subtitle}>Using Flexbox</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffc2c2",
  },
  title: {
    fontSize: 18,
    marginVertical: 2,
  },
  subtitle: {
    fontSize: 14,
    color: "#888",
  },
});

Step to run the application: Start the server by using the following command:

expo start

Output:

Example 2: Using CSS position property
We will use a single View Component with nested Text components as its children. To center our View component, we will use the position property, which is set to absolute. We will also use the top, bottom, left and right values and set them to 0 (since the View component is required to be centered on the screen) As before, we will also require the justifyAlign and alignItems properties with their values set as center.

App.js

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

export default function App() {
  return (
    <View style={styles.centered}>
      <Text style={styles.title}>Center a View Component</Text>
      <Text style={styles.subtitle}>Using CSS Position property</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  centered: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffc2c2",
  },
  title: {
    fontSize: 18,
    marginVertical: 2,
  },
  subtitle: {
    fontSize: 14,
    color: "#888",
  },
});

Step to run the application: Start the server by using the following command:

expo start

Output: